[CoreAnimation] Ch15. Stroke and Path Animations (path로 애니메이션하기)

15장 Stroke and Path Animations 

Intro

Layer를 이용하여 리프레쉬뷰(Spinner)를 만들어보자. 

Creating interactive stroke animations 

CAShapeLayer의 프로퍼티들 (아래에서 lineDashPattern제외 모두 animatable) 

- strokeColor: path를 그리는 아웃라인의 컬러. default: nil 

- fillColor: path가 그린 영역의 내부 컬러. default: opaque black[‘ 

- lineWidth: stroking한 outline의 두께. default: 1 

- lineDashPattern: stroke할 때 점선의 간격, 점선의 길이를 나타냄 Array타입이고 default: nil 

- strokeStart: 현재 path의 첫 지점 default: 0. (0-1사이를 나타내야하고 0은 path의 첫지점, 1은 path의 끝지점) 

- strokeEnd: 현재 path의 마지막 지점 default: 1

Animating both stroke ends 

strokeStart에 음수를 주는 트릭을 사용. (0 이하의 값은 보이지 않는 상태를 의미한다.) 

start를 -0.5 -> 1, end를 0 -> 1로 주는 애니메이션 

start가 -0.5에서 0으로 갈때까지는 spinner가 길어지고, 0에서 1으로 갈 때까지는 spinner가 짧아지다가 1이 되는 순간 spinner가 사라진다. 

Creating path keyframe animations 

비행기를 path에 따라 움직이는 animation 

CAKeyframeAnimation에 calculationMode라는 프로퍼티가 있다. 

calculationMode을 사용하여 애니메이션의 타이밍을 조절할 수 있다. 

- Linear(default): Simple linear calculation between keyframe values. 

- Paced: Linear keyframe values are interpolated to produce an even pace throughout the animation. 

- Cubic: Smooth spline calculation between keyframe values.. 

- Discrete: Each keyframe value is used in turn, no interpolated values are calculated. 

rotationMode를 사용하면 애니메이션하는 레이어를 자동으로 회전시킬 수 있다. 

auto를 주면 항상 비행기가 원의 중심을 바라보면서 움직인다. 

autoReverse를 주면 비행기가 path를 따라 움직인다. 

rotationMode도 주고, transform.rotation을 애니메이션하면 rotationMode는 무시된다. 

아마 rotationMode셋팅이 알아서 해당 애니메이션을 만드나봄 

RotationMode (탄젠트 드립이 나옴)

 /* Defines whether or objects animating along paths rotate to match the * path tangent. Possible values are `auto' and `autoReverse'. Defaults * to nil. The effect of setting this property to a non-nil value when * no path object is supplied is undefined. `autoReverse' rotates to * match the tangent plus 180 degrees. */