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（）视图。

如果您将代码更改为使用随机长度的文本，而不是“ Animate Please”，则会看到在添加最大视图时会发生动画。这是因为ScrollView需要再次扩展：

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

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

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

更新

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

当将第一项添加到@State数组时，withAnimation仅执行一次动画

1 个答案:

更新