Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アニメーション実践入門
Search
haptaro
February 14, 2018
Programming
3
590
アニメーション実践入門
第2回 iOS UI実装勉強会
haptaro
February 14, 2018
Tweet
Share
More Decks by haptaro
See All by haptaro
通信環境が不安定でも心地よい体験を
kotaro
0
91
iOSアプリ開発にもDIツールを!
kotaro
5
1.3k
はじめてのRxSwift体験記
kotaro
3
640
Swiftで気持ち良く開発したアプリを気持ち良くSubmitする
kotaro
0
7.3k
Other Decks in Programming
See All in Programming
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
チームリードになって変わったこと
isaka1022
0
190
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
CI改善もDatadogとともに
taumu
0
110
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A Modern Web Designer's Workflow
chriscoyier
693
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Six Lessons from altMBA
skipperchong
27
3.6k
Building Applications with DynamoDB
mza
93
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
Ξχϝʔγϣϯ࣮ફೖ 2018 / 02 / 14 ୈ2ճ iOS UI࣮ษڧձ
ඌ ଠ (@haptaro) - Sansanגࣜձࣾ - Eightࣄۀ෦ - ϞόΠϧΞϓϦΤϯδχΞ 2
ΞδΣϯμ - Ξχϝʔγϣϯͷ࣮ํ๏ - ΞχϝʔγϣϯϒϩοΫΛ༻͍ͨ҉తΞχϝʔγϣϯ - CALayerͱʁ - CoreAnimationΛ༻͍ͨ໌ࣔతΞχϝʔγϣϯ -
্࣮ͷ͍͚ 3
Ξχϝʔγϣϯͷ࣮ํ๏ - ϥΠϒϥϦΛ͏(facebook/pop, airbnb/lottie-ios) - ಠࣗͰ࣮͢Δ ɾը૾ϑϨʔϜΛ͏(UIImageView#animationImages) ɾΞχϝʔγϣϯϒϩοΫΛఏڙ͍ͯ͠ΔϝιουΛ͏ (animatableϓϩύςΟɺ੍ΛlayoutIfNeeded()) ɾCore
AnimationΛ͏ ɾUnity, Cocos2d, SpriteKit 4
Ξχϝʔγϣϯͷ࣮ํ๏ - ϥΠϒϥϦΛ͏(facebook/pop, airbnb/lottie-ios) - ಠࣗͰ࣮͢Δ ɾը૾ϑϨʔϜΛ͏(UIImageView#animationImages) ɾΞχϝʔγϣϯϒϩοΫΛఏڙ͍ͯ͠ΔϝιουΛ͏ (animatableϓϩύςΟɺ੍ΛlayoutIfNeeded()) ɾCore
AnimationΛ͏ ɾUnity, Cocos2d, SpriteKit 5
ΞχϝʔγϣϯϒϩοΫΛ༻͍ͨ ҉తΞχϝʔγϣϯ
ΞχϝʔγϣϯϒϩοΫͰanimatableͳϓϩύςΟͷΛ มߋ͢ΔͱࣗಈͰΞχϝʔγϣϯ͢Δ ※animatable: Ξχϝʔγϣϯͷαϙʔτ͕Έࠐ·Ε͍ͯΔ
ΞχϝʔγϣϯϒϩοΫ
animatableͳUIViewͷϓϩύςΟ - frame - bounds - center - transform -
alpha etc 9 https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/ AnimatingViews/AnimatingViews.html
ΞχϝʔγϣϯϒϩοΫΛఏڙ͍ͯ͠Δϝιου
ɾUIViewͷΫϥεϝιου ɾUIPropertyAnimator (iOS 10ʙ)
ϙΠϯτɾϋϚΓͲ͜ - ΞχϝʔγϣϯதͷҐஔใऔΕͳ͍ɻ͜ͷϒϩοΫ͕࣮ߦ͞Εͨޙ͢Ͱʹ ࠲ඪมΘ͍ͬͯΔɻࢹ֮తʹΞχϝʔγϣϯͯ͠ݟ͑Δ͚ͩɻΞχϝʔγϣϯ ్தͷ࠲ඪΛऔΓ͍ͨ߹CALayerͷpresentation()Λ͏ɻ - UIView.animateΛ͡Ίͱ͢ΔϝιουΫϥεϝιουͳͷͰɺΞχϝʔγϣ ϯϒϩοΫ1ͭͷViewʹؔ࿈͚ͣΒΕͳ͍ɻ - ΞχϝʔγϣϯϒϩοΫ֎Ͱ੍Λมߋ͠ɺΞχϝʔγϣϯϒϩοΫͰ
view.layoutIfNeeded()ΛݺΜͰΞχϝʔγϣϯ͢Δ (layoutIfNeeded()ΞχϝʔγϣϯରViewͰͳ͘ɺSuperViewʹରͯ͠ݺͿ) 12
ෳͷΞχϝʔγϣϯΛ·ͱΊͯཧͯ͠ Έ߹Θ࣮ͤͯߦͨ͠Γɺͬͱৄࡉʹλ ΠϛϯάΛཧΛ͍ͨ͠…
ͦ͜ͰCore Animation
CALayer(ϨΠϠΦϒδΣΫτ)ͱʁ
UIView CALayer ViewCALayerͷϥούʔΠϝʔδ
- ϏοτϚοϓͷঢ়ଶใΛཧ͢ΔϞσϧΦϒδΣΫτ - ࣮ࡍͷඳըॲཧߦΘͣɺঢ়ଶใΛϋʔυΣΞʹ͠ɺඳըϋʔυΣ ΞʹͤΔ - ͯ͢ͷViewσϑΥϧτͰϨΠϠΦϒδΣΫτΛ1͍ͭ࣋ͬͯΔ - Core AnimationViewͰͳ͘ɺCALayerʹରͯ͠ΞχϝʔγϣϯΛՃ͢
Δ 17
Core Animationͱʁ
GPU OpenGL ES / Core Graphics Core Animation UIKit
- Viewͱ౷߹ͯ͠ඳըੑೳΛվળ͢Δͱͱʹɺίϯςϯπʹಈ͖ΛՃ͑Δ ͨΊͷٕज़ - ϨΠϠΦϒδΣΫτ͔Βঢ়ଶใΛΒͬͯϋʔυΣΞʹ͢հ - CPUͰͳ͘ɺGPUͰ࣮ߦ͢ΔͷͰߴ 20
Core AnimationΛ༻͍ͨ ໌ࣔతΞχϝʔγϣϯ
Core AnimationͷදతͳΫϥε ɾCABasicAnimation ɾCAAnimationGroup
CABasicAnimation fromValue toValue Core AnimationͷجຊΫϥε ࢝ͱऴΛܾΊɺ్தͲͷΑ͏ʹ͢Δ͔Λఆٛ͢Δ
ରϓϩύςΟΛʮจࣈྻʯͰࢦఆ
CABasicAnimationͰ༻͢ΔCALayerͷKeyPath - position.x - transform.scale - opacity - cornerRadius etc
25 https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/ AnimatableProperties/AnimatableProperties.html#//apple_ref/doc/uid/TP40004514-CH11-SW2
CAAnimationGroup ෳͷΞχϝʔγϣϯΛάϧʔϓԽ͠ɺಉ࣌ʹ࣮ߦͰ͖Δͷ
ϙΠϯτɾϋϚΓͲ͜ - CAAnimationͷdelegateڧࢀর - CAAnimationGroupͰάϧʔϓԽͯ͠ɺݸผͷCABasicAnimationʹ durationΛ͚ͭΔ͜ͱ͕Մೳ - CABasicAnimationͰͷdelay CACurrentMediaTime() +
ΒͤΔඵ - ΞχϝʔγϣϯऴྃޙྃҐஔΛอͭ animation.removeOnCompletion = false animation.fillMode = kCAFillModeForwards 27
UIView.animate, UIView.transition, UIView.transaction, UIView.animateKeyframes, UIView.beginAnimations() / UIView.commitAnimations(), UIPropertyAnimator, UIDynamicAnimator, UIGravityBehavior,
UIColisionBehavior, CABasicAnimation, CAAnimationGroup, CAKeyframeAnimation, CATransiton, CATransaction.begin() / CATransaction.commit() / CATransaction.setCompletion {}, UIViewControllerAnimatedTransitioning
UIView.animate, UIView.transition, UIView.transaction, UIView.animateKeyframes, UIView.beginAnimations() / UIView.commitAnimations(), UIPropertyAnimator, UIDynamicAnimator, UIGravityBehavior,
UIColisionBehavior, CABasicAnimation, CAAnimationGroup, CAKeyframeAnimation, CATransiton, CATransaction.begin() / CATransaction.commit() / CATransaction.setCompletion {}, UIViewControllerAnimatedTransitioning ͍Ζ͍Ζ͋Γ͗͢Δ…
Ͳ͏͍͚ΕΑ͍ͷʁ
·ͣUIViewͷΫϥεϝιουΛٙͬͯΈΔ
·ͣUIViewͷΫϥεϝιουΛٙͬͯΈΔ 2DۭؒͷجຊతͳฏߦҠಈɺճసɺ֦େɾॖখCGAffineTransform
ΠʔδϯάΛΧελϚΠζɺϢʔβͷτϦ ΨʔʹԠͯ͡ΞχϝʔγϣϯΛม͍͑ͨ
UIPropertyAnimatorΛٙͬͯΈΔ
- ӨͷΞχϝʔγϣϯ - ෳͷΞχϝʔγϣϯΛάϧʔϓԽͯ͠Έ߹Θͤɺಉ࣮࣌ߦ - ૢ࡞Λࢪ͢த৺: anchorPoint(ճసͳΒճస࣠ͳͲ)Λม͍͑ͨ - 3DۭؒͰͷม -
PathʹԊͬͨΞχϝʔγϣϯ - ύʔςΟΫϧΤϑΣΫτ etc 35
Core Animation
࿈ଓͨ͠Ξχϝʔγϣϯʁ
ɾίʔϧόοΫ(UIView.completion,CATransaction.setCompletionBlock etc) ɾΩʔϑϨʔϜ(UIView.animateKeyframes,CAKeyframeAnimation) ɾCABasicAnimationͷbeginTimeΛௐ
ΩʔϑϨʔϜͱʁ
CABasicAnimation fromValue toValue ࢝ͱऴΛܾΊɺ్தͲͷΑ͏ʹ͢Δ͔Λఆٛ͢Δ
CAKeyframeAnimation 0 1 Ξχϝʔγϣϯ͕มΘΔͦΕͧΕͷذɻ௨ա͕͋ΔΠϝʔδ 2 2
ॏྗɺিಥɺόωͳͲͷཧ๏ଇΛ༻͍Δ Ξχϝʔγϣϯʁ
UIDynamicAnimator
σϞ
·ͱΊ - ࢥ͍ͷ֎Ξχϝʔγϣϯͷ࣮ݱํ๏ଟ͍ - γϯϓϧͳͷ·ͣUIViewͷΫϥεϝιου, UIPropertyAnimator, UIDynamicAnimatorͰ࣮ݱͰ͖ͳ͍͔Λٙ͏ - ෳࡶͳͷCore AnimationɻෳͷΞχϝʔγϣϯΛάϧʔϐϯάͰ͖ͨ
Γɺࡉ͔ͳλΠϛϯάௐͰ͖Δ - ࿈ଓͨ͠ΞχϝʔγϣϯίʔϧόοΫɺΩʔϑϨʔϜɺbeginTimeௐͷ3 छྨ 45
తʹԠͯ͡ྑ͍ΞχϝʔγϣϯΛ࣮ݱ͠·͠ΐ͏ʂ
Your business network
ࢀߟࢿྉ - https://www.youtube.com/watch?v=QgRO-51I-pY - https://speakerdeck.com/hedjirog/introduction-to-uiviewpropertyanimator - https://stackoverflow.com/questions/42802984/when-to-use-uiview-animation- cabasicanimation-and-uiviewpropertyanimator - https://qiita.com/edo_m18/items/4309d01b67ee42c35b3c
- https://qiita.com/hachinobu/items/57d4c305c907805b4a53 - https://developer.apple.com/jp/documentation/ViewPG_iPhoneOS.pdf - https://qiita.com/inamiy/items/bdc0eb403852178c4ea7 - https://developer.apple.com/videos/play/wwdc2011/421/ 48