苹果的动画作用能够说是职业标杆了，作为苹果平台的开发者自然也不能拉下。所以会用几篇文章来教各位如何在SwiftUI中做出常见的简略动画。
本篇文章是SwiftUI中关于动画的基础知识。
可是在讲详细之前，咱们需要了解一下动画的概念，这样协助你更好的了解和吸收。假如你了解这部分能够越过。
何为动画
动画是一系列图像（也被称为帧）快速播映，再通过视觉暂留现象在人眼中形成的流通运动。早期的动画、电影特效都是需要一帧一帧去做的。
可是在SwiftUI中，动画的实质是一个View的位移、色彩、大小、形状等特点产生改变的进程。再详细点，便是.offset、.foregroundColor、.frame等特点逐步改变的进程。咱们只需要设定开端的款式和结束时的款式，还有中心过渡的款式就能够了（这便是本篇要害点.animation，它会自动生成中心的过渡帧）。
假如你有动画或许视频经历，那么能够了解成咱们设定好要害帧，然后设置中心帧的款式就能够做出动画啦！
不同款式的过渡动画（中心帧）
这儿罗列一下过渡动画的款式，例如缓进缓出、匀速运动等：
假如是nil便是无动画（这个也能够做出来一些作用），如下：
详细的代码后面会列出来，因为有一个需要留意的点，所以这儿先不列出代码。
新旧版别不同之处
假如你在网上搜如何做动画，得到的实现办法或许和我这儿写的不太相同。这是因为从iOS 15.0开端，苹果废弃了之前的.animation(Animation?)，建议开发者运用新的.animation(Animation?, value: Equatable)或许withAnimation办法。
现在咱们详细阐明一下.animation(Animation?，)和.animation(Animation?, value: Equatable)二者之间的不同之处。
老版的.animation(Animation?)是放在需要运动或许改变的View下面，当View改变的时分，呈现过渡动画，过渡动画包含运动、款式、色彩等特点。
新版.animation(Animation?, value: Equatable)比老版多了一个参数，那便是value。
这个参数value的作用是当这个值产生改变的时分，才会呈现应用咱们指定的过度动画，过渡动画也包含运动、款式、色彩等特点。假如View的其他特点产生改变，则不会呈现动画。
所以上面那个动画的代码如下：
struct AnimationView: View {
@State private var offsetX: CGFloat = 150
var body: some View {
VStack {
VStack {
Text(".default（默许）")
Rectangle()
.frame(width: 30, height: 30)
.offset(x: offsetX)
.foregroundColor(Color.pink)
/* 假如是`nil`便是无动画 */
.animation(.default, value: offsetX)
Text(".linear（匀速）")
Rectangle()
.frame(width: 30, height: 30)
.offset(x: offsetX)
.foregroundColor(Color.pink)
.animation(.linear, value: offsetX)
Text(".easeIn（开头缓慢，逐步加速）")
Rectangle()
.frame(width: 30, height: 30)
.offset(x: offsetX)
.foregroundColor(Color.pink)
.animation(.easeIn, value: offsetX)
Text(".easeOut（结尾逐步减速，缓慢结束）")
Rectangle()
.frame(width: 30, height: 30)
.offset(x: offsetX)
.foregroundColor(Color.pink)
.animation(.easeOut, value: offsetX)
Text(".easeInOut（缓出缓进，上面的融合体）")
Rectangle()
.frame(width: 30, height: 30)
.offset(x: offsetX)
.foregroundColor(Color.pink)
.animation(.easeInOut, value: offsetX)
}
Button(action: {
offsetX = -150
}, label: {
Text("开端运动")
.padding()
.overlay(
RoundedRectangle(cornerRadius: 15)
.stroke(lineWidth: 3)
)
})
}
}
}
可是因为这个value，咱们只能当这个值产生改变的时分才能有动画，那么假如咱们需要在调查到几个值当中的某一个产生改变就有动画的话，那该怎么办呢？
假如你要调查的值是同一个类型的话，那么能够运用数组，例如[offsetX, offsetY]，这样的话就相当于调查这个数组有没有改变了，只需有一个值产生改变，那么数组就会改变。这样能够到达咱们需要的作用。
个人感觉改版之后尽管或许有些不习惯，可是开发的或许性和自由度更大了，所以这个学习成本是值得的。
需要调查多个值该怎么办
假如需要调查的值不是同一个类型的，例如咱们要调查位移和色彩，一个是CGFloat类型，一个是Color类型。这样就很麻烦了。所以这儿罗列有几个解决方案，以防在某种状况下，某种办法会愈加麻烦：
第一种：
能够搞个数据结构，然后调查数据。或许某种状况你用这种办法很便利，
首先新建一个结构体，协议是Equatable，如下：
struct Test: Equatable {
var offsetX: CGFloat
var color: Color
}
然后是View部分：
.animation(.default, value: Test(offsetX: offsetX, color: color))
这种办法相对来说通用一些，并且能够调查屡次改变，便是有点麻烦。
第二种：
因为value是契合Equatable协议的，也便是说这儿的value其实是个Bool值，咱们尽管写作value: color这种，可是实际上它是在判别这个值有没有产生改变，相当于color == 之前的color，通过这个来返回一个Bool值（很经典的C言语编程技巧，假如你熟悉C言语应该很容易就理解了）。
可是咱们不能直接放个Bool值在这，就想它有必要出动画或许不出动画，那是不会的。它是有必要要判别这个值有没有产生改变的。
所以咱们能够写成这样：
.animation(.default, value: offsetX == 150 && color == Color.pink)
这种办法的写法相对简略，可是因为只比照一个值，所以某些状况下或许不好用。
动画时刻长度
咱们能够设置过渡动画的时长，来操控动画的快慢和节奏，这个很简略。老版别的或许很多人都会用，可是新版别因为官方没提，网上也没人说，所以这儿讲一下。
在动画款式的后面加个(duration: 时长)即可，时长的单位是秒。
//这儿表示动画时长为3秒
.animation(.linear(duration: 3), value: offsetX)
总结
看到这儿你应该就能够做出简略的位移、突变动画啦，能够自己着手试试看。
