使用 ForEachAnimation 创建动画 ForEach 循环

AnimationStack

一个在其中对视图进行动画处理的堆栈。通过 ForEachAnimation 创建动画的 ForEach 循环。你还可以自定义动画。

文档

创建动画堆栈

VStack {
    AnimationStack {
            Text("Welcome")
            Text("to")
            Text("AnimationStack")
        }
    }
.bold()
.font(.largeTitle)

自定义动画堆栈

AnimationStack(opacity: true, offSetX: 100, offSetY: 100, rotation: 11, scale: 2, delay: 0.3, animation: .spring.speed(0.7)) {
    Text("Welcome")
    Text("to")
    Text("AnimationStack")
}

提供的所有参数都是动画开始之前的值。

示例

opacity: true offSetX: 100 delay: 1

堆栈将混合视图,因为不透明度为真。堆栈将把视图的偏移量从 100 变为 0 进行动画处理。

延迟是视图动画之间的时间。当你堆栈中有三个视图并且延迟为一个时,第一个视图将在 1 秒钟内进行动画处理,第二个将在 2 秒钟内进行动画处理,第三个将在 3 秒钟内进行动画处理。

HStack {
    AnimationStack(opacity: true, offSetX: 100, offSetY: 0, delay: 1) {
        Text("Amazing")
        Text("Wow")
        Text("Cool")
        Text("Nice")
    }
}
.bold()
.font(.largeTitle)

ForEachAnimation

ForEachAnimation 是一个 ForEach 循环,以类似于 AnimationStack 的方式对视图进行动画处理。

所提供数组中的元素必须符合 Hashable 协议。

ForEachAnimation(["SwiftUI", "is", "awesome"]) { i in
    Text(i)
}

ForEachAnimation 是只读的。你无法通过绑定更改堆栈中数组中的值。你可以以类似于 AnimationStack 的方式自定义 ForEachAnimation。

GitHub

点击跳转