SwiftUI Transitions

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/

92IT

Just love IT.