Submit Search
Upload
ボタンアニメーションに三角関数を導入して徒労に終わった話
•
1 like
•
1,511 views
Naoya Shiga
Follow
CAKeyframeAnimationのvaluesを三角関数を使ってBounceさせたが、そんなのしなくても別に良かったw
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 23
Download now
Download to read offline
Recommended
Animations in iOS with Facebook POP
Animations in iOS with Facebook POP
Eduard Panasiuk
Introduction to POP animation engine
Introduction to POP animation engine
Subhransu Behera
Twitter Profile Header Animation by using Swift
Twitter Profile Header Animation by using Swift
Naoya Shiga
Core Animationの話 Part.1
Core Animationの話 Part.1
Yuichi Fujishige
「数える」とは何か? 〜 「とは何か?」を問う、AI時代の数学
「数える」とは何か? 〜 「とは何か?」を問う、AI時代の数学
Taketo Sano
プログラマのための線形代数再入門2 〜 要件定義から学ぶ行列式と逆行列
プログラマのための線形代数再入門2 〜 要件定義から学ぶ行列式と逆行列
Taketo Sano
プログラマのための線形代数再入門
プログラマのための線形代数再入門
Taketo Sano
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Xamarin
Recommended
Animations in iOS with Facebook POP
Animations in iOS with Facebook POP
Eduard Panasiuk
Introduction to POP animation engine
Introduction to POP animation engine
Subhransu Behera
Twitter Profile Header Animation by using Swift
Twitter Profile Header Animation by using Swift
Naoya Shiga
Core Animationの話 Part.1
Core Animationの話 Part.1
Yuichi Fujishige
「数える」とは何か? 〜 「とは何か?」を問う、AI時代の数学
「数える」とは何か? 〜 「とは何か?」を問う、AI時代の数学
Taketo Sano
プログラマのための線形代数再入門2 〜 要件定義から学ぶ行列式と逆行列
プログラマのための線形代数再入門2 〜 要件定義から学ぶ行列式と逆行列
Taketo Sano
プログラマのための線形代数再入門
プログラマのための線形代数再入門
Taketo Sano
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
Xamarin
Core Animation
Core Animation
Bob McCune
Animation in iOS
Animation in iOS
Alexis Goldstein
Core animation
Core animation
Weizhong Yang
Starting Core Animation
Starting Core Animation
John Wilker
Core Animation
Core Animation
Blogintosh
다음웹툰의 UX(Animation, Transition, Custom View)
다음웹툰의 UX(Animation, Transition, Custom View)
if kakao
CocoaHeads Paris - CATransaction: What the flush?!
CocoaHeads Paris - CATransaction: What the flush?!
amadour
UI Animations in Meteor
UI Animations in Meteor
Nick Wientge
Leaving Interface Builder Behind
Leaving Interface Builder Behind
John Wilker
Сергій Міськів, «SwiftUI: Animations»
Сергій Міськів, «SwiftUI: Animations»
Sigma Software
MCE^3 - Marin Todorov - Building Swift Libraries for iOS
MCE^3 - Marin Todorov - Building Swift Libraries for iOS
PROIDEA
Seven Peaks Speaks - Android Jetpack Compose Animation
Seven Peaks Speaks - Android Jetpack Compose Animation
Seven Peaks Speaks
Александр Зимин – Анимация как средство самовыражения
Александр Зимин – Анимация как средство самовыражения
CocoaHeads
iOS Animations using Pop
iOS Animations using Pop
NSCoder Mexico
004
004
Stronger Shen
How to implement react native animations using animated api
How to implement react native animations using animated api
Katy Slemon
Building animated UI with Core Animation
Building animated UI with Core Animation
Marco Zoffoli
How to Create Animation Using the AnimatedAlign Widget.pptx
How to Create Animation Using the AnimatedAlign Widget.pptx
Flutter Agency
Demystifying Angular Animations
Demystifying Angular Animations
Gil Fink
rlottie - a new approach to motion graphics ui
rlottie - a new approach to motion graphics ui
Hermet Park
Unit 2- Effective stress & Permeability.pdf
Unit 2- Effective stress & Permeability.pdf
RagavanV2
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
More Related Content
Similar to ボタンアニメーションに三角関数を導入して徒労に終わった話
Core Animation
Core Animation
Bob McCune
Animation in iOS
Animation in iOS
Alexis Goldstein
Core animation
Core animation
Weizhong Yang
Starting Core Animation
Starting Core Animation
John Wilker
Core Animation
Core Animation
Blogintosh
다음웹툰의 UX(Animation, Transition, Custom View)
다음웹툰의 UX(Animation, Transition, Custom View)
if kakao
CocoaHeads Paris - CATransaction: What the flush?!
CocoaHeads Paris - CATransaction: What the flush?!
amadour
UI Animations in Meteor
UI Animations in Meteor
Nick Wientge
Leaving Interface Builder Behind
Leaving Interface Builder Behind
John Wilker
Сергій Міськів, «SwiftUI: Animations»
Сергій Міськів, «SwiftUI: Animations»
Sigma Software
MCE^3 - Marin Todorov - Building Swift Libraries for iOS
MCE^3 - Marin Todorov - Building Swift Libraries for iOS
PROIDEA
Seven Peaks Speaks - Android Jetpack Compose Animation
Seven Peaks Speaks - Android Jetpack Compose Animation
Seven Peaks Speaks
Александр Зимин – Анимация как средство самовыражения
Александр Зимин – Анимация как средство самовыражения
CocoaHeads
iOS Animations using Pop
iOS Animations using Pop
NSCoder Mexico
004
004
Stronger Shen
How to implement react native animations using animated api
How to implement react native animations using animated api
Katy Slemon
Building animated UI with Core Animation
Building animated UI with Core Animation
Marco Zoffoli
How to Create Animation Using the AnimatedAlign Widget.pptx
How to Create Animation Using the AnimatedAlign Widget.pptx
Flutter Agency
Demystifying Angular Animations
Demystifying Angular Animations
Gil Fink
rlottie - a new approach to motion graphics ui
rlottie - a new approach to motion graphics ui
Hermet Park
Similar to ボタンアニメーションに三角関数を導入して徒労に終わった話
(20)
Core Animation
Core Animation
Animation in iOS
Animation in iOS
Core animation
Core animation
Starting Core Animation
Starting Core Animation
Core Animation
Core Animation
다음웹툰의 UX(Animation, Transition, Custom View)
다음웹툰의 UX(Animation, Transition, Custom View)
CocoaHeads Paris - CATransaction: What the flush?!
CocoaHeads Paris - CATransaction: What the flush?!
UI Animations in Meteor
UI Animations in Meteor
Leaving Interface Builder Behind
Leaving Interface Builder Behind
Сергій Міськів, «SwiftUI: Animations»
Сергій Міськів, «SwiftUI: Animations»
MCE^3 - Marin Todorov - Building Swift Libraries for iOS
MCE^3 - Marin Todorov - Building Swift Libraries for iOS
Seven Peaks Speaks - Android Jetpack Compose Animation
Seven Peaks Speaks - Android Jetpack Compose Animation
Александр Зимин – Анимация как средство самовыражения
Александр Зимин – Анимация как средство самовыражения
iOS Animations using Pop
iOS Animations using Pop
004
004
How to implement react native animations using animated api
How to implement react native animations using animated api
Building animated UI with Core Animation
Building animated UI with Core Animation
How to Create Animation Using the AnimatedAlign Widget.pptx
How to Create Animation Using the AnimatedAlign Widget.pptx
Demystifying Angular Animations
Demystifying Angular Animations
rlottie - a new approach to motion graphics ui
rlottie - a new approach to motion graphics ui
Recently uploaded
Unit 2- Effective stress & Permeability.pdf
Unit 2- Effective stress & Permeability.pdf
RagavanV2
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
Generative AI or GenAI technology based PPT
Generative AI or GenAI technology based PPT
bhaskargani46
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
Call Girls in Nagpur High Profile
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performance
sivaprakash250
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Kandungan 087776558899
Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
tanu pandey
Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.ppt
DineshKumar4165
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
RishantSharmaFr
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Block diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.ppt
NANDHAKUMARA10
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
roncy bisnoi
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
roncy bisnoi
data_management_and _data_science_cheat_sheet.pdf
data_management_and _data_science_cheat_sheet.pdf
JiananWang21
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
Call Girls in Nagpur High Profile
Call Girls in Netaji Nagar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Netaji Nagar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Call Girls in Nagpur High Profile
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
Arindam Chakraborty, Ph.D., P.E. (CA, TX)
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
Recently uploaded
(20)
Unit 2- Effective stress & Permeability.pdf
Unit 2- Effective stress & Permeability.pdf
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
Generative AI or GenAI technology based PPT
Generative AI or GenAI technology based PPT
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performance
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.ppt
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Block diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.ppt
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
data_management_and _data_science_cheat_sheet.pdf
data_management_and _data_science_cheat_sheet.pdf
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
Call Girls in Netaji Nagar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Netaji Nagar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
ボタンアニメーションに三角関数を導入して徒労に終わった話
1.
ボタンアニメーションに 三角関数を導入して 徒労に終わった話 もくもく会 2015.08.19 Tokyo @naoyashiga
2.
自己紹介 • @naoyashiga • iOS
Dev, Web Markup • https://github.com/naoyashiga • 趣味でiOSアプリ個人開発
3.
今日のLTは
4.
Button Animation
5.
demo
6.
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]
19.
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!
Download now