24. [SwiftUI] Animation Curves and Timing

애니메이션 속도 조절에 대해 알아보자.

상황에 맞는 애니메이션을 적절히 사용하면 더욱 자연스러운 경험을 제공할 수 있을 것이다.

기본 애니메이션 타이밍 설정

//  Created by Toughie on 2023/04/23.
//

import SwiftUI

struct AnimationTiming: View {
    
    @State var isAnimating: Bool = false
    
    var body: some View {
        VStack {
            Button("Button") {
                isAnimating.toggle()
            }
            // * 모든 애니메이션은 같은 타이밍에 종료됨.
            //MARK: - .default
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.default, value: isAnimating)
            //MARK: - .linear(same speed from Start to End )
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.linear, value: isAnimating)
            //MARK: - .easeIn (slow -> fast)
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeIn, value: isAnimating)
            //MARK: - easeInOut (slow -> fast -> slow)
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeInOut, value: isAnimating)
            //MARK: - .easeOut (fast -> slow)
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeOut, value: isAnimating)
        }
    }
}

애니메이션 지속시간 조절

struct AnimationTiming: View {
    
    @State var isAnimating: Bool = false
    
    let timing: Double = 5.0
    
    var body: some View {
        VStack {
            Button("Button") {
                isAnimating.toggle()
            }
            // * 모든 애니메이션은 같은 타이밍에 종료됨.
            //MARK: - .default
//            RoundedRectangle(cornerRadius: 20)
//                .frame(width: isAnimating ? 350 : 50, height: 100)
//                .animation(Animation.default, value: isAnimating)
            //MARK: - .linear(same speed from Start to End )
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.linear(duration: timing), value: isAnimating)
            //MARK: - .easeIn (slow -> fast)
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeIn(duration: timing), value: isAnimating)
            //MARK: - easeInOut (slow -> fast -> slow)
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeInOut(duration: timing), value: isAnimating)
            //MARK: - .easeOut (fast -> slow)
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(Animation.easeOut(duration: timing), value: isAnimating)
        }
    }
}

Spring Animation (스프링_like 용수철)

            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(.spring(), value: isAnimating)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 100)
                .animation(.spring(
                    //duration
                    response: 0.5,
                    //boundBack(또잉)_작을수록 강하게
                    dampingFraction: 0.5,
                    blendDuration: 1.0),
                    value: isAnimating)