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
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
ranjana rawat
KubeKraft presentation @CloudNativeHooghly
KubeKraft presentation @CloudNativeHooghly
sanyuktamishra911
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
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
ranjana rawat
KubeKraft presentation @CloudNativeHooghly
KubeKraft presentation @CloudNativeHooghly
sanyuktamishra911
IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...
IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...
RajaP95
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performance
sivaprakash250
Microscopic Analysis of Ceramic Materials.pptx
Microscopic Analysis of Ceramic Materials.pptx
purnimasatapathy1234
High Profile Call Girls Nagpur Isha Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Isha Call 7001035870 Meet With Nagpur Escorts
ranjana rawat
Porous Ceramics seminar and technical writing
Porous Ceramics seminar and technical writing
rakeshbaidya232001
result management system report for college project
result management system report for college project
Tonystark477637
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
Soham Mondal
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
ranjana rawat
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
RajaP95
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Dr.Costas Sachpazis
Call Girls Service Nashik Vaishnavi 7001305949 Independent Escort Service Nashik
Call Girls Service Nashik Vaishnavi 7001305949 Independent Escort Service Nashik
Call Girls in Nagpur High Profile
Processing & Properties of Floor and Wall Tiles.pptx
Processing & Properties of Floor and Wall Tiles.pptx
pranjaldaimarysona
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
KurinjimalarL3
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
SIVASHANKAR N
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
Roadmap to Membership of RICS - Pathways and Routes
Roadmap to Membership of RICS - Pathways and Routes
M Maged Hegazy, LLM, MBA, CCP, P3O
SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )
Tsuyoshi Horigome
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
SIVASHANKAR N
Recently uploaded
(20)
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
KubeKraft presentation @CloudNativeHooghly
KubeKraft presentation @CloudNativeHooghly
IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...
IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performance
Microscopic Analysis of Ceramic Materials.pptx
Microscopic Analysis of Ceramic Materials.pptx
High Profile Call Girls Nagpur Isha Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Isha Call 7001035870 Meet With Nagpur Escorts
Porous Ceramics seminar and technical writing
Porous Ceramics seminar and technical writing
result management system report for college project
result management system report for college project
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
HARMONY IN THE NATURE AND EXISTENCE - Unit-IV
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Call Girls Service Nashik Vaishnavi 7001305949 Independent Escort Service Nashik
Call Girls Service Nashik Vaishnavi 7001305949 Independent Escort Service Nashik
Processing & Properties of Floor and Wall Tiles.pptx
Processing & Properties of Floor and Wall Tiles.pptx
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
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...
Roadmap to Membership of RICS - Pathways and Routes
Roadmap to Membership of RICS - Pathways and Routes
SPICE PARK APR2024 ( 6,793 SPICE Models )
SPICE PARK APR2024 ( 6,793 SPICE Models )
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
ボタンアニメーションに三角関数を導入して徒労に終わった話
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