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
600
アニメーション実践入門
第2回 iOS UI実装勉強会
haptaro
February 14, 2018
Tweet
Share
More Decks by haptaro
See All by haptaro
通信環境が不安定でも心地よい体験を
kotaro
0
96
iOSアプリ開発にもDIツールを!
kotaro
5
1.3k
はじめてのRxSwift体験記
kotaro
3
640
Swiftで気持ち良く開発したアプリを気持ち良くSubmitする
kotaro
0
7.3k
Other Decks in Programming
See All in Programming
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
180
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
250
XSLTで作るBrainfuck処理系
makki_d
0
210
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
Deep Dive into ~/.claude/projects
hiragram
10
1.8k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
570
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
XP, Testing and ninja testing
m_seki
3
210
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
510
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
It's Worth the Effort
3n
185
28k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Thoughts on Productivity
jonyablonski
69
4.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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