Alexander Kraev
1.08K subscribers
87 photos
38 videos
1 file
76 links
Tech, Mobile (like SwiftUI, Compose), Code, Thoughts, feel free to reach me: @lexkraev

По вопросам рекламы: @lexkraev
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Наглядный пример, почему Apple депрекэйтнула модификатор .animation с одним параметром (типом анимации): из-за некорректной отрисовки самой анимации, SUI не понимает, на какое именно событие анимировать. 👇🏻

#readthis
Alexander Kraev
Наглядный пример, почему Apple депрекэйтнула модификатор .animation с одним параметром (типом анимации): из-за некорректной отрисовки самой анимации, SUI не понимает, на какое именно событие анимировать. 👇🏻 #readthis
Рассмотрим, код:

Предположим, хотим сделать zoom-zoom анимацию при тапе на кнопку. Для этого сделаем модификатор:

public struct ScaleButtonStyle: ButtonStyle {
public init() {}

public func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.scaleEffect(configuration.isPressed ? 0.95 : 1)
.animation(.linear(duration: 0.2))
.brightness(configuration.isPressed ? -0.05 : 0)
}
}

public extension ButtonStyle where Self == ScaleButtonStyle {
static var scale: ScaleButtonStyle {
ScaleButtonStyle()
}
}


Далее применим этот модификатор для отрисовки элемента в горизонтальном Lazy стэке:

ScrollView(.horizontal, showsIndicators: false) {
LazyHStack {
ForEach(data, id: \.self) { card in
Button {

} label: {
VStack(alignment: .leading
) {
AsyncImage(…)
.resizable()
.frame(width: elementSize.width, height: elementSize.height)
.cornerRadius(8)

Text(…)
.boldFont(…)
.foregroundColor(…)
}
}
.buttonStyle(ScaleButtonStyle())
}
}


В итоге получаем представленный баг: некорректная анимация на onAppear в lazy стеке. Фиксим путем добавления value в .animation, тем самым указывая конкретное значение для отслеживания изменений.

public struct ScaleButtonStyle: ButtonStyle {
public init() {}

public func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.scaleEffect(configuration.isPressed ? 0.95 : 1)
.animation(.linear(duration: 0.2), value: configuration.isPressed)
.brightness(configuration.isPressed ? -0.05 : 0)
}
}


#readthis