Transition in SwiftUI

SwiftUI中的Transition可用于为视图的出现、消失等变化添加自定义的过渡动画效果。Transition是SwiftUI中非常重要的一部分,可以大大增强APP的动画和交互效果

struct TransitionSample: View {
    
    @State var showView: Bool = false
    
    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                Button("BUTTON") {
                    showView.toggle()
                }
                
                Spacer()
            }
            
            RoundedRectangle(cornerRadius: 25)
                .frame(height: UIScreen.main.bounds.height * 0.5)
                .opacity(showView ? 1.0 : 0.0)
                .animation(.easeIn, value: showView)
        }
        .ignoresSafeArea(edges: .bottom)
    }
}

上述示例为，点击button让圆角矩形有一个opacity的动画，这是使用属性和animation的共同结果。

内置参数效果

AnyTransition.opacity

透明度动画

struct TransitionSample: View {
    
    @State private var showMessage = false
    
    var body: some View {
        ZStack(alignment: .bottom) {
            
            VStack {
                Button(action: {
                    withAnimation(.spring()) {
                        self.showMessage.toggle()
                    }
                }) {
                    Text("SHOW MESSAGE")
                }
                
                Spacer()
            }
            
            if showMessage {
                RoundedRectangle(cornerRadius: 25)
                    .frame(height: UIScreen.main.bounds.height * 0.5)
                    .transition(AnyTransition.opacity)
            }
        }
        .ignoresSafeArea(edges: .bottom)
    }
}

AnyTransition.slide

效果非常像一个push动画一样，默认从右到左。

.transition(AnyTransition.slide)

AnyTransition.scale

缩放动画，以下是官方定义

extension AnyTransition {

    public static var scale: AnyTransition { get }

    public static func scale(scale: CGFloat, anchor: UnitPoint = .center) -> AnyTransition
}

它有两种使用方式。第一种为默认的AnyTransition.scale，效果如下

AnyTransition.scale

第二种为AnyTransition.scale(scale: CGFloat, anchor: UnitPoint = .center)

.transition(AnyTransition.scale(scale: 0.0, anchor: .bottomLeading))

scale 参数是最终缩放的大小，anchor来控制锚点的方向。默认是 .center

anchor的具体值有以下几种

1. zero
2. center
3. leading
4. trailing
5. top
6. bottom
7. topLeading
8. topTrailing
9. bottomLeading
10. bottomTrailing

AnyTransition.move()

移动动画，参数为Edge。

AnyTransition.move(edge: .bottom)

AnyTransition.asymmetric

使用非对称动画方法设置动画进入和消失动画

.transition(AnyTransition.asymmetric(
                        insertion: .move(edge: .bottom),
                        removal: AnyTransition.opacity.animation(.easeInOut)
                    ))

上述示例

进入动画：从底部弹出

消失动画：透明度渐变

动画可以组合很多种效果，以上只是基础使用。有兴趣可进一步加深动画的学习。

大家有什么看法呢？欢迎留言讨论。
公众号：RobotPBQ