swift - `withAnimation` 将第一项添加到@State 数组时只做一次动画

Question

我的目标是在将对象添加到@State 事件数组时控制动画类型。

withAnimation 仅在第一次附加到事件数组时发生。然后在附加追加时忽略它。

我目前正在 Xcode 11 beta 4 上运行它

我尝试添加调用 DispatchQueue.main.async，在 Text() 对象上添加动画。

如果我使用列表，它会在添加时执行动画，但我不知道如何修改这些动画。

目标

• 让文本在每次添加时滑入，在每次删除时淡出。

struct Event: Identifiable {
    var id = UUID()
    var title: String
}

struct ContentView: View {
    @State
    var events = [Event]()

    var body: some View {
        VStack {
            ScrollView {
                ForEach(events) { event in
                    Text(event.title)
                    .animation(.linear(duration: 2))
                }
            }

            HStack {
                Button(action: {
                    withAnimation(.easeOut(duration: 1.5)) {
                        self.events.append(Event(title: "Animate Please"))
                    }
                })  {
                    Image(systemName: "plus.circle.fill").resizable().frame(width: 40, height: 40, alignment: .center)
                }
            }

        }
    }
}

我希望每个追加都有一个在 withAnimation block 中描述的动画。

Answer 1

当 SwiftUI 布局和动画以您认为不正确的方式运行时，我建议您添加边框。结果可能会让您大吃一惊，并直接指出原因。在大多数情况下，您会发现 SwiftUI 实际上是正确的!就像你的情况一样:

从添加边框开始:

ScrollView {
    ForEach(events) { event in
        Text(event.title)
        .border(Color.red)
        .animation(.linear(duration: 2))
    }.border(Color.blue)
}.border(Color.green)

当您运行您的应用程序时，您会看到在添加第一个数组元素之前，ScrollView 折叠为零宽度。这是正确的，因为 ScrollView 是空的。但是，当您添加第一个元素时，需要对其进行扩展以容纳“Animate Please”文本。 Text() View 也以零宽度开始，但随着它包含的 ScrollView 的增长，它也会增长。这些是动画化的变化。

现在，当您添加第二个元素时，没有任何动画。 Text() View 从一开始就以其最终大小放置。

如果您将代码更改为使用随机长度的文本而不是“Animate Please”，您将看到在添加最大 View 时，确实会出现动画。这是因为 ScrollView 需要再次展开:

self.events.append(Event(title: String(repeating: "A", count: Int.random(in: 0..<20))))

下一步:您没有在问题中解释您希望看到什么动画。是淡入淡出吗？幻灯片？请注意，除了动画之外，您还可以定义转换，它决定了在层次结构中添加或删除 View 时要执行的动画类型。

如果在将这些技巧付诸实践后，您仍然遇到困难，我建议您编辑您的问题并准确告诉我们您希望在向数组添加新元素时看到什么样的动画。

更新

根据您的意见，您希望文本滑动。最简单的形式是使用过渡。不幸的是， ScrollView 似乎禁用了其子项的转换。我不知道这是故意的还是错误。不管怎样，我在这里发布两种方法。一种带有转换(不适用于 ScrollView)，另一种只使用动画，它在 ScrollView 中工作，但需要更多代码:

带有转换(在 ScrollView 中不起作用)

struct ContentView: View {
    @State private var events = [Event]()

    var body: some View {
        VStack {
            ForEach(events) { event in
                // A simple slide
                Text(event.title).transition(.slide).animation(.linear(duration: 2))

                // To specify slide direction
                Text(event.title).transition(.move(edge: .trailing)).animation(.linear(duration: 2))

                // Slide combined with fade-in
                Text(event.title).transition(AnyTransition.slide.combined(with: .opacity)).animation(.linear(duration: 2))
            }

            Spacer()
            HStack {
                Button(action: {
                    self.events.append(Event(title: "Animate Please"))
                })  {
                    Image(systemName: "plus.circle.fill").resizable().frame(width: 40, height: 40, alignment: .center)
                }
            }
        }
    }
}

没有转换(在 ScrollView 内工作):

struct Event: Identifiable {
    var id = UUID()
    var title: String
    var added: Bool = false
}

struct ContentView: View {
    @State var events = [Event]()

    var body: some View {
        VStack {
            ScrollView {
                ForEach(0..<events.count) { i in
                    // A simple slide
                    Text(self.events[i].title).animation(.linear(duration: 2))
                    .offset(x: self.events[i].added ? 0 : 100).opacity(self.events[i].added ? 1 : 0)
                    .onAppear {
                        self.events[i].added = true
                    }
                }
                HStack { Spacer() } // This forces the ScrollView to expand horizontally from the start.
            }.border(Color.green)

            HStack {
                Button(action: {
                    self.events.append(Event(title: "Animate Please"))
                })  {
                    Image(systemName: "plus.circle.fill").resizable().frame(width: 40, height: 40, alignment: .center)
                }
            }
        }
    }
}