CAKeyframeAnimationのvaluesを三角関数を使ってBounceさせたが、そんなのしなくても別に良かったw

1. ボタンアニメーションに
三角関数を導入して
徒労に終わった話
もくもく会
2015.08.19 Tokyo
@naoyashiga

2. 自己紹介
• @naoyashiga
• iOS Dev, Web Markup
• https://github.com/naoyashiga
• 趣味でiOSアプリ個人開発

3. 今日のLTは

4. Button
Animation

5. demo

7. CAKeyframeAnimation
• CAKeyframeAnimation
• 3つ以上の値を補完するアニメーション
• CABasicAnimation
• 2つの値を補完するアニメーション

8. Code
extension UIButton {
func playBounceAnimation() {
let bounceAnimation =
CAKeyframeAnimation(keyPath: "transform.scale")
bounceAnimation.values = [1.0 ,1.4, 0.9, 1.15,
0.95, 1.02, 1.0]
bounceAnimation.duration = NSTimeInterval(0.5)
bounceAnimation.calculationMode =
kCAAnimationCubic
layer.addAnimation(bounceAnimation, forKey:
"bounceAnimation")
}
}

9. やったぜ

10. 疑問が。。。

11. valuesを増やしたら
滑らかになるのでは?

12. calculationMode
• valueの間を補完してくれる
• kCAAnimationCubicなど
• timingFunctionによって補完
• valuesはたくさんあったほうが滑らか?

13. Emplicit Animation
(三角関数でがんばる)

14. 三角関数のやり方を
調べてみた

15. 難しいので割愛

16. コピペだ!!
• http://khanlou.com/2012/01/
cakeyframeanimation-make-it-bounce/

17. 三角関数でがんばる
for t in 1..<100 {
let value = 0.6 *
pow(e, -0.045 *
Double(t)) * cos(0.1 *
Double(t)) + 1.0
values.append(value)
}

18. 細か!!!
[1.57081125938084, 1.53757565577311, 1.50102196056121, 1.46185448865974,
1.42074711318142, 1.37833814316422, 1.33522604908548, 1.29196601247021, 1.2490672684754,
1.20699120390065, 1.16615016762715, 1.12690694599988, 1.0895748521104, 1.05441837527214,
1.02165433515881, 0.991453484049709, 0.963942500335816, 0.939206316828068,
0.917290728411422, 0.898205225141264, 0.881925998916851, 0.868399074325187,
0.857543517063441, 0.849254676455988, 0.843407421922515, 0.839859336768083,
0.838453836299344, 0.839023180971302, 0.841391358987942, 0.845376816473403,
0.850795016957915, 0.857460815448548, 0.865190635747067, 0.873804442908543,
0.883127505781382, 0.892991947413069, 0.903238083730963, 0.913715553302518,
0.924284243136626, 0.93481501740305, 0.945190257618808, 0.955304224280754,
0.965063251116619, 0.974385784089215, 0.983202278029044, 0.991454964299797,
0.999097503231133, 1.00609453519715, 1.01242114419128, 1.01806224756404,
1.02301192526476, 1.02727270147804, 1.03085479098541, 1.03377532192997, 1.03605754592997,
1.03773004569342, 1.03882594944318, 1.03938216058487, 1.03943861015144, 1.03903753865013,
1.03822281303162, 1.037039283607, 1.03553218486572, 1.03374658330439, 1.03172687456999,
1.02951633145704, 1.02715670358287, 1.02468786890088, 1.0221475366031, 1.01957100041212,
1.01699094076971, 1.01443727399642, 1.01193704612261, 1.00951436877585, 1.00719039425144,
1.00498332668955, 1.00290846613215, 1.00097828213226, 0.999202513534661,
0.997588291036714, 0.9961402791676, 0.994860834389939, 0.993750176125471,
0.992806567632662, 0.992026503814659, 0.991404903207168, 0.990935301583922,
0.990610044818705, 0.990420478854062, 0.990357134844535, 0.99040990776346,
0.990568226984211, 0.990821217566699, 0.99115785119554, 0.991567085925471,
0.992037994090581, 0.992559877924941, 0.993122372622149, 0.993715536728801]

20. あんまり変わらない
• calculationModeに任せよう笑

21. Referrence
• https://github.com/Ramotion/animated-
tab-bar
• http://khanlou.com/2012/01/
cakeyframeanimation-make-it-bounce/

22. Gist
• https://gist.github.com/naoyashiga/
af38a6b6d2722ab104e9

23. Thank you!