在SwiftUI中实现状态改变的动画效果

Question

在SwiftUI中实现状态改变的动画效果

14

我目前正在尝试使用SwiftUI。在SwiftUI中，可以通过以下方式对状态进行动画处理：

struct Foo: View {
    @State private var show = false

    var body: some View {
        VStack {
            if show {
                Text("Foo")
            }
            Button(action: {
                withAnimation {
                    self.show.toggle()
                }
            }) {
                Text(show ? "Hide" : "Show")
            }
        }
    }
}

但是如果我有一个TextField：

struct Foo: View {
    @State private var text = ""

    var body: some View {
        VStack {
            TextField($text, placeholder: Text("Foo")) {
                print("editing ended")
            }
            if !text.isEmpty {
                Button(action: {}) {
                    Text("Done")
                }
            }
        }
    }
}

我无法找到一种方法来使这个改变产生动画效果，因为State属性是由TextField更改的，而没有调用withAnimation()。

有可能实现这个改变带有动画吗？

- Josef Zoller

1

这在SwiftUI之外会是什么样的动画？换句话说，你认为这里正在进行什么“变化”，以及如何进行动画处理？ - matt

在 SwiftUI 以外是什么意思？在我的示例中，我想让按钮淡入淡出，但我需要这个动画功能用于更复杂的动画，涉及颜色等。但是所有我需要的动画，如果调用 withAnimation() 函数，都会正常运行。 - Josef Zoller

淡入/淡出按钮或文本框？在您的示例中，您正在尝试动画显示用户点击时正在更改的文本，这似乎不是您想要的效果。 - DenFav

在示例＃1中，当我按下按钮时，有两件事情发生。首先，“Foo”文本会显示或隐藏，其次按钮的文本在“隐藏”和“显示”之间切换。这两个“变化”都使用默认动画发生，这只是一个淡入淡出动画。在示例＃2中，“完成”按钮仅在文本不为空时显示，否则将被隐藏。这发生而没有任何动画。但重要的是，在哪个示例中发生了哪个动画并不重要，我唯一关心的是，在示例＃2中没有动画，而在示例＃1中有一些动画。 - Josef Zoller

但是在第一个示例中，您使用了withAnimation来包装状态更改。而在第二个示例中，您没有这样做。因此，不清楚您想要动画的内容是什么。 - matt

@matt 这就是我的整个观点。在示例2中，我该如何包装状态更改？状态是由TextField而不是我的代码更改的，因此我无法在其周围放置withAnimation。 - Josef Zoller

2个回答

6

TextField("占位符", text: $text.animation())

当文本内容改变时，所有使用该文本的内容都将被动画化。

- malhal

在切换上也能工作！ - Hiimdjango

连在Toggle上都能工作！ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DenFav · Accepted Answer

只需添加动画修饰符以包装您的按钮。

  var body: some View {
    VStack {
      TextField($text, placeholder: Text("Foo")) {
        print("editing ended")
      }
//      if !text.isEmpty {
        Button(action: {}) {
          Text("Done")
        }
        .background(text.isEmpty ? Color.red : Color.yellow )
         //.animation(.basic(duration: 1))
        .animation(Animation.default.speed(1))
      }
    }
  }