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
570
アニメーション実践入門
第2回 iOS UI実装勉強会
haptaro
February 14, 2018
Tweet
Share
More Decks by haptaro
See All by haptaro
通信環境が不安定でも心地よい体験を
kotaro
0
90
iOSアプリ開発にもDIツールを!
kotaro
5
1.2k
はじめてのRxSwift体験記
kotaro
3
640
Swiftで気持ち良く開発したアプリを気持ち良くSubmitする
kotaro
0
7.2k
Other Decks in Programming
See All in Programming
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
Outline View in SwiftUI
1024jp
1
330
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
240
イベント駆動で成長して委員会
happymana
1
330
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
960
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Contemporary Test Cases
maaretp
0
140
Jakarta EE meets AI
ivargrimstad
0
130
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Fireside Chat
paigeccino
34
3k
Adopting Sorbet at Scale
ufuk
73
9.1k
Rails Girls Zürich Keynote
gr2m
94
13k
How to train your dragon (web standard)
notwaldorf
88
5.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Gamification - CAS2011
davidbonilla
80
5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Building Applications with DynamoDB
mza
90
6.1k
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