학습내용

CAAnimation: Core Animation의 추상 클래스. 실제로 사용되지는 않고해당 클래스를 상속받아서 실제로 사용합니다.

CALayer: animation과 view에 있는 이미지 기반의 컨텐츠를 표현할 때 사용

A Basic Animation

class ViewController: UIViewController {
  private var pink: CALayer = CALayer()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    pink.frame = CGRect(x: 30, y: 50, width: 50, height: 50)
    pink.backgroundColor = UIColor.systemPink.cgColor
    view.layer.addSublayer(pink)
    
    let action = UIAction { (action) in
                           let animation = CABasicAnimation()
                           animation.keyPath = "position.x"
                           animation.fromValue = 30
                           animation.toValue = 150
                           animation.duration = 0.5
                           
                           self.pink.add(animation, forKey: "basic")
                           self.pink.position = CGPoint(x: 150, y: 50)
    }
    
    let button = UIButton(frame: CGRect(X: 300, y: 50, width: 80, height: 40), primaryAction: action)
    button.setTitle("애니메이션", for: .normal)
    button.setTitleColor(.black, for: .normal)
    view.addSubview(button)
  }
}

presentationLayer: 애니메이션이 동작할 때 모습을 뜻함

animation.fromValue = 30
animation.toValue = 150

modelLayer: 애니메이션이 동작한 후 실제로 위치할 곳을 나타냄

self.pink.position = CGPoint(x: 150, y: 50)

이 두 layer는 관념적인 표현입니다. fromValue와 toValue 설정을 통해서 presentationLaye를 설정할 수 있고. position 설정을 통해서 modelLayer설정을 할 수 있습니다.

let action = UIAction { (action) in
                       let animation = CABasicAnimation()
                       animation.keyPath = "position.x"
                       animation.fromValue = 30
                       animation.toValue = 150
                       animation.duration = 0.5
                       animation.fillMode = .forwards
                       animation.isRemovedOnCompletion = false
                       
                       self.pink.add(animation, forKey: "basic")
    }

fillMode와 isRemoved 메서드를 활용하여 애니메이션이 진행된 후 물체가 마지막 지점에 머무르게 설정할 수도 있습니다. presentation을 되돌리지않는 것이고 이는 마지막 position을 정하는 것과 다릅니다.

keyframeAnimation

let action = UIAction { (action) in
                       let animation = CABasicAnimation()
                       animation.keyPath = "position.x"
                       animation.values = [0, 10, -10, 10, 0]
                       animation.toValue = [NSNumber(value: 0),NSNumber(value: 0), NSNumber(value: 1/6.0),NSNumber(value: 3/6.0),NSNumber(value: 5/6.0),NSNumber(value: 1)]
                       animation.duration = 0.4
                       
                       self.pink.add(animation, forKey: "shake")
                       animation.additive = true
                       // 상대적 위치에서 shake!
    }

Orbit

let action = UIAction { (action) in
                       let boundingRect = CGRect(x: -150, y: 150, width: 300, height: 300)
                       let orbit = CAKeyframeAnimation()
                       orbit.keyPath = "position"
                       orbit.path = CGPath(ellipseIn: boundingRect, transform: nil)
                       orbit.duration = 4
                       orbit.isAdditive = true
                       orbit.repeatCount = 10000
                       orbit.calculationMode = .paced
                       orbit.rotationMode = .rotateAuto
                       
                       self.pink.add(orbit, forKey: "orbit")
    }

and more about Core Animation...

Core Animation is not a drawing system itself. It is an infrastructure for compositing and manipulating your app’s content in hardware. At the heart of this infrastructure are layer objects, which you use to manage and manipulate your content. A layer captures your content into a bitmap that can be manipulated easily by the graphics hardware. In most apps, layers are used as a way to manage the content of views but you can also create standalone layers depending on your needs.

Core Animation Programming Guide