`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 块中描述的动画。

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() 视图也以零宽度开始，但随着其包含的 ScrollView 的增长，它也会如此。这些是动画的变化。

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

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

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

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

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

更新

根据您的 cmets，您希望文本滑动。最简单的形式是使用过渡。不幸的是， 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)
                }
            }
        }
    }
}