100 Days of SwiftUI - Day 32

Project 6, part 1에서는 애니메이션을 다루는 방법을 소개한다.

뷰의 크기 조정 - scaleEffect() 수정자

scaleEffect()의 매개변수로는 Double형 값을 입력할 수 있다. 1.0은 뷰의 100% 크기를 의미한다.

버튼의 크기를 늘리기 위해 scaleEffect의 값을 1씩 늘리는 코드를 작성한다.

@State private var animationAmount = 1.0


Button("Tap me") {
    animationAmount += 1
}
.padding(50)
.backgroundColor(.red)
.foregroundStyle(.white)
.clipShape(.circle)

애니메이션이 적용되어 있지 않기 때문에 버튼을 탭하면 크기가 바로 커진다.

암시적 애니메이션 - animation() 수정자

.animation() 수정자를 사용하여 뷰의 변화에 애니메이션을 지정할 수 있다.

첫번째 매개변수는 애니메이션의 타입이다. 어떤 종류의 애니메이션을 지정할 것인지를 설정한다.

• .default
• .linear : 애니메이션이 느려지거나 빨라짐 없이 일정 속도로 진행된다.
• .spring(duration, bounce) : duration에 설정된 시간만큼, bounce 값만큼 튕기는 애니메이션이다.
• .easeInOut(duration) : duration만큼 지속하는 애니메이션이다. 시작과 끝이 완만하다.

autoreverses 옵션을 true로 지정하면 애니메이션이 정방향으로 재생되었다가 멈춘 후 역방향으로 재생된다.

.delay() 수정자를 붙여 애니메이션이 시작되기 전 딜레이를 줄 수 있다.

.repeatCount() 수정자를 사용하여 애니메이션이 반복될 횟수를 지정할 수 있다. 뷰의 애니메이션을 계속 반복하고 싶은 경우 .repeatForever() 수정자를 사용한다.

애니메이션 바인딩

바인딩 데이터에 animation() 수정자를 직접 적용하는 것.
바인딩된 데이터의 값이 변경될 때마다 애니메이션이 적용된다.

수정자를 직접 적용할 수 있는 바인딩 데이터에는 수치 데이터 뿐만 아니라 true, false와 같은 불린 데이터에도 가능하다.

Stepper("Scale amount", value: $animationAmount.animation
    (
    .easeInOut(duration: 1)
        .repeatCount(3, autoreverses: true)
    ), in: 1...10
)

Stepper 뷰로 값을 변화시키면 animationAmount에 바인딩한 애니메이션이 실행된다.

명시적 애니메이션

withAnimation