Section 04 : Animations and States - 动画和状态（9’23"）
Create beautiful animations using states, transitions and actions.
使用状态、过渡和动作来制作精美的动画。
1. 使用状态（state）控制旋转角度
（1）在主视图的 body 前声明一个状态，用来控制动画的显示。
@读作commercial a
@State var show = false
（2）在 CardView 卡片上创建一个动作（action）
CardView()
.blendMode(.hardLight)
.onTapGesture {
self.show.toggle() //切换 show 的状态
}
（3）修改中间卡片 BackCardView 的旋转效果。使用三目运算符让卡片在 show 取不同值的时候旋转不同的角度（ true 不旋转，false 旋转 5°）。
BackCardView()
.rotationEffect(Angle.degress(show ? 0 : 5))
2. 测试修改效果
点击预览的 Resume 按钮回复预览，此时看不到任何变化，鼠标在卡片上的样子依旧是箭头，点击也没有效果。这时需要先点击预览中的 play 按钮，激活 live preview。激活后，鼠标移动到卡片上变成了手的形状，点击也可以看见动画效果了。
3. 控制偏移量（offset）
实际上，使用上面的方法几乎可以对所有修饰器进行控制，这次我们在偏移量上进行控制。
BackCardView()
.offset(x: 0, y: show ? -200 : -20) // 根据 show 的状态确定偏移量
.rotationEffect(Angle.degrees(show ? 0 : 5)) // 根据 show 的状态确定旋转角度
在预览中可以看见不仅旋转角度得到控制，同时在 show 的不同取值时，偏移量也发生的改变。但是这些变化只是单纯的切换，没有过渡过程，看起来不大像是动画，更像是幻灯片。
4. 加入动画修饰（animation）
想要看到整个过渡过程，需要加入动画修饰。在 BackCardView 卡片上加上animation修饰器，在参数中输入.号，自动完成提示中显示了各种动画效果供我们选择。
- linear ：线性。一般不选择这个，因为没变化，有些单调。
- easeIn ：开始会慢一些
- easeOut ：结束会慢一些
- easeInOut ：开始和结束都会慢一些。多数情况可以选择这个
- spring() ：带动量效果
- 上述各个效果基本上都可以带参数
duration: 秒数，表示动画持续的时间。一般选择一秒以内，以免影响交互效果- 视频上说，选择 default，大概就是 0.3-0.5 秒的 easeInOut
（1）给中间的卡片加上动画修饰
BackCardView()
.animation(easeInOut(duration: 0.3))
现在在live preview中点击最上面的卡片，可以看见中间的卡片向上移出的动画了。
（2）给底层的卡片加上控制和动画
参照刚才的做法，给底层的卡片加上控制和动画。其中，偏移量为 -400 到 -40，动画的持续时间为 0.5，这样与中间的卡片会有个时间差，产生错落的效果。
5. 控制背景色
还不错吧？前面说过，show 状态可以控制很多种修饰器，这次让我们试试背景色。
中间卡：
BackCardView()
.background(show ? Color("card4") : Color("card3"))
底层卡：
BackCardView()
.background(show ? Color("card3") : Color("card4"))
到 live preview 看看效果吧。还不错，就是这颜色过渡还是有些生硬。
6. 控制模糊效果
现在我们给带模糊效果的两个组件加上控制和动画。
TitleView 组件
TitleView()
.blur(radius: show ? 20 : 0)
.animation(.default)
BottomCardView 组件
BottomCardView()
.blur(radius: show ? 20 : 0)
.animation(.default)
现在可以在 live preview 中看到，当点击最上面的卡片时，下面的两张卡片会自动展开，同时标题和底部的卡片都会变得模糊了。
本节小结
- 在body 前声明状态
- 在修饰器的参数中使用三目运算符来进行控制
- 动画修饰器（animation）负责完成两个状态之间的动画过渡，一般选择 default 或者 easeInOut，时间不超过 1 秒。
接下来
今后还会深入探讨动画部分，下节课应该是手势和动作的应用了。
