时间戳

首页 > 解决方案 > SwiftUI：将动画附加到过渡

ios - SwiftUI：将动画附加到过渡

问题描述

根据 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()
    }
}

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

标签： iosswiftuser-interfaceanimationswiftui

解决方案

您需要将布尔切换包装在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)
    }
}

推荐阅读