在之前的文章中，我们已经介绍了SwiftUI中关于动画的进阶用法，有兴趣的朋友可以把文章翻出来看一下，很多人可能不太清楚.transition()的作用，不用担心，阅读完本文后，你心中的疑惑都会揭开。
Transition是什么？
在SwiftUI中，transition决定了某个View如何插入到视图栈中，或者如何在视图栈中移除。transition自身并没有任何效果， 需要配合动画一起使用，举个例子：
struct Example1: View {
@State private var show = false
var 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 = false
var body: some View {
VStack {
Spacer()
if show {
LabelView()
.animation(.easeInOut)
.transition(.opacity)
}
...
}
}
要想让transition有动画，有两种方法：
第一种是给出一个显式动画，代码如下：
struct Example1: View {
@State private var show = false
var 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 = false
var 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: Double
func 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 = false
var 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: Double
var animatableData: Double {
get {
pct
}
set {
pct = newValue
}
}
func effectValue(size: CGSize) -> ProjectionTransform {
let a = CGFloat(Angle(degrees: 90 * (1 - pct)).radians)
var transform3d = CATransform3DIdentity
transform3d.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做判断，返回不同的形变值，就实现了上边的效果。
总结
当我们考虑为某个View使用过渡动画的时候，我们就可以考虑Transitions了，Transitions强大的自定义功能能够让我们实现很多复杂的UI效果。
注：上边的内容参考了网站https://swiftui-lab.com/advanced-transitions/，如有侵权，立即删除。
