[CoreAnimation] Ch14. Gradient Animation (그라데이션 애니메이션)

Intro 

예전 iOS의 락스크린에 있는 밀어서 잠금해제를 떠올려보자. 

텍스트 위로 그라데이션 컬러가 애니메이션 된다. 

Drawing your first gradient 

CAGradientLayer를 사용 

startPoint, endPoint: 그라데이션의 방향을 지정한다. 

colors: 그라데이션에 필요한 색상. 여러 색을 지정할 수 있다. 

locations: 그라데이션이 될 위치를 지정함 

Animating gradients 

CAGradientLayer는 CALayer의 서브클래스. 

애니메이션 가능한 프로퍼티는 아래와 같다. 

- colors 

- locations 

- startPoint, endPoint 

let gradientAnimation = CABasicAnimation(keyPath: "locations") 

gradientAnimation.fromValue = [0.0, 0.0, 0.25] 

gradientAnimation.toValue = [0.75, 1.0, 1.0]

이렇게만 하면 애니메이션이 좀 답답한 느낌이 든다. 

그래서 layer의 width를 3배로 늘려주면 좀 시원한 느낌이 남 

Creating a text mask 

mask레이어를 생성하는데, 텍스트로 만든 cgImage를 content로 갖는 레이어 

이 텍스트레이어를 mask로 생성하면 그라데이션 되는 영역이 텍스트부분에만 적용된다. 

Challenge1. Slide to reveal gesture recognizer 

텍스트뷰 영역에 Swipe Gesture 추가 

Challenge2. Psychedelic gradient animations 

다양한 컬러를 적용해보기