Swift Academy · 강의

암시적 및 명시적 애니메이션

CABasicAnimation으로 레이어 속성을 애니메이션화합니다.

암시적 및 명시적 애니메이션은(는) CoddyKit의 무료 Swift Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Swift Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

레이어를 애니메이션하는 두 가지 방법

코어 애니메이션은 암시적 애니메이션(속성이 변경될 때 자동으로 실행)과 명시적 애니메이션(애니메이션 객체를 직접 생성)을 제공합니다.

두 방식을 모두 알고 서로 어떻게 상호작용하는지 이해하는 것이 부드러운 움직임의 핵심입니다.

암시적 애니메이션

독립형 레이어의 animatable 속성을 변경하면 기본 0.25초 곡선을 사용하는 암시적 애니메이션이 실행됩니다. 애니메이션 객체는 필요하지 않습니다.

let layer = CALayer()
// Later, this animates automatically:
layer.opacity = 0.0

애니메이션 가능한 속성

많은 레이어 속성을 애니메이션할 수 있습니다. 예를 들어 opacity, position, bounds, backgroundColor, transform, cornerRadius 등이 있습니다.

layer.cornerRadius = 20 // animates implicitly
layer.backgroundColor = UIColor.systemGreen.cgColor

동작과 실행 방식

암시적 애니메이션은 동작에 의해 실행됩니다. 속성이 변경되면 레이어는 실행할 CAAction을 찾습니다. 이러한 동작을 사용자 정의하거나 비활성화할 수 있습니다.

뷰에 연결된 레이어에서는 암시적 애니메이션이 비활성화됩니다

UIView에 연결된 레이어에서는 암시적 애니메이션이 꺼져 있습니다. 대신 UIView.animate를 사용하거나 명시적 애니메이션으로 애니메이션을 실행하십시오.

UIView.animate(withDuration: 0.3) {
    view.alpha = 0
}

기본 속성 애니메이션

CABasicAnimation은 하나의 속성을 fromValue와 toValue 사이에서 애니메이션합니다. 속성과 일치하는 키 경로를 사용해 레이어에 추가하십시오.

let anim = CABasicAnimation(keyPath: "opacity")
anim.fromValue = 1.0
anim.toValue = 0.0
anim.duration = 0.5
layer.add(anim, forKey: "fade")

표시 값과 모델 값

명시적 애니메이션은 표시 값(화면에 보이는 값)만 변경합니다. 애니메이션이 끝나면 레이어의 모델 값은 원래 값으로 돌아갑니다.

변경 사항을 유지하려면 모델 값도 설정하십시오.

layer.opacity = 0.0 // set model value so it persists
layer.add(anim, forKey: "fade")

키프레임 애니메이션

CAKeyframeAnimation은 keyTimes에 따라 여러 values 사이를 애니메이션하거나 path를 따라 움직입니다. 튕기는 동작이나 곡선을 따라 움직이는 동작에 적합합니다.

let move = CAKeyframeAnimation(keyPath: "position")
move.values = [
    NSValue(cgPoint: CGPoint(x: 0, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 100))
]
move.duration = 1.0
layer.add(move, forKey: "path")

타이밍 함수

timingFunction으로 가속을 제어할 수 있습니다. 완화 시작, 완화 종료, 선형 또는 사용자 정의 3차 베지어를 사용할 수 있습니다.

anim.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

그룹화와 트랜잭션

여러 변경 사항을 CATransaction으로 감싸 지속 시간과 타이밍을 공유하거나 암시적 애니메이션을 완전히 비활성화할 수 있습니다.

CATransaction.begin()
CATransaction.setDisableActions(true)
layer.position = CGPoint(x: 200, y: 200)
CATransaction.commit()

애니메이션 위임 객체와 완료 처리

CATransaction.setCompletionBlock 또는 애니메이션 위임 객체를 설정하면 움직임이 끝났을 때 코드를 실행할 수 있습니다. 예를 들어 정리 작업, 애니메이션 연결, 상태 업데이트 등에 사용할 수 있습니다.

CATransaction.begin()
CATransaction.setCompletionBlock { print("done") }
layer.add(anim, forKey: "fade")
CATransaction.commit()

빠른 확인: 애니메이션

암시적 애니메이션과 명시적 애니메이션에 대한 이해도를 확인해 보십시오.

복습: 암시적 애니메이션과 명시적 애니메이션

독립형 레이어는 애니메이션 가능한 속성이 변경될 때 동작을 통해 암시적으로 애니메이션됩니다. 뷰에 연결된 레이어에서는 이 기능이 꺼져 있으므로 UIView.animate를 사용합니다. 명시적인 CABasicAnimation과 CAKeyframeAnimation은 표시 값을 애니메이션하므로 결과를 유지하려면 모델 값도 업데이트하십시오.

타이밍 함수로 움직임을 조정하고, 변경 사항을 CATransaction으로 묶으며, 후속 작업에는 완료 블록을 사용하십시오.

자주 묻는 질문

“암시적 및 명시적 애니메이션” 강의는 무료인가요?

네 — “암시적 및 명시적 애니메이션” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Swift Academy 강의 전체를 잠금 해제할 수 있습니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“암시적 및 명시적 애니메이션”에서 뭘 배우나요?

CABasicAnimation으로 레이어 속성을 애니메이션화합니다. 브라우저에서 직접 실행하는 실습 코드로 Swift Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Swift Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Swift Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“암시적 및 명시적 애니메이션” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Swift Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Swift Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Swift Academy(으)로 돌아가기