SwiftUI AsyncImage animation misbehavior

Question

While testing out SwiftUI, I've found that AsyncImage does not work well while animating a transition. It seems to settle on its final position of the transition before the rest of the UI has moved there, making the animation seem weird or off.

My main question is: is there any way to access the SwiftUI animation of the AsyncImage and make it work with other animations elsewhere in the app?

The weird part is that, if I change it to some other view (that doesn't have animations), the transition behaves correctly, so I believe that the root of the problem is something to do with AsyncImage's default animation for changing between its phases (loading, failed or loaded).

The overlay that is presented is described as such:

    if isBottomSheetVisible {
                VStack(alignment: .leading) {
                    AccountSelectorHeader()
                    ForEach(accounts) { account in
                        AccountRow(
                            account: account,
                            isLast: accounts.last == account
                        )
                    }
                }
                .padding(.bottom, 24)
                .background(Color(.tableViewHeaderBackgroundColor)
                                .cornerRadius(24, corners: [.topLeft, .topRight])
                                .edgesIgnoringSafeArea(.bottom)
                )
                .transition(
                    .move(edge: .bottom)
                )
            }

And each image is only a standard AsyncImage inside the AccountRow view:

    AsyncImage(url: URL(string: account.image)) {
            $0
                .resizable()
                .clipShape(Circle())
        } placeholder: {
            ProgressView()
        }

FWIW- I was having a similar issue and when I replaced the AsyncImage with a custom view that loaded an image, it animated properly, so seems like a bug in AsyncImage — Hudson, May 11 '22 at 13:58

score 2 · Accepted Answer · answered Jul 29 '22 at 09:44

I faced a similar issue and it worked fairly well if you use the init(url:scale:transaction:content:).

With the code below I got the image move in with the sheet and on disappear it didn't move but was removed as the sheet obscured it:

AsyncImage(
            url: URL(string: url),
            transaction: Transaction(animation: .default)
        ) { phase in
            switch phase {
            case .success(let image):
                image
                    .resizable()
            default:
                Image("defaultImage")
                    .resizable()
            }
        }

score 0 · Answer 2 · answered Oct 03 '22 at 14:37

0

That's indeed weird, just tried with an own implementation of asyncImage and it has a similar behaviour, perhaps it is easier for you to fix it from there: Simple iOS13 AsyncImage. I will take a look to it too if I have time.

answered Oct 03 '22 at 14:37

Marc Biosca

86
3

SwiftUI AsyncImage animation misbehavior

2 Answers2