CASpringAnimationでバネのようなアニメーションをお手軽実装

CASpringAnimationというクラスを使ってバネのようなアニメーションを実装してみました。

まずは画面上にアニメーションさせたいViewをセットします。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let v = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        v.backgroundColor = UIColor.darkGray
        view.addSubview(v)
    }
}

起動すると灰色のビューが設置されていることが分かります。

続けてCASpringAnimationでアニメーションをさせます。
下のように、Layerに対してアニメーションを追加します。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let v = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        v.backgroundColor = UIColor.darkGray
        view.addSubview(v)
        
        let animation = CASpringAnimation(keyPath: "position.y")
        animation.toValue = 200
        animation.duration = animation.settlingDuration
        animation.isRemovedOnCompletion = false
        animation.fillMode = kCAFillModeForwards
        v.layer.add(animation, forKey: nil)
    }
}

起動すると下のようにposition.yが200に向かってアニメーションしていることが分かります。
isRemovedOnCompletionとfillModeは、アニメーション後に元の位置に戻らないための設定です。

永遠にアニメーションさせたい場合はdampingに0をセットします。

let animation = CASpringAnimation(keyPath: "position.y")
animation.damping = 0

拡大・縮小のアニメーションはkeyPathでtransform.scaleを指定することで実現できます。

let animation = CASpringAnimation(keyPath: "transform.scale")
animation.toValue = 2