在 SwiftUI 中，只需要定义【开始】和【结束】的两个状态，剩下两个状态之间的【变化阶段】，系统将自动为你处理。一般数值型的参数属性，都可以呈现动画。您可以通过不同的方式来控制变化，例如速度和持续时间。SwiftUI 动画大体设置原理是：
@State 状态值的改变@State 状态值的改变引发了视图的某个参数值的改变
当我们使用 .default、 .easeInOut 这些动画曲线时，实际上是在创建一个 Animation 结构体的实例，它们有自己的属性和修饰符。您可以从各种内置选项中指定所需曲线，包括以下这些。它们的语法都一样，都是 .animation(.xxxxxx, value: )
.default 默认效果.linear 恒定的线性速度.easeIn 开始缓慢然后加速直至结束.easeOut 开始时很快，然后在接近结束时减慢.easeInOut 开始时很慢，中间加速，然后在接近尾声时减速.spring 弹簧动画，iOS 17 之后它可以设置 bounce 参数.smooth 是没有弹跳的弹簧动画（来自 iOS 17）.snappy 是一个带有一点反弹的弹簧动画（来自 iOS 17）.bouncy 是具有中等弹跳量的弹簧动画（来自 iOS 17）.timingCurve 来指定自己的曲线控制点如果没有设置该属性，则SwiftUI会用默认的时间，大概是0.4秒左右完成动画
// 完成时间 2 秒
.animation(.easeOut(duration: 2))
// 完成时间 15 秒
.animation(.linear(duration: 15))
设置速度 和 duration 一样，也可以控制一个动画完成的快慢。
.animation(Animation.easeInOut(duration: duration))
.animation(Animation.easeInOut(duration: duration).speed(2))
.animation(Animation.easeInOut(duration: duration).speed(0.5))
使用 delay 延迟时，动画曲线的前面必须得加上 Animation 关键词，否则会提示“类型不明确”
//依次延迟的效果
HStack {
ForEach(0...4, id: \\.self) {
index in
Circle()
.frame(width: 10, height: 10)
.foregroundColor(.green)
.scaleEffect(self.isLoading ? 0 : 1)
.animation(Animation.linear(duration: 0.6).repeatForever().delay(0.2 * Double(index)))
}
}
.onAppear() {
self.isLoading = true
}
默认情况下，当使用 repeatCount 时，SwiftUI会将动画自动反转进行。 并且点击按钮后，动画播放3次后停止；这个时候再点击按钮，这个动画实际是以反转的效果开始，再运行3次。所以前后两次点击的效果其实不大一样。类似（1，2，1）和（2，1，2）
//当触发一个动画时，默认只会执行一遍。如果想重复需要额外设置：
//重复，默认反转
.animation(Animation.easeOut(duration: 0.6).repeatCount(3))
//重复，但不反转
.animation(Animation.easeOut(duration: 0.6).repeatCount(3, autoreverses: false))
//一直重复
.animation(Animation.easeOut(duration: 0.6).repeatForever())
//一直重复，但不反转
.animation(Animation.easeOut(duration: 0.6).repeatForever(autoreverses: false))
//每次重复之前设置一个延迟间隔
.animation(Animation.easeOut(duration: 0.6).delay(1).repeatForever(autoreverses: false))
.animation(.easeInOut(duration: 1).repeatCount(3, autoreverses: true), value: animationAmount)
//如果将重复计数设置为2双数，那么按钮将先放大然后再缩小，然后立即跳回到较大状态。这是因为最终按钮必须与程序的状态匹配，无论我们应用什么动画
隐式动画：指的是通过视图修饰符 .animation(_: value:) 添加动画，SwiftUI 自动处理状态变化的动画效果
animation( _: value: ) 或显性动画的写法来代替。animation( _: value: ) 比之前的写法就是多了一个参数 value，它要在这里填上能够触发这个动画的具体 state 参数// 首先：因为希望在某种条件下，更改某个修饰器的值，且执行某个动画；因此首先需要使用 @State 属性来存储某个状态；
@State private var heartActived : Bool = false
// 然后：在具体视图的属性上，使用三元运算符，定义不同状态下，UI是什么样的
ZStack {
Circle()
.foregroundColor(heartActived ? .gray : .red)
.scaleEffect(heartActived ? 1.0 : 0.5)
}
// 最后：把 animation(_: value:) 修饰器加到想要呈现动画的视图上，並指定所需要到动画类型
// 此时视图就会在参数发生改变时呈现动画，还可以定义动画持续时间与延迟时间
// 不止可以在单个视图中应用 animation 修饰器，也可以在父视图中使用。SwiftUI 会寻找嵌入在父视图中所有的改变状态，并建立动画。
// 这个 animation 修饰器是加到 ZStack 的，所以它会查找 ZStack 里，和 heartActived 相关的所有状态参数，赋予动画
ZStack{...}
.animation(.bouncy(duration: 0.5), value: heartActived)
// 最后的最后，通过在具体时机改变该状态参数的值，即可随时触发动画
.OnTapGesture{
self.heartActived.toggle()
}
// 在不想要动画的视图下加上以下修饰符
.animation(.none)
.animation(nil)
@State private var showCard = false
@State private var useAnimation = false
VStack {
HStack {
Button(action: {
self.useAnimation = false
self.showCard.toggle()
}) {
Text("X").font(.body).padding(8)
}
}
Image("Card")
}
.offset(x: showCard ? 0 : -400)
// 使用三元运算符判断 useAnimation 的值，决定有没有动画
.animation(useAnimation ? .default : .none)
animation() 修饰符应用于视图，以便让它隐式地以动画方式进行更改animation() 修饰符的顺序很重要：只有放在 animation() 修饰符之前的样式修饰符，才会被赋予动画。我们还可以应用多个 animation() 修饰符，每个修饰符都会控制它之前的所有内容直到下一个动画修饰符// 示例1：我们可以使用默认动画使颜色发生变化，但使用弹簧作为剪辑形状：
Button("Tap Me") {
enabled.toggle()
}
.frame(width: 200, height: 200)
.background(enabled ? .blue : .red)
.animation(.default, value: enabled)
.foregroundStyle(.white)
.clipShape(.rect(cornerRadius: enabled ? 60 : 0))
.animation(.spring(duration: 1, bounce: 0.6), value: enabled)
// 示例2：动画触发后，两个动画都是同时计时的。第一个动画2秒钟后开始，它只影响颜色动画；
// 再过1秒，第二个动画也开始了（因为它是延迟3秒），它只影响第二个放大动画；
.stroke(isLoading ? Color.blue : Color.red, lineWidth: 10.0)
// 这个修改器只影响上面的动画
.animation(Animation.easeInOut(duration: 1).delay(2), value: isLoading)
.scaleEffect(change ? 0.75 : 1)
// 这个修改器只影响上面的动画
.animation(Animation.easeIn.delay(3), value: isLoading)
// 示例3：为了获得更多控制，还可以通过将 nil 传递给修饰符来完全禁用动画
// 例如，您可能希望颜色立即发生变化，但剪辑形状保留其动画，在这种情况下您可以这样写：
Button("Tap Me") {
enabled.toggle()
}
.frame(width: 200, height: 200)
.background(enabled ? .blue : .red)
// 如果不加这一行，则所有的样式属性都会应用后面的弹簧动画。但我们想颜色变化没有动画。如果没有多个 animation() 修饰符，这种控制不可能实现
.animation(nil, value: enabled)
.foregroundStyle(.white)
.clipShape(.rect(cornerRadius: enabled ? 60 : 0))
.animation(.spring(duration: 1, bounce: 0.6), value: enabled)
在 iOS 17 及更高版本中引入了一种更新、更清晰的方法：
struct ContentView: View {
@State private var isEnabled = false
var body: some View {
Button("Press Me") {
isEnabled.toggle()
}
.foregroundStyle(.white)
.frame(width: 200, height: 200)
.animation(.easeInOut(duration: 1)) { content in
content
.background(isEnabled ? .green : .red)
}
.animation(.easeInOut(duration: 2)) { content in
content
.clipShape(.rect(cornerRadius: isEnabled ? 100 : 0))
}
}
}
.animation(Animation.linear(duration: 1).delay(1.0).repeatForever(autoreverses: false), value: isLoading)
// 像上面这个加了 delay，后面还加了无限循环。那每次循环之前它其实都要等待1秒。
// 如果不希望这样，可以把 delay 写到 repeat的后面去就可以了