변환과 3D 효과
아핀 변환과 3D 변환을 적용합니다.
변환과 3D 효과은(는) CoddyKit의 무료 Swift Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Swift Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
transform으로 이동하고 왜곡하기
transform은 레이어의 경계를 변경하지 않고 레이어를 이동하거나 크기를 조정하거나 회전하거나 기울입니다. 코어 애니메이션은 2D(CGAffineTransform)와 3D(CATransform3D)를 모두 지원합니다.
2D 아핀 변환
CGAffineTransform은 평면 변환을 처리합니다. 변환을 연결해 결합할 수 있으며 순서가 중요합니다.
import UIKit
var t = CGAffineTransform.identity
t = t.scaledBy(x: 1.5, y: 1.5)
t = t.rotated(by: .pi / 6)
layer.setAffineTransform(t)3D 변환 행렬
CATransform3D는 실제 3D를 가능하게 하는 4x4 행렬입니다. CATransform3DIdentity에서 시작해 공간에서 이동, 크기 조정, 회전을 적용하십시오.
var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = t3D 회전
CATransform3DRotate(t, angle, x, y, z)를 사용하면 어떤 축을 중심으로든 회전할 수 있습니다. y축을 중심으로 회전하면 카드가 뒤집히고, x축을 중심으로 회전하면 카드가 앞으로 기울어집니다.
let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
CATransform3DIdentity, angle, 0, 1, 0) // around y원근
perspective가 없으면 단순한 3D 회전이 평면적으로 보입니다. 깊이감을 더하려면 단위 행렬의 m34 요소를 작은 음수 값(약 -1/500)으로 설정하십시오.
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)m34가 깊이감을 만드는 이유
m34 항은 x와 y를 깊이로 나누므로 더 먼 점이 작아집니다. 절댓값이 작을수록(분모가 클수록) 원근감이 은은해지고, 클수록 과장됩니다.
// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0anchorPoint와 변환
변환은 anchorPoint를 중심으로 이루어집니다. 카드의 왼쪽 가장자리를 중심으로 회전하려면 먼저 anchorPoint를 (0, 0.5)로 설정하십시오.
layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
CATransform3DIdentity, .pi / 3, 0, 1, 0)변환 애니메이션하기
전체 변환을 애니메이션할 수 있습니다. transform 키 경로를 애니메이션하거나, 하나의 축만 다루도록 transform.rotation.y와 같은 하위 키를 사용할 수 있습니다.
let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")하위 레이어 변환
부모에 sublayerTransform을 설정하면 모든 하위 요소에 원근감을 한 번에 적용할 수 있어 3D 컨테이너와 캐러셀에 편리합니다.
var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = tzPosition과 깊이 정렬
zPosition은 3D 공간에서 그리기 순서를 제어합니다. 값이 높을수록 앞쪽에 렌더링됩니다. 회전과 함께 사용하면 여러 레이어가 겹치는 3D 장면을 만들 수 있습니다.
frontCard.zPosition = 10
backCard.zPosition = 0변환 결합
변환을 연결해 효과를 조합합니다. 행렬 곱셈은 교환법칙이 성립하지 않으므로 회전한 다음 크기를 조절하는 것과 크기를 조절한 다음 회전하는 것은 다릅니다.
var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)빠른 확인: 변환
3D 변환에 대한 이해도를 확인해 보세요.
복습: 변환과 3D 효과
변환은 경계를 변경하지 않고 레이어의 형태를 바꿉니다. 2D에는 CGAffineTransform을, 진정한 3D에는 CATransform3D를 사용합니다. m34를 약 -1/500으로 설정해 깊이감을 더하고, anchorPoint로 회전 기준점을 정하며, sublayerTransform으로 컨테이너에 원근감을 적용합니다.
변환 전체 또는 축별로 애니메이션을 적용하고, zPosition으로 깊이를 정렬하며, 변환을 조합하는 순서가 중요하다는 점을 기억하세요.
자주 묻는 질문
“변환과 3D 효과” 강의는 무료인가요?
네 — “변환과 3D 효과” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Swift Academy 강의 전체를 잠금 해제할 수 있습니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“변환과 3D 효과”에서 뭘 배우나요?
아핀 변환과 3D 변환을 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 Swift Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Swift Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Swift Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“변환과 3D 효과” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Swift Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Swift Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.