Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ボタンアニメーションに三角関数を導入して徒労に終わった話

1,209 views

Published on

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

Published in: Engineering
  • Be the first to comment

ボタンアニメーションに三角関数を導入して徒労に終わった話

  1. 1. ボタンアニメーションに 三角関数を導入して 徒労に終わった話 もくもく会 2015.08.19 Tokyo @naoyashiga
  2. 2. 自己紹介 • @naoyashiga • iOS Dev, Web Markup • https://github.com/naoyashiga • 趣味でiOSアプリ個人開発
  3. 3. 今日のLTは
  4. 4. Button Animation
  5. 5. demo
  6. 6. CAKeyframeAnimation • CAKeyframeAnimation • 3つ以上の値を補完するアニメーション • CABasicAnimation • 2つの値を補完するアニメーション
  7. 7. 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") } }
  8. 8. やったぜ
  9. 9. 疑問が。。。
  10. 10. valuesを増やしたら 滑らかになるのでは?
  11. 11. calculationMode • valueの間を補完してくれる • kCAAnimationCubicなど • timingFunctionによって補完 • valuesはたくさんあったほうが滑らか?
  12. 12. Emplicit Animation (三角関数でがんばる)
  13. 13. 三角関数のやり方を 調べてみた
  14. 14. 難しいので割愛
  15. 15. コピペだ!! • http://khanlou.com/2012/01/ cakeyframeanimation-make-it-bounce/
  16. 16. 三角関数でがんばる 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) }
  17. 17. 細か!!! [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]
  18. 18. あんまり変わらない • calculationModeに任せよう笑
  19. 19. Referrence • https://github.com/Ramotion/animated- tab-bar • http://khanlou.com/2012/01/ cakeyframeanimation-make-it-bounce/
  20. 20. Gist • https://gist.github.com/naoyashiga/ af38a6b6d2722ab104e9
  21. 21. Thank you!

×