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
540
アニメーション実践入門
第2回 iOS UI実装勉強会
haptaro
February 14, 2018
Tweet
Share
More Decks by haptaro
See All by haptaro
通信環境が不安定でも心地よい体験を
kotaro
0
88
iOSアプリ開発にもDIツールを!
kotaro
5
1.1k
はじめてのRxSwift体験記
kotaro
3
640
Swiftで気持ち良く開発したアプリを気持ち良くSubmitする
kotaro
0
7.2k
Other Decks in Programming
See All in Programming
Folding Cheat Sheet #3
philipschwarz
PRO
0
120
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Code Reviews
bkuhlmann
4
890
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
640
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
GitHub Copilotのススメ
marcy731
0
190
Site Reliability Engineering for GMO
pyama86
7
1k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Rethinking UI building strategies @ SFI 2024
letelete
0
270
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
940
Anthropic Cookbook のおすすめレシピ
schroneko
7
840
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Featured
See All Featured
Unsuck your backbone
ammeep
663
57k
Visualization
eitanlees
136
14k
Clear Off the Table
cherdarchuk
84
310k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Writing Fast Ruby
sferik
621
60k
In The Pink: A Labor of Love
frogandcode
138
21k
Into the Great Unknown - MozCon
thekraken
10
990
The Mythical Team-Month
searls
216
42k
Six Lessons from altMBA
skipperchong
21
3k
Statistics for Hackers
jakevdp
789
220k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
It's Worth the Effort
3n
180
27k
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