[iOS] CABasicAnimation란

요즘 Core Animation에 관심을 가지면서 Core Animation를 공부해보기위해 간단히 사용해보았어요...!!

 

기존에 UIKit의 요소를 애니메이션을 시키기위해선 간단하게 UIView.animate를 사용하였는데, CALayer를 애니메이션 시키기 위해선 CABasicAnimation 요소를 사용하여야 한다고해요.

 

그렇다면 CABasicAnimation이란 무엇이냐..⁉️

기본적인 애니메이션 동작가능한 기능들을 제공하는데 이 때, keyPath를 활용하여 특정 애니메이션을 지정하고 동작하게 할 수 있습니다.

 

이 CABasicAnimation을 이용하면 일단 보았을 때, KeyPath를 이용해 더욱 다양한 Animation을 지정할 수 있는 것 같아요!

 

리스트를 보면

• opacity : 투명도
• backgroundColor : 배경 색상
• position : 위치
• transform.scale.x : X축으로의 크기
• transform.scale.y : Y축으로의 크기
• transform.rotation : 회전
• shadowColor: 그림자 색상
• shadowOffset : 그림자 위치
• shadowOpacity : 그림자 투명도
• strokeEnd : Path의 끝 부분
• strokeStart : Path의 시작부분
• strokeColor : Path의 색상

이렇게 다양한 옵션들이 존재해요..!!

실제로는 이보다 더 많은데 우선은 자주 사용하는 것들만 나두었어요..!!

 

그렇다면 이러한 것들을 어떻게 활용할 수 있을까요..?

 

간단한 예제들로 따라해볼게요..!!

 

---

간단 예제

우선 선을 따라그리는 것부터 해볼게요.

override func draw(_ rect: CGRect) {
    let path = UIBezierPath()
    path.move(to: .zero)
    path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))

    let lineLayer = CAShapeLayer()
    lineLayer.frame = bounds
    lineLayer.path = path.cgPath
    lineLayer.strokeColor = UIColor.black.cgColor
    self.layer.addSublayer(lineLayer)

    // strokeEnd -> 끝 점 지정 0-1까지의 값을 가짐
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 3
    animation.repeatCount = 5

    lineLayer.add(animation, forKey: "lineAnimation")
}

이렇게 따라하게 되면, 어떻게 나타날까요..⁉️

 

한 줄씩 차근차근 볼게요.

우선, 원점으로부터 이 View의 모서리 끝까지 라인을 그어주었어요.

그리고 CAShapeLayer의 path로 활용을 하고 CABasicAnimation을 만들어주었죠..?!

 

strokeEnd라는 값은 path의 끝 점을 말해요 이 값은 0-1의 값을 가지는데 0이면 path의 시작 1이면 끝을 의미해요.

즉, from-to에 0~1이라는 값을 지정해줌으로서 처음부터 끝까지 라인을 그린다는 애니메이션이 지정되는 거에요!!

그리고 duration으로 3초간 애니메이션을 시키겠다~~

reapeatCount는 5번을 반복하겠다라고 선언한 것이죠.

 

이로서 다음과 같은 애니메이션이 완성되요.

 

 

다음으로는 로딩화면에 쓸 수도 있는 동그라미(?)를 그리는 것을 해볼게요.

override func draw(_ rect: CGRect) {
    let center = CGPoint(x: frame.width/2, y: frame.height/2)
    let path = UIBezierPath(arcCenter: center,
                            radius: frame.width/2,
                            startAngle: -CGFloat.pi/2,
                            endAngle: 2*CGFloat.pi-CGFloat.pi/2,
                            clockwise: true)
                        
    let circleLayer = CAShapeLayer()
    circleLayer.frame = bounds
    circleLayer.path = path.cgPath
    circleLayer.fillColor = UIColor.clear.cgColor
    circleLayer.lineCap = .round
    circleLayer.strokeColor = UIColor.blue.cgColor
    circleLayer.lineWidth = 3
    self.layer.addSublayer(circleLayer)

    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 5
    animation.repeatCount = 1
    circleLayer.add(animation, forKey: "circle")
}

이렇게 실행하면 위와 뭐가 달라졌을까요..⁉️

 

크게는 path의 부분만 보시면 될 것 같아요‼️

원래는 line을 그렸는데 지금은 원을 그리고있죠.

나머지는 전부 동일하답니다~

 

결과는 다음과 같은 애니메이션으로 로딩화면을 쓸 때 사용할수도 있겠죠.

 

 

지금까지 해본 것 외에도 다양한 애니메이션을 만들 수 있더라구요?

 

여러개의 애니메이션을 합쳐서 group으로 사용하는 방법도 있고 눈 내리는 애니메이션도 있고 다양한 것 같아요.

저도 따라해보는 중인데, 다음 포스팅부터는 조금 더 복잡한 애니메이션들을 만들어볼게요.

 

지금까지 잘못된 부분이나 더 보완해야하는 부분이 있으면 댓글로 남겨주세요 :)

 

---

참고 레퍼런스

• stack overflow - CABasicAnimation keyPath