[CoreAnimation] Ch16. Replicating Animations (CAReplicatorLayer를 복제하여 애니메이션하기)

16장 Replicating Animations 

Intro 

CAReplicatorLayer에 대해서 알아본다. (superclass: CALayer) 

레이어를 복제할 수 있다. 근데 왜 복제해야해? 라는 질문 단순히 보이는 것만 복제하는 것이 아니다. 

복제하는 과정에서 레이어간 약간의 차이점을 발생시켜, 엄청난 효과를 가져올 수 있다. 

그리고 무엇보다, 복제한 레이어의 애니메이션마다 차등 delay를 줄 수 있다. 

Ex) 0.2의 delay를 준다고 가정하면 layer1은 0.2초 뒤, layer2는 0.4초 뒤, layer3은 0.6초 뒤. 애니메이션 시작 

이번 챕터는 

1. Iris(Siri 짭퉁)가 말하는 음성 신호를 시각적 애니메이션으로 표현 

2. 사용자가 입력하는 음성의 크기에 따른 시각적 애니메이션 표현 을 구현한다. 

CAReplicatorLayer에서 제공하는 기능을 모두 파악하려면 책 한권으로도 모자란다! 

Replicating like rabbits 

CAReplicatorLayer의 3가지 주요 프로퍼티 

- instanceCount: 복제할 레이어 수 

- instanceTransform: 복제 레이어 간의 transform차이를 설정 

- instanceDelay: 복제 레이어 간의 애니메이션 delay차이를 설정 

CAReplicatorLayer를 생성하여 dot을 붙여넣는다. 

CAReplicatorLayer의 instanceCount만큼 dot이 복제된다. 이 때, dot의 위치를 설정해주지 않으면 dot이 한 곳에 쌓이게 된다. 

CATransform3DMakeTranslation(-dotOffset, 0.0, 0.0) 

이렇게 dx에 차이를 주어서 dot이 일렬로 놓이게 설정 

Your first replicated animation 

let move = CABasicAnimation(keyPath: "position.y") 

move.fromValue = dot.position.y 

move.toValue = dot.position.y - 50.0 

move.duration = 1.0 

move.repeatCount = 10 

dot.add(move, forKey: nil) 

이렇게 단순한 애니메이션 코드를 만들어 추가해주면 모든 dot이 동시에 애니메이션을 한다. 

하지만 아래 코드를 적용시키면 애니메이션이 차등적용된다. 

replicator.instanceDelay = 0.02 

Replicating multiple animations 

- Scale animation: dot의 transform 애니메이션을 통해서 Wave효과 구현 

- Opacity Animation: dot의 opacity 애니메이션을 통해 twist효과 구현 

- Tint Animation: dot의 backgroundColor 애니메이션을 통해 twist시 색이 변하는 효과 구현 

Animating CAReplicatorLayer properties 

CABasicAnimation으로 여러 효과를 구현해보았다. 

하지만 CAReplicatorLayer는 자체적으로 이런 효과를 위한 프로퍼티를 제공한다. 

- instanceDelay 

- instanceTransform 

- instanceColor 

- instanceRedOffset, instanceGreenOffset, instanceBlueOffset 

- instanceAlphaOffset 

instanceTransform을 사용하여 Wave를 좀 더 생동감있게 바꿔보자. 

CABasicAnimation(keyPath: "instanceTransform.rotation") // 사용법은 이렇게 동일함 

Interactive replication animations 

사용자가 입력한 데시벨을 시각적으로 표현하는 애니메이션을 구현해보자. 

트릭 

- 입력된 데시벨을 항상 모니터링한다. 

- 입력 직전 데시벨을 fromValue로 두고, 새로 들어온 데시벨을 toValue로 설정한 뒤 애니메이션

Challenge 

사용자의 목소리 입력 후 Iris가 말할 때의 애니메이션을 부드럽게 수정하기 

- 마지막 transform.scale.y를 마지막 데시벨에서 1로 애니메이션해주기 

- backgroundColor를 green에서 Iris의 첫 컬러인 magenta로 애니메이션 해주기