SwiftUI AsyncImage animation 不當行為

Question

在測試 SwiftUI 時，我發現 AsyncImage 在動畫過渡時效果不佳。 在 UI 的 rest 移到那里之前，它似乎已確定其最終的過渡 position，這使得 animation 看起來很奇怪或偏離。

我的主要問題是：有什么方法可以訪問 AsyncImage 的 SwiftUI animation 並使其與應用程序其他地方的其他動畫一起使用？

奇怪的是，如果我將其更改為其他視圖（沒有動畫），則轉換行為正確，因此我認為問題的根源與 AsyncImage 的默認 animation 用於在其phases之間進行更改有關（加載、失敗或加載）。

呈現的疊加層是這樣描述的：

    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)
                )
            }

每個圖像只是 AccountRow 視圖中的一個標准 AsyncImage：

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

Answer 1

我遇到了類似的問題，如果您使用init(url:scale:transaction:content:) ，它工作得相當好。

使用下面的代碼，我將圖像與紙張一起移動，並且在消失時它沒有移動，但由於紙張遮住了它而被移除：

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