[swift] CAShapeLayer / CABasicAnimation / CAKeyframeAnimation

https://blog.naver.com/p41155a/222066801303

[swift] UIBezierPath로 직선 및 도형 그리기

 

저번에 UIBezierPath 를 통해 직선 및 곡선을 그려 보았습니다.

​

단순히 선만 긋는 것이라면 path.stroke()이거나 path.fill()를 통해 그리기가 가능하지만

애니메이션을 넣을 것이라면

CALayer이라는 것을 활용해야합니다.

​

 

CALayer (CA = Core Animation)

- UIView 는 CALayer 형태의 Layer 를 하나 가지고 있다.

- CALayer 는 뷰의 구성 요소로 UI 기능을 담당한다.

- SubView 들은 layer 위에 얹혀진다.

- layer 는 여러 sublayer 를 가질 수 있다.

​

​

▶CALayer 를 상속받는 클래스

1. CATextLayer: 텍스트를 그리기 위한 레이어

2. CAGradientLayer: Gradient 를 주기위한 레이어

3. CAShapeLayer: Shape 를 그리기위한 레이어

이러한 직선을 여태까지는

class View3: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
        path.stroke() // 이 소스를 통해 그림
    }
}

이렇게 그렸다면

​

class View3: UIView {
    override func draw(_ rect: CGRect) {
        let layer = CAShapeLayer()
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
        // path.stroke()가 없어지고 아래 소스가 생김
        layer.path = path.cgPath
        layer.strokeColor = UIColor.black.cgColor
        self.layer.addSublayer(layer)
    }
}

이렇게 그리게 되는 것입니다.

​

대부분 왜 더 길게 소스를 치면서 레이어 하나를 더 올려야 할까 라고 의문을 가지실것 같습니다.

아까 말한것 처럼 애니메이션을 적용하기 위해서 입니다. 그럼 이제 애니메이션을 배워 볼까요??

​

 

 

 

Core Animation

https://developer.apple.com/documentation/quartzcore

​

CABasicAnimation: layer의 기본적인 애니메이션을 처리 할때 사용

CATransition: layer의 전환 즉, 화면이 이동이 되어 없어지거나 새로이 나타날때 사용

CAKeyframeAnimation: 애니메이션을 keyFrame단위로 쪼개어 각각의 keyFrame마다 효과를 주거나 다른 애니메이션을 하도록 설정할수 있음

그냥 조금더 복잡한 애니메이션처리를 하는 클래스 라고 생각 하면 된다

​

​

이제 아까 그린 직선에 애니메이션을 주어 보자

class View3: UIView {
    override func draw(_ rect: CGRect) {
        let layer = CAShapeLayer()
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
        layer.path = path.cgPath
        layer.strokeColor = UIColor.black.cgColor
        self.layer.addSublayer(layer)
        
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 3
        animation.repeatCount = HUGE
        layer.add(animation, forKey: "scoreAnimation")
    }
}

strokeEnd라는 지정되어 있는 애니메이션으로 만든 것이다

​

이외에도 많은

애니메이션을 만들 수 있는데 더 소스를 넣었다가는

이해하러 들어온 사람들이 질려서 나갈 수도 있을것 같기 때문에

​

https://github.com/p41155a/PathProject

 

p41155a/PathProject

Contribute to p41155a/PathProject development by creating an account on GitHub.

github.com

이 주소를 통해 실행해보기도 모르는 부분은 주석을 풀거나 주석을 하며 알아보는 것을 추천하겠습니다.

 

또한 더 많은 기능은 아래 사이트를 통해 이해 가능합니다.​

​

​

- 도움이 되었던 사이트

​

핵심 애니메이션 리스트

https://stackoverflow.com/questions/44230796/what-is-the-full-keypath-list-for-cabasicanimation

 

What is the full Keypath list for CABasicAnimation?

I've looked in the documentation but I noticed it's missing some like "transform.scale.xy": [CoreAnimation Guide][1] is there a more complete list?

stackoverflow.com

​

참고하기 좋은 github

https://github.com/ninjaprox/NVActivityIndicatorView

 

ninjaprox/NVActivityIndicatorView

A collection of awesome loading animations. Contribute to ninjaprox/NVActivityIndicatorView development by creating an account on GitHub.

github.com

​