SwiftUI dev

Весьма интересный момент отрисовки анимации в SwiftUI 👇🏻
Interesting case of SwiftUI-animation rendering👇🏻

#readthis

536 viewsAlex Kraev, edited 14:20

Весьма интересный момент отрисовки анимации в SwiftUI 👇🏻 Interesting case of SwiftUI-animation rendering👇🏻 #readthis

Рассмотрим следующий код:

...
@State var selectedGood: Good?

var body: some View {
    ZStack(alignment: .bottom) {
        // List with goods
        ScrollList(selection: $selectedGood)
            .zIndex(0)
        
        // animated panel view:
        ...
        AsyncImage(url: URL(string: selectedGood.image.url)) { image in
            image.resizable()
                .aspectRatio(contentMode: .fit)
        } placeholder: {
            Color.Background.secondary.cornerRadius(8)
        }
        ...
        .offset(y: selectedGood != nil ? 0 : -2 * height)
        .animation(.spring(…), value: selectedGood != nil)
        .zIndex(1)
    }
}
...

Весьма стандартная ситуация: имеется скролл вью с листом, при выборе из этого листа объекта нужно анимировать (в данном случае, просто поменять offset) панель. Менять offset начинаем сразу после выбора. На панели выведены два изображения, одно из которых выбранный объект из списка. Изображения рендерим через AsyncImage, используя placeholder. Если кэша изображения нет, то какое-то время необходимо потратить на его загрузку по сети. Здесь и сталкиваемся с неожиданным поведением отрисовки анимации в SwiftUI: замена placeholder-а на изображение происходит в финальной точке положения View после анимации, а не во время. Сразу укажу, что добавление .delay на анимацию ситуацию не исправляет.
Возможны несколько вариантов фикса.
Один из которых ввести искусственную задержку, например, в 0.2 - 0.3 секунды, не заметную для пользователя, но ее будет хватать на загрузку изображения:

...
@State var startAnimation: Bool = false
@State var selectedGood: Good?
...

AsyncImage(url: URL(string: selectedGood.image.url)) { image in
            image.resizable()
                .aspectRatio(contentMode: .fit)
        } placeholder: {
            Color.Background.secondary.cornerRadius(8)
        }.onChange(of: selectedGood) { _ in
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
                    withAnimation {
                        startAnimation = true
                    }
                }
            } 
 .offset(y: startAnimation ? 0 : -2 * height)
            .animation(.spring(...), value: startAnimation) 
...

В большинстве случаев, этот фикс работает, но при плохом интернете, понятно, что нет.
Предпочтительным, на мой взгляд, будет другой сценарий: возвращать стейт загрузки изображения:

...
@State var startAnimation: Bool = false
@State var selectedGood: Good?
...

CustomAsyncImage(url: URL(string: selectedGood.image.url),
     startAnimation: $startAnimation ) { image in
            image.resizable()
                .aspectRatio(contentMode: .fit)
        } placeholder: {
            Color.Background.secondary.cornerRadius(8)
        }.offset(y: startAnimation ? 0 : -2 * height)
            .animation(.spring(...), value: startAnimation) 
...


struct CustomAsyncImage: View {

...
 @Binding var startAnimation: Bool
 ...
 var body: some View {
  AsyncImage(url: URL(string: url)) { image in
                 image.resizable()
                     .aspectRatio(contentMode: .fit)
                     .onAppear {
                         isLoaded.toggle()
                     }
            } placeholder: {
                Color.Background.secondary.cornerRadius(8)
            }
 }
}
...

#readthis

571 viewsAlex Kraev, edited 14:21