SwiftUI：将动画附加到过渡

Question

根据 Apple 文档，我们应该能够将动画直接附加到过渡。例如：

.transition(AnyTransition.slide.animation(.linear))

方法的文档：

extension AnyTransition {

    /// Attach an animation to this transition.
    public func animation(_ animation: Animation?) -> AnyTransition
}

说：

总结

将动画附加到此过渡。

但我无法让它工作。看看这个最小可行的例子（你可以复制粘贴并自己尝试）：

import SwiftUI

struct AnimationTest: View {
    @State private var show = false
    var body: some View {
        VStack {
            if show {
                Color.green
                    .transition(AnyTransition.slide.animation(.linear))
            } else {
                Color.yellow
                    .transition(AnyTransition.slide.animation(.linear))
            }
            Button(action: {
                self.show.toggle()
            }, label: {
                Text("CHANGE VIEW!")
            })
        }
    }
}

struct AnimationTest_Previews: PreviewProvider {
    static var previews: some View {
        AnimationTest()
    }
}

如您所见，根本没有动画发生。有任何想法吗？谢谢。

Answer 1

您需要将布尔切换包装在 withAnimation() 闭包中：

withAnimation {
    self.show.toggle()
}

在模拟器上测试了 Xcode 11.2.1 上的转换；画布不预览它。

请注意，直接应用于视图的动画/过渡会影响该特定视图及其子视图。此外，根据文档：

func animation(Animation?) -> View

将给定的动画应用到视图中的所有动画值。

由于动画值（在这种情况下启用转换的 Bool 切换）在 Color 视图之外，因此必须从按钮操作中设置的位置显式地对其进行动画处理。或者，可以有效地将过渡直接附加到目标视图，但将动画应用到它们的容器，从而启用对show 的更改的插值。所以，这也达到了预期的效果：

struct AnimationTest: View {
    @State private var show = false
    var body: some View {
        VStack {
            if show {
                Color.green
                    .transition(.slide)
            } else {
                Color.yellow
                    .transition(.slide)
            }
            Button(action: {
                self.show.toggle()
            }, label: {
                Text("CHANGE VIEW!")
            })
        }
        .animation(.linear)
    }
}