Animation 2 - Core Animation

 

Core Animation ?

• Core Animation is a graphics rendering and animation infrastructure available on both iOS and OS X that you use to animate the views and other visual elements of your app
• infrastructure => 개발자는 시작 및 종료지점과 같은 몇가지 애니메이션 매개변수를 구성하고 Core Animation이 시작하도록 지시하면,  Core Animation은 직접 애니메이션을 조작하는게 아니라 실제 드로잉 작업을 온보드 그래픽 하드웨어로 전달함으로써 CPU에 부담을 주지않고 애니메이션을 만든다
• Core Animation 인프라의 핵심에는 Layer객체(CALayer)가 있다

 

CALayer ?

• An object that manages image-based content and allows you to perform animations on that content.
• Layer는 자체 모양(own appearance)을 정의하지 않고. 비트맵을 둘러싼 상태정보만 관리 => onscreen에 나타내기 위해 사용되는 visual conten와 content의 속성(such as a background color, border, and shadow), content의 geometry (such as its position, size, and transform)등을 관리 
• 대부분의 Layer객체는 앱에서 실제 drawing을 수행하지 않는다. 대신, Layer는 앱에서 제공하는 컨텐츠를 캡쳐하여 backing store 라고 불리는 비트맵으로 캐시해놓음으로써 그래픽 하드웨어로 쉽게 조작 할 수 있도록한다.
• 비트맵 자체는 view drawing 자체 또는 fixed image일 수 있기에 데이터를 관리하는 Layer는 모델 객체로 간주
• 이후에 Layer의 프로퍼티를 변경하면, Layer객체와 관련된 상태 정보(state information)가 변경되고, 변경사항이 애니메이션을 트리거하면 Core Animation은 Layer의 비트맵 및 상태정보를 그래픽 하드웨어로 전달하여 하드웨어가 애니메이션을 수행

 

CABasicAnimation

• An object that provides basic, single-keyframe animation capabilities for a layer property
• 즉 레이어 속성에 대해 애니메이션 기능을 제공하는 객체
• CABasicAnimation 인스턴스는 애니메이션 방식을 특정하는 key path를 설정하여 생성

예시 코드

import UIKit

class ViewController: UIViewController {
    private struct KeyPath {
        struct Position {
            static let ps = "position"
            static let x = "position.x"
        }
    }
    
    private var square: CALayer = CALayer()
    let image = UIImage(named: "green.jpg")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configureSquare()
        configureButton()
    }
    
    func configureSquare() {
        square.frame = CGRect(x: 50, y: 100, width: 50, height: 50)
        square.contents = image?.cgImage
        view.layer.addSublayer(square)
    }
    
    func configureButton() {
        let animationButton = UIButton(frame: CGRect(x: 300, y: 100, width: 50, height: 50))
        animationButton.addTarget(self, action: #selector(moveAction), for: .touchUpInside)
        
        animationButton.setTitle("Move", for: .normal)
        animationButton.setTitleColor(.green, for: .normal)
        view.addSubview(animationButton)
    }
    
    @objc func moveAction() {
        let animation = CABasicAnimation()
        animation.keyPath = KeyPath.Position.x
        animation.fromValue = 50
        animation.toValue = 150
        animation.duration = 3
        animation.fillMode = CAMediaTimingFillMode.forwards
        animation.isRemovedOnCompletion = false
        
        self.square.add(animation, forKey: "basic")
        self.square.position = CGPoint(x: 150, y: 100)
    }
}

출처 : https://green1229.tistory.com/76

 

 

 

 

참고자료

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/CoreAnimationBasics.html

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

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514

https://zeddios.tistory.com/747

https://sihyungyou.github.io/iOS-CoreAnimation/

https://woozzang.tistory.com/141?category=909641

https://green1229.tistory.com/76

https://jeonyeohun.tistory.com/363?category=881841

https://soooprmx.com/ios%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EA%B5%AC%ED%98%84-%EA%B8%B0%EB%B2%95%EB%93%A4%EC%97%90-%EB%8C%80%ED%95%9C/