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
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
820
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
280
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
250
Reactの歴史を振り返る
tutinoko
1
140
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
MCPで実現できる、Webサービス利用体験について
syumai
7
2.1k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building an army of robots
kneath
306
45k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
65k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Making Projects Easy
brettharned
117
6.3k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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