O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

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

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 23 Anúncio
Anúncio

Mais Conteúdo rRelacionado

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

Mais recentes (20)

Anúncio

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

  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!

×