SwiftUI之Transitions过渡动画

Transition是什么？

在SwiftUI中，transition决定了某个View如何插入到视图栈中，或者如何在视图栈中移除。transition自身并没有任何效果，需要配合动画一起使用，举个例子：

struct Example1: View {@State private var show = falsevar body: some View {VStack {Spacer()if show {LabelView().transition(.opacity)}Spacer()Button("点击") {self.show.toggle()}.padding(20)}}
}

可以看出，并没有什么动画效果，其实，这也很好理解，transition只是告诉系统试图如何过渡，系统并不知道过渡的动画函数是什么，也就无法做动画。

注意，即使使用隐式动画，也就是.animation()modifier也不起作用。代码如下：

struct Example1: View {@State private var show = falsevar body: some View {VStack {Spacer()if show {LabelView().animation(.easeInOut).transition(.opacity)}...}
}

要想让transition有动画，有两种方法：

第一种是给出一个显式动画，代码如下：

struct Example1: View {@State private var show = falsevar body: some View {VStack {...Button("点击") {withAnimation(.easeInOut(duration: 1.0)) {self.show.toggle()}}.padding(20)}}
}

另一种方法是为transition关联一个动画，这里值得注意的是，我们下边代码中与transition关联的动画作用于transition，并不是作用于view的。

struct Example2: View {@State private var show = falsevar body: some View {VStack {Spacer()if show {LabelView().transition(AnyTransition.opacity.animation(.easeInOut(duration: 1.0)))}Spacer()Button("点击") {self.show.toggle()}.padding(20)}}
}

添加了动画的效果如下图所示：

非对称的Transitions

在了解什么叫非对称之前，我们先了解一下对称，对于transition来说，当view出现的时候，会执行某个过渡效果，在默认情况下，当该view消失的时候，会执行与出现相反的过渡效果，这就是transiton的对称性。

可以看到，绿色文本从左边滑入，然后从右边滑出，是一个对称的过渡效果。

我们可以使用.asymmetric来实现非对称的过渡效果，代码如下:

.transition(.asymmetric(insertion: .opacity, removal: .scale))

可以看出，出现和消失使用了不同的过渡效果。

组合Transitions

我们还想更进一步，我们可以使用组合来为某个过渡效果实现多个动画过程，在SwiftUI中的实现代码也超级简单：

.transition(AnyTransition.opacity.combined(with: .slide))

可以看到，绿色文本的过渡动画，通知执行了opacity和slide两种效果，当然我们也可以在asymmetric中使用：

.transition(.asymmetric(insertion: AnyTransition.opacity.combined(with: .slide), removal: AnyTransition.scale.combined(with: .slide)))

效果如下：

带有参数的Transitions

我们在上边的代码中，只使用了类似.slide这样的参数，其实这些参数还可以接受一些额外的参数，例如下边这些：

.scale(scale: 0.0, anchor: UnitPoint(x: 1, y: 0))
.scale(scale: 2.0)
.move(edge: .leading)
.offset(x: 30)
.offset(y: 50)
.offset(x: 100, y: 10)

自定义Transitions

本篇文章的核心内容来了，上边介绍的各种效果基本上能够满足我们大部分的开发需求，但是，总有例外，当我们需要复杂的过渡效果的时候，这一小节的内容能够给你提供更多的思路

比如，在App中的各种样式的弹屏，翻页等等，你能想到的过渡都属于Transitions的范畴。当然我们这里只是演示了自定义这些过渡效果的核心思想。

我们先做一个简单的例子，我们自定义一个过渡效果，类似与上边用到的opacity效果。代码如下：

extension AnyTransition {static var myCustomOpacity: AnyTransition {AnyTransition.modifier(active: MyOpacityModifier(opacity: 0), identity: MyOpacityModifier(opacity: 1))}
}struct MyOpacityModifier: ViewModifier {let opacity: Doublefunc body(content: Content) -> some View {content.opacity(opacity)}
}

写一个AnyTransition的扩展
实现一个myCustomOpacity的静态类型
返回值为AnyTransition.modifier，它接受两个参数，active和identity，分别表示开始和结束
active和identity是个ViewModifier类型

基本上就这几步，然后我们这么使用：

.transition(.myCustomOpacity)

大家仔细看上边的代码，由于本质上是个ViewModifier，相当于修改了view的opacity，这也就是我们上边说过的，不加显式动画，不会产生过渡效果的原因。

有很多动画效果，比如.rotationEffect() 和.transformEffect()，用transition都可以实现，我们在最后，使用GeometryEffect来实现一个下边这样的效果：

我们先讲一下该动画的实现思路：

出现的时候，一边缩放，一边旋转
仔细观察，缩放动画在整个动画时间的一半的时候，就已经缩放完毕
旋转沿着x轴

有了上边的思路后，我们再看下边的代码：

struct GeometryEffectTransitionsDemo: View {@State private var show = falsevar body: some View {return ZStack {Button("Open Booking") {withAnimation(.easeInOut(duration: 0.8)) {self.show.toggle()}}.position(x: 100, y: 20)if show {RoundedRectangle(cornerRadius: 15).fill(Color.green).frame(width: 300, height: 400).shadow(color: .black, radius: 3).transition(.fly).zIndex(1)}}}
}extension AnyTransition {static var fly: AnyTransition {AnyTransition.modifier(active: FlyModifier(pct: 0), identity: FlyModifier(pct: 1))}
}struct FlyModifier: GeometryEffect {var pct: Doublevar animatableData: Double {get {pct}set {pct = newValue}}func effectValue(size: CGSize) -> ProjectionTransform {let a = CGFloat(Angle(degrees: 90 * (1 - pct)).radians)var transform3d = CATransform3DIdentitytransform3d.m34 = -1 / max(size.width, size.height)transform3d = CATransform3DRotate(transform3d, a, 1, 0, 0)transform3d = CATransform3DTranslate(transform3d, -size.width / 2.0, -size.width / 2.0, 0)let afffineTransform1 = ProjectionTransform(CGAffineTransform(translationX: size.width / 2.0, y: size.width / 2.0))let afffineTransform2 = ProjectionTransform(CGAffineTransform(scaleX: CGFloat(pct * 2), y: CGFloat(pct * 2)))if pct <= 0.5 {return ProjectionTransform(transform3d).concatenating(afffineTransform2).concatenating(afffineTransform1)} else {return ProjectionTransform(transform3d).concatenating(afffineTransform1)}}
}

GeometryEffect本身即实现了ViewModifier协议，又实现了Animatable协议，因此它可以作为active和identity的参数，也可以通过animatableData获取动画状态。

整个过渡效果的核心代码如下：

func effectValue(size: CGSize) -> ProjectionTransform {...if pct <= 0.5 {return ProjectionTransform(transform3d).concatenating(afffineTransform2).concatenating(afffineTransform1)} else {return ProjectionTransform(transform3d).concatenating(afffineTransform1)}}

我们用pct跟0.5做判断，返回不同的形变值，就实现了上边的效果。