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
ZXCTN 5804 / ZTE PTN / ZTE POTN / ZTE 5804 PTN / ZTE POTN 5804 ( 100/200 GE Z...
ZXCTN 5804 / ZTE PTN / ZTE POTN / ZTE 5804 PTN / ZTE POTN 5804 ( 100/200 GE Z...
ZTE
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
Suhani Kapoor
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
ZXCTN 5804 / ZTE PTN / ZTE POTN / ZTE 5804 PTN / ZTE POTN 5804 ( 100/200 GE Z...
ZXCTN 5804 / ZTE PTN / ZTE POTN / ZTE 5804 PTN / ZTE POTN 5804 ( 100/200 GE Z...
ZTE
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
Suhani Kapoor
Introduction to Microprocesso programming and interfacing.pptx
Introduction to Microprocesso programming and interfacing.pptx
vipinkmenon1
HARMONY IN THE HUMAN BEING - Unit-II UHV-2
HARMONY IN THE HUMAN BEING - Unit-II UHV-2
RajaP95
Call Us -/9953056974- Call Girls In Vikaspuri-/- Delhi NCR
Call Us -/9953056974- Call Girls In Vikaspuri-/- Delhi NCR
9953056974 Low Rate Call Girls In Saket, Delhi NCR
GDSC ASEB Gen AI study jams presentation
GDSC ASEB Gen AI study jams presentation
GDSCAESB
Call Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile service
rehmti665
Artificial-Intelligence-in-Electronics (K).pptx
Artificial-Intelligence-in-Electronics (K).pptx
britheesh05
(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
ranjana rawat
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
null - The Open Security Community
chaitra-1.pptx fake news detection using machine learning
chaitra-1.pptx fake news detection using machine learning
misbanausheenparvam
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
srsj9000
Sheet Pile Wall Design and Construction: A Practical Guide for Civil Engineer...
Sheet Pile Wall Design and Construction: A Practical Guide for Civil Engineer...
Dr.Costas Sachpazis
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
João Esperancinha
Internship report on mechanical engineering
Internship report on mechanical engineering
malavadedarshan25
Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024
hassan khalil
Current Transformer Drawing and GTP for MSETCL
Current Transformer Drawing and GTP for MSETCL
DeelipZope
power system scada applications and uses
power system scada applications and uses
DevarapalliHaritha
SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )
Tsuyoshi Horigome
Oxy acetylene welding presentation note.
Oxy acetylene welding presentation note.
eptoze12
Recently uploaded
(20)
ZXCTN 5804 / ZTE PTN / ZTE POTN / ZTE 5804 PTN / ZTE POTN 5804 ( 100/200 GE Z...
ZXCTN 5804 / ZTE PTN / ZTE POTN / ZTE 5804 PTN / ZTE POTN 5804 ( 100/200 GE Z...
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
Introduction to Microprocesso programming and interfacing.pptx
Introduction to Microprocesso programming and interfacing.pptx
HARMONY IN THE HUMAN BEING - Unit-II UHV-2
HARMONY IN THE HUMAN BEING - Unit-II UHV-2
Call Us -/9953056974- Call Girls In Vikaspuri-/- Delhi NCR
Call Us -/9953056974- Call Girls In Vikaspuri-/- Delhi NCR
GDSC ASEB Gen AI study jams presentation
GDSC ASEB Gen AI study jams presentation
Call Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile service
Artificial-Intelligence-in-Electronics (K).pptx
Artificial-Intelligence-in-Electronics (K).pptx
(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
chaitra-1.pptx fake news detection using machine learning
chaitra-1.pptx fake news detection using machine learning
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Sheet Pile Wall Design and Construction: A Practical Guide for Civil Engineer...
Sheet Pile Wall Design and Construction: A Practical Guide for Civil Engineer...
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Internship report on mechanical engineering
Internship report on mechanical engineering
Architect Hassan Khalil Portfolio for 2024
Architect Hassan Khalil Portfolio for 2024
Current Transformer Drawing and GTP for MSETCL
Current Transformer Drawing and GTP for MSETCL
power system scada applications and uses
power system scada applications and uses
SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )
Oxy acetylene welding presentation note.
Oxy acetylene welding presentation note.
ボタンアニメーションに三角関数を導入して徒労に終わった話
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