Section 06 : Timing Curve and Delay Animation

Section 06 : Timing Curve and Delay Animation - 时序曲线和延时动画 （14’16"）

Use bezier curve animation with delay and repeat values.

使用延时和重复值绘制贝塞尔曲线。

1. 使用新的状态 showCard 控制视图显示

（1）在 ContentView 结构体中，创建一个新的状态，用来控制视图显示。

@State private var showCard = false     // 显示整个UI视图的状态

（2）修改 CardView 的 onTapGesture，将状态控制从show 改为 showCard。

CardView()              // 最上面一层
	.blendMode(.hardLight)
	.onTapGesture {                         // 定义响应的动作
        self.showCard.toggle()              // 从 show 修改为 showCard
    }

（3）剪切 BottomCardView 定义中的 offset 修饰，粘贴到 ContentView 中，修改偏移量并增加状态控制。

BottomCardView()
    .offset(x: 0, y: showCard ? 400 : 1000) // 默认不显示，单击切换 showCard 为 true 时显示
    .blur(radius: show ? 20 : 0)
    .animation(.default)

2. 使用时序曲线制作动画

先科普一下贝塞尔曲线（内容来自百度百科）

贝塞尔曲线是依据四个位置任意的点坐标绘制出的一条光滑曲线。在历史上，研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”，也就是说，随着点有规律地移动，曲线将产生皮筋伸引一样的变换，带来视觉上的冲击。1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名是为贝塞尔曲线。

贝塞尔曲线的主要意义在于无论是直线或曲线都能在数学上予以描述，并为计算机矢量图形学奠定了基础。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

时序曲线的一个参考网站

将 ContentView 中的 BottomCardView 的动画改成时序曲线动画方式。

BottomCardView()
	.offset(x: 0, y: showCard ? 400 : 1000)    // 默认不显示，单击切换 showCard 为 true 时显示
    .blur(radius: show ? 20 : 0)
    .animation(.timingCurve(0.2, 0.8, 0.2, 1, duration: 0.8))   // 时序曲线动画

3. 调整 标题视图 TitleView

（1）使用 showCard 状态控制透明度。

（2）使用 showCard 状态控制偏移量。

（3）修改动画方式

.animation()的参数类型为 Animation。默认类型无须写 Animation，类似 Color 的使用。

// 下面两种写法是等价的
Text("你好").animation(.easeInOut)
Text("你好").animation(Animation.default.easeInOut)

如果要使用延迟、速度、重复等，就必须以 Animation 开头，以确保返回值类型为 Animation。如下面的代码：

TitleView()                             // 标题视图
.blur(radius: show ? 10 : 0)            // 根据 show 的值确定模糊度
.opacity(showCard ? 0.4 : 1)            // 根据 showCard 的值确定透明度
.offset(y: showCard ? -200 : 0)         // 根据 showCard 的值确定偏移量
.animation(
    Animation
    .default                                   // 动画形式
    .delay(0.1)                                // 动画延迟
    .speed(2)                                  // 动画速度
    // 下面的修饰并非项目所需，可以自行打开注释看效果
    // .repeatCount(3)                         // 动画重复次数 为 3，往返共 3 次
    // .repeatCount(3, autoreverses: false)    // 动画重复次数 为 3，往返 3 次
    // .repeatForever(autoreverses: true)      // 呃~~根本停不下来？
)

4. 调整 CardView 动画

（1）剪切 CardView 定义中的修饰，粘贴到 ContentView 中 CardView 后所有修饰的前面。这里逐渐让我们明白，定义中更多的要关注视图展现的核心内容，而不是修饰器。

（2）使用 showCard 状态控制 CardView 的框体大小。

.frame(width: showCard ? 375 : 340.0, height: 220.0)

（3）使用 clipShape 替代 CornerRadius，使用 showCard 状态控制圆角半径。（实验心得：尝试依旧采用 CornerRadius，发现圆角的弧度相对小一些）

// .cornerRadius(20)
.clipShape(RoundedRectangle(cornerRadius: showCard ? 30 : 20, style: .continuous))

ClipShape 修饰

View 的方法，为视图设定裁剪形状。

参数：shape - 指明形状，主要有：Rectangle，Edge，Circle，RoundedRectangle，Ellipse（椭圆），Capsule（胶囊）等

参数：style - 指明填充方式， fill， fit 什么的

（3）增加纵向偏移

.offset(y: showCard ? -100 : 0)         // 使用 showCard 控制偏移

5. 调整 BottomCardView 动画

（1）剪切 BottomCardView 定义中的修饰，粘贴到 ContentView 中两个 BottomCardView 后所有修饰的前面。

（2）在 offset 修饰后面，使用 showCard 状态控制 BottomCardView 的纵向偏移。

.offset(y: showCard ? -180 : 0)		// 第三张
.offset(y: showCard ? -140 : 0)		// 第二张

（3）在 rotationEffect 修饰后面，使用 showCard 状态修正旋转。

.rotationEffect(.degrees(showCard ? -10 : 0))		// 第三张
.rotationEffect(.degrees(showCard ? -5 : 0))		// 第二张

（4）修改缩放修饰，使用 showCard 状态控制缩放

.scaleEffect(showCard ? 1 : 0.9) 		// 第三张
.scaleEffect(showCard ? 1 : 0.95) 		// 第二张

（5）修改3D旋转修饰，使用 showCard 状态控制，两张都改

.rotation3DEffect(.degrees(10), axis: (x: showCard ? 0 : 10, y: 0, z: 0)) 	

（6）使用 showCard 状态微调第三张卡的框体大小

.frame(width: showCard ? 300 : 340, height: 220.0)

本节小结

本节代码请参见 GitHub 和 码云

• 抽取的子视图应侧重在核心内容，修饰部分应该在调用的时候根据需要增加。
• 使用不同的状态控制不同的展示形式，从而使整个视图丰富多彩。
• 动画修饰 .animation 的参数必须是 Animation。
• 设定动画延迟、速度和重复时，需要使用 Animation 调用相应的方法实现。而动画形式则不需要，可以直接点出来。
• 时序曲线动画 TimeCurve 可以使动画更加平滑和多样化。
• 修饰器：透明度 opacity，clipShape

接下来

修改 BottomViewCard 的行为，包括锚点的设定等。