Animation/动画, Timing/时长动画, Transition/过渡动画 的使用

1. Animation 动画的使用

  1.1 实现

// 动画
struct AnimationBootcamp: View {
    @State var isAnimated: Bool = false
    
    var body: some View {
        VStack{
            Button("Botton") {
                //.repeatCount(5, autoreverses: false) // 循环五次动画
                //.repeatForever(autoreverses: true) // 一直循环动画
                withAnimation(
                    Animation
                        .default
                    //.repeatForever(autoreverses: true)
                ) {
                    isAnimated.toggle()
                }
            }
            
            Spacer()
            RoundedRectangle(cornerRadius: isAnimated ? 50 : 25.0)
                .fill(isAnimated ? Color.red : Color.green)
                .frame(
                    width: isAnimated ? 100 : 300,
                    height:isAnimated ? 100 : 300)
                .rotationEffect(Angle(degrees: isAnimated ? 360 : 0))
                .offset(y: isAnimated ? 300 :0)// 偏移
            //.animation(
            //    Animation
            //        .default
            //        .repeatForever(autoreverses: true))
            Spacer()
        }
    }
}

  1.2 效果图:

2. Animation Timing 时长动画的使用

  2.1 实现

/// 动画时长
struct AnimationTimingBootcamp: View {
    @State var isAnimating: Bool  = false
    let timing: Double = 1.0
    
    var body: some View {
        //animatingView1
        animatingView2
    }
    
    // 动画二
    var animatingView2: some View{
        VStack {
            Button("Button") {
                isAnimating.toggle()
            }
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
            // spring: 弹性
            // response: 应答时间 (0.5 为合适值)
            // dampingFraction: 反弹值 0-1 (0.6-0.7)为最合适的值
            // blendDuration: 持续时长/期间
                .animation(.spring(
                    response: 0.5,
                    dampingFraction: 0.5,
                    blendDuration: 1.0))
        }
    }
    
    // 动画一
    var animatingView1: some View{
        VStack{
            Button("Button") {
                isAnimating.toggle()
            }
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.linear(duration: timing)) //linear 一样的速度进行动画
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeIn(duration: timing)) //easeIn 开始缓慢，逐渐加快
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeInOut(duration: timing)) //easeInOut 开始缓慢，然后稍微快一点，缓慢结束
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeOut(duration: timing)) //easeOut 最快的速度开始，然后减速
        }
    }
}

  2.2 效果图:

    1) 动画一

    2) 动画二

3. Transition 过渡动画的使用

  3.1 实现

/// 过渡动画
struct TransitionBootcamp: View {
    @State var showView: Bool = false
    
    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                Button("Button") {
                    showView.toggle()
                }
                Spacer()
            }
            if showView{
                RoundedRectangle(cornerRadius: 30)
                    .frame(height: UIScreen.main.bounds.height * 0.5)
                //.transition(.move(edge: .bottom)) // slide: 滑动  move: 移动
                //AnyTransition.opacity.animation(.easeInOut) // 可去掉 .animation(.easeInOut) 使用
                    .transition(.asymmetric(
                        insertion: .move(edge: .bottom), // 从底部移进
                        // .move(edge: .bottom) // 从底部退出
                        removal: AnyTransition.opacity.animation(.easeInOut) // 淡出
                    ))   // 从底部移除
                //.opacity(showView ? 1.0 : 0.0) // opacity : 透明度
                    .animation(.easeInOut) // 动画 .spring: 弹性
            }
        }
        .ignoresSafeArea(edges: .bottom)
    }
}

  3.2 效果图: