Aug 02, 2021, TIL (Today I Learned) - Basic Animation


学習内容


CAAnimation:Core Animationの抽象クラス.実際に使用するのではなく、毎年のクラスを継承して実際に使用します.
CaLayer:アニメーションとビューの画像ベースの内容を表す

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)
この二つの層は観念の表現である.PresentationLayeはfromValueとtoValueを設定することで設定できます.位置設定で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")
    }
fillModeisRemovedの方法を使用して、アニメーション後の物体が最後の点にとどまるように設定することもできます.最後の場所を決定するのとは異なり、プレゼンテーションは返されません.
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