[CAShapeLayer] CAShapeLayer에 CAAnimation 추가하기

CAShapeLayer클래스는 Bezier곡선을 그리기 위한 CALayer의 서브클래스다. 

Bezier는 곡선을 그리는 알고리즘이다. 그게 끝이다. ㄷㅓ 몰라도 된다.

베지어 곡선: 정말 말 그대로 곡선을 그리는 알고리즘

 

이 베지어 곡선을 CAShapeLayer로 생성할 때, Animation을 추가하지 않으면 다 그려진 모습으로 화면에 뿌려지겠지만, CAAnimation을 추가하면 화면에 그려지는 효과를 나타내어 애니메이션을 제공할 수 있다.

CAAnimation을 추가하지 않은 CAShapeLayer

CAAnimation을 추가한 CAShapeLayer

그럼 위 예제를 구현하기 위해 CAAnimation을 추가하는 과정을 코드로 살펴보자.

	func animateCircleLayer() {
	// strokeEnd
	let strokeEndAnimation = CAKeyframeAnimation(keyPath: "strokeEnd")
	strokeEndAnimation.timingFunction = strokeEndTimingFunction
	strokeEndAnimation.duration = kAnimationDuration - kAnimationDurationDelay
	strokeEndAnimation.values = [0.0, 1.0]
	strokeEndAnimation.keyTimes = [0.0, 1.0]
	// transform
	let transformAnimation = CABasicAnimation(keyPath: "transform")
	transformAnimation.timingFunction = strokeEndTimingFunction
	transformAnimation.duration = kAnimationDuration - kAnimationDurationDelay
	var startingTransform = CATransform3DMakeRotation(-CGFloat(M_PI_4), 0, 0, 1)
	startingTransform = CATransform3DScale(startingTransform, 0.25, 0.25, 1)
	transformAnimation.fromValue = NSValue(caTransform3D: startingTransform)
	transformAnimation.toValue = NSValue(caTransform3D: CATransform3DIdentity)
	// Group
	let groupAnimation = CAAnimationGroup()
	groupAnimation.animations = [strokeEndAnimation, transformAnimation]
	groupAnimation.repeatCount = Float.infinity
	groupAnimation.duration = kAnimationDuration
	groupAnimation.beginTime = beginTime
	groupAnimation.timeOffset = startTimeOffset
	circleLayer.add(groupAnimation, forKey: "looping")
	}

view raw animation.swift hosted with ❤ by GitHub

CALayer의 transform에서는 UIView와 달리 3D Transform을 제공한다. CALayer의 transform 프로퍼티는 CATransform3D타입으로 이는 4x4행렬 값이다.

행렬을 이용하여 제공할 수 있는 애니메이션은 회전(rotate), 이동(translate), 크기조정(scale) 이렇게 세 종류가 있다. 

두 개 이상의 애니메이션을 그룹으로 묶을 수도 있다.

하나의 3D애니메이션 행렬을 만들기 위해서는 CATransform3DMakeXXX 함수를 사용하면 된다.

두 개의 애니메이션을 제공하는 행렬을 만들기 위해서는 이미 생성한 하나의 애니메이션 행렬을 파라미터로 받는 CATransform3DXXX 함수를 사용하면 된다.

위 코드에 나오는 CATransform3DIdentity는 단위행렬이다. 

참조

http://nevard.tistory.com/entry/iOS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-1

https://www.raywenderlich.com/133224/how-to-create-an-uber-splash-screen

<그럼 수고했으니 정연이로 스트레스를 해소하고 나가기>