SwiftUI withAnimation(_:_:) 函数没有动画

Question

我无法使用

withAnimation(_:_:)

函数迁移简单的动画：

struct WelcomeView: View {

  let greetingTexts: [String]

  @ViewBuilder
  var body: some View {
    VStack {
      ForEach(greetingTexts.indices, id: \.self) { index in
        Text(greetingTexts[index])
            .font(.mtgSans(.title1))
            .multilineTextAlignment(.center)
            .transition(.opacity)
            .animation(Animation.easeOut.speed(0.5).delay(0.08 * Double(index)))
      }
    }
  }
}

对此：

  struct WelcomeView: View {

    let greetingTexts: [String]

    @ViewBuilder
    var body: some View {
      VStack {
        ForEach(greetingTexts.indices, id: \.self) { index in
          withAnimation(.easeOut.speed(0.5).delay(0.08 * Double(index))) {
            Text(greetingTexts[index])
              .font(.mtgSans(.title1))
              .multilineTextAlignment(.center)
              .transition(.opacity)
          }
        }
      }
    }
  }

而且它根本没有动画。有线索吗？

Answer 1

您可以利用 SwiftUI 的动画和不透明度修改器为 VStack 中的每个项目设置延迟动画文本。

这是一个例子：

import SwiftUI

struct WelcomeView: View {
    let greetingTexts: [String]

    var body: some View {
        VStack {
            ForEach(greetingTexts.indices, id: \.self) { index in
                Text(greetingTexts[index])
                    .font(.title)
                    .multilineTextAlignment(.center)
                    .opacity(1) // Full opacity for smooth animation
                    .animation(
                        Animation.easeOut
                            .speed(0.5)
                            .delay(0.08 * Double(index)),
                        value: greetingTexts
                    )
            }
        }
    }
}

解释：

ForEach with Index：使用 .indices 访问每个元素的索引以计算延迟。 不透明度修改器：从 0 开始初始不可见，然后动画到 1。 动画修改器：对每个文本使用 0.08 * Double(index) 应用延迟。

用法：

struct ContentView: View {
    var body: some View {
        WelcomeView(greetingTexts: ["Hello", "Welcome!", "Let's Animate!"])
    }
}

当视图出现时，这将以交错延迟的方式为每个文本设置动画。如果您需要进一步说明，请告诉我！ 😊