SwiftUI使用Paths和AnimatableData实现酷炫的颜色切换动画

老铁们，是时候燥起来了！本文中我们将学习如何使用 SwiftUI 中的 Paths 和 AnimatableData 来制作颜色切换动画。

这些快速切换的动画是怎么实现的呢？让我们来看下文吧！

基础

要实现动画的关键是在 SwiftUI 中创建一个实现 Shape 协议的结构体。我们把它命名为 SplashShape 。在 Shape 协议中，有一个方法叫做 path(in rect: CGRect) -> Path ，这个方法可以用来设置图形的外观。我们就用这个方法来实现本文中的各种动画。

创建 SplashShape 结构体

下面我们创建一个叫做 SplashStruct 的结构体，它继承于 Shape 协议。

import SwiftUI

struct SplashShape: Shape {
 
 func path(in rect: CGRect) -> Path {
 return Path()
 }
}

我们首先创建两种动画类型： leftToRight 和 rightToLeft ，效果如下所示：

Splash 动画

我们创建一个名为 SplashAnimation 的 枚举 来定义动画类型，便于以后更方便地扩展新动画（文章末尾可以验证！）。

import SwiftUI

struct SplashShape: Shape {
 
 public enum SplashAnimation {
 case leftToRight
 case rightToleft
 }
 
 func path(in rect: CGRect) -> Path {
 return Path()
 }
}

在 path() 方法中，我们可以选择需要使用的动画，并且返回动画的 Path 。但是首先，我们必须创建变量来存储动画类型，记录动画过程。

import SwiftUI

struct SplashShape: Shape {
 
 public enum SplashAnimation {
 case leftToRight
 case rightToleft
 }
 
 var progress: CGFloat
 var animationType: SplashAnimation
 
 func path(in rect: CGRect) -> Path {
 return Path()
 }
}

progress 的取值范围在 0 和 1 之间，它代表整个动画的完成进度。当我们编写 path() 方法时，它就会派上用场。

编写 path() 方法

跟之前说的一样，为了返回正确的 Path ，我们需要明确正在使用哪一种动画。在 path() 方法中编写 switch 语句，并且用上我们之前定义的 animationType 。

func path(in rect: CGRect) -> Path {
 switch animationType {
 case .leftToRight:
  return Path()
 case .rightToLeft:
  return Path()
 }
}

现在这个方法只会返回空 paths。我们需要创建产生真实动画的方法。

实现动画方法

在 path() 方法的下面，创建两个新的方法： leftToRight() 和 rightToLeft() ，每个方法表示一种动画类型。在每个方法体内，我们会创建一个矩形形状的 Path ，它会根据 progress 变量的值随时间发生变换。