Posted at

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

More than 3 years have passed since last update.


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

SizeAnimation.gif


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

勉強がてら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

RadiusChangeAnimation.gif


おまけ

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

HeartBound.gif