在使用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))

第六步

观察自定义动画是如何在图表过渡的时候提供波纹效果的。