在使用SwiftUI的时候，无论效果在哪里，我们都可以单独的让视图的变化动起来，或者让视图的状态的变化动态化。SwiftUI会为我们处理那些组合的、层叠的以及可中断的动画的复杂性。
在这个教程中，我们会动画化用户在使用Landmarks App远足时的轨迹视图。通过使用animation(_:)修饰器，我们可以了解为视图添加动画是多么简单的事。
<下载>启动项目并跟随本教程，或打开完成的项目自己研究代码。
01 为单个视图添加动画
当在一个视图上使用animation(_:)修饰器的时候，SwiftUI会让视图中可以动画化的属性的任何变更动画化。视图的颜色、透明度、旋转、尺寸和其它属性都可以动画化。
第一步
在HikeView.swift文件中，打开实时预览并体验显示和隐藏图表。
确保在这个教程中打开实时预览这样可以试验每一步的结果。
第二步
通过添加animation(.easeInOut)打开按钮的动画。
.padding()
.animation(.easeInOut)
}
}第三步
当图表可见的时候让按钮变大一点添加另外一个动画。
animation(_:)修饰器会应用到这个视图包含的所有可动画化变更中。
.imageScale(.large)
.rotationEffect(.degrees(showDetail ? 90 : 0))
.scaleEffect(showDetail ? 1.5 : 1)
.padding()
.animation(.easeInOut)第四步
将动画类型从easeInOut改变为spring()。
SwiftUI包含预定义或自定义缓动效果的基本动画，也包含弹性和流体动画。我们可以调整动画的速度、设置动画开始的延时或指定动画重复的次数。
.scaleEffect(showDetail ? 1.5 : 1)
.padding()
.animation(.easeInOut)第五步
尝试通过在scaleEffect修饰器上方添加另外一个动画修饰器来关闭旋转动画。
我们可以多研究一下SwiftUI，尝试组合不同的动画效果来看看会发生什么。
.imageScale(.large)
.rotationEffect(.degrees(showDetail ? 90 : 0))
.animation(nil)
.scaleEffect(showDetail ? 1.5 : 1)
.padding()
.animation(.spring())第六步
在进入下一个部分的教程时移除刚刚添加的两个animation(_:)修饰器。
.imageScale(.large)
.rotationEffect(.degrees(showDetail ? 90 : 0))
.scaleEffect(showDetail ? 1.5 : 1)
.padding()
}02 让状态改变的效果动画化
现在我们已经学会如何对单个视图应用动画效果了，现在是时候在改变状态值的地方添加动画了。
在这里，我们会在用户点击按钮并触发showDetail状态切换的时候对所有发生的变化添加动画。
第一步
将showDetail.toggle()调用嵌套进withAnimation函数中。
现在受showDetail影响的视图-显示按钮和HikeDetail视图-现在都有动画过渡了。
Button(action: {
withAnimation {
self.showDetail.toggle()
}现在我们减慢动画的速度来看看SwiftUI动画是如何中断的。
第二步
在withAnimation函数中传入时长为4秒的基本动画效果。
可以像传入animation(_:)修饰器一样将相关的动画类型传入withAnimation中。
Button(action: {
withAnimation(.easeInOut(duration: 4)) {
self.showDetail.toggle()
}第三步
尝试在图表动画过程中打开和关闭视图。
第四步
在进入下一个教程前移除withAnimation函数中的慢速动画。
Button(action: {
withAnimation {
self.showDetail.toggle()
}03 自定义视图过渡
默认情况下，视图过渡进入和离开屏幕是通过淡入淡出效果。我们可以使用transition(_:)修饰器自定义过渡效果。
第一步
为HikeView中条件判断下可见HikeDetail视图添加transition(_:)修饰器。
现在图表出现和消失的时候是滑入滑出的。
if showDetail {
HikeDetail(hike: hike)
.transition(.slide)
}
}第二步
将过渡动画提出来变成AnyTransition类型中的一个静态属性。
这样会让我们在扩展自定义过渡的时候让代码更整洁。我们可以像使用SwiftUI中的过渡动画使用方式一样通过.符号来引用自定义的过渡动画。
import SwiftUI
extension AnyTransition {
static var moveAndFade: AnyTransition {
AnyTransition.slide
}
}
struct HikeView: View {
var hike: Hike
// 省略部分未变更的代码
if showDetail {
HikeDetail(hike: hike)
.transition(.moveAndFade)
}第三步
将过渡动画效果换成move(edge:)，这样图表会从同一侧滑入和滑出。
extension AnyTransition {
static var moveAndFade: AnyTransition {
AnyTransition.move(edge: .trailing)
}
}第四步
使用asymmetric(insertion:removal:)修饰器为视图出现和消失的时候提供不同的过渡效果。
extension AnyTransition {
static var moveAndFade: AnyTransition {
let insertion = AnyTransition.move(edge: .trailing)
.combined(with: .opacity)
let removal = AnyTransition.scale
.combined(with: .opacity)
return .asymmetric(insertion: insertion, removal: removal)
}
}04 组合动画形成复杂效果
当我们点击图表下方的三个按钮时，它会在三个数据集中切换。在这个版块中，我们会使用组合动画给图表中的胶囊一个动态的、波纹状的过渡效果。
第一步
将showDetail的默认值改为true，并将HikeView的预览固定在画布中。
这样我们在其它文件中修改动画代码的时候还能看到图表。
第二步
在HikeGraph.swift文件中，，定义一个新的波纹动画并添加到每个生成的胶囊形状中，并在它前面添加一个滑动过渡效果。
}
extension Animation {
static func ripple() -> Animation {
Animation.default
}
}
struct HikeGraph: View {
var hike: Hike
// 省略部分代码
GraphCapsule(
index: index,
height: proxy.size.height,
range: data[index][keyPath: self.path],
overallRange: overallRange)
.colorMultiply(self.color)
.transition(.slide)
.animation(.ripple())第三步
将动画换成弹性动画，并加上一个减弱的阻尼分数让胶囊条跳动并逐渐减弱。
extension Animation {
static func ripple() -> Animation {
Animation.spring(dampingFraction: 0.5)
}
}第四步
将动画速度加快一点，减少每个胶囊条移动到新位置的时间。
static func ripple() -> Animation {
Animation.spring(dampingFraction: 0.5)
.speed(2)
}
}第五步
基于每个胶囊条在图表中的位置为动画添加一个延时。
extension Animation {
static func ripple(index: Int) -> Animation {
Animation.spring(dampingFraction: 0.5)
.speed(2)
.delay(0.03 * Double(index))
}
}
struct HikeGraph: View {
// 省略部分代码
GraphCapsule(
index: index,
height: proxy.size.height,
range: data[index][keyPath: self.path],
overallRange: overallRange)
.colorMultiply(self.color)
.transition(.slide)
.animation(.ripple(index: index))第六步
观察自定义动画是如何在图表过渡的时候提供波纹效果的。