CASpringAnimationを使ってバウンスするアニメーション

CASpringAnimation を使ったアニメーション

円をバウンスして表示させる方法がないかといろいろ考えてました。
Githubに上がっていたiOS-9-Samplerを眺めていたらCASpringAnimationというのが使えそうなので、これを使ってバウンスするアニメーションを作ってみました。

環境

Xcode 7.3.1
Swift 2.2
iOS 9

円がバウンスするアニメーション

CASpringAnimationのKeyPathをbounds.sizeに指定して、ImageViewの角を丸くして実行してみました。

SizeAnimation

    func startAnimation(){
        animation.mass = 1.0
        animation.damping = 12.0
        animation.stiffness = 240.0
        
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        animation.fromValue = NSValue(CGSize: CGSizeMake(0, 0))
        animation.toValue = NSValue(CGSize: CGSizeMake(240, 240))
        
        animation.removedOnCompletion = true
        animation.fillMode = kCAFillModeForwards
        animation.duration = 2.5
        
        animation.delegate = self
        
        animationView.layer.addAnimation(animation, forKey: "animation")
    }

結果

円が大きくなるというよりは角がバウンスする感じですね。画像で円をImageViewにセットした方がよいかも
github:SizeAnimation

四角の角をバウンスさせる

勉強がてらKeyPathをcornerRadiusにして四角の角をバウンスさせてみました。

RadiusChangeAnimation

    func startAnimation(){
        animation.mass = 1.0
        animation.damping = 10.0
        animation.stiffness = 240.0
        
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        animation.fromValue = 200
        animation.toValue = 90
        
        animation.removedOnCompletion = false
        animation.fillMode = kCAFillModeForwards
        animation.duration = 1.0
        
        animation.delegate = self
        
        animationView.layer.addAnimation(animation, forKey: "animation")
    }

結果

github:RadiusChangeAnimation

おまけ

ハートの画像でバウンスさせてみました。