Tweet
Tweet

Slide 1

Slide 1 text

Ξχϝʔγϣϯ࣮ફೖ໳ 2018 / 02 / 14 ୈ2ճ iOS UI࣮૷ษڧձ

Slide 2

Slide 2 text

෱ඌ ޾ଠ࿠ (@haptaro) - Sansanגࣜձࣾ - Eightࣄۀ෦ - ϞόΠϧΞϓϦΤϯδχΞ 2

Slide 3

Slide 3 text

ΞδΣϯμ - Ξχϝʔγϣϯͷ࣮૷ํ๏ - ΞχϝʔγϣϯϒϩοΫΛ༻͍ͨ҉໧తΞχϝʔγϣϯ - CALayerͱ͸ʁ - CoreAnimationΛ༻͍ͨ໌ࣔతΞχϝʔγϣϯ - ࣮૷্ͷ࢖͍෼͚ 3

Slide 4

Slide 4 text

Ξχϝʔγϣϯͷ࣮૷ํ๏ - ϥΠϒϥϦΛ࢖͏(facebook/pop, airbnb/lottie-ios) - ಠࣗͰ࣮૷͢Δ
 ɾը૾ϑϨʔϜΛ࢖͏(UIImageView#animationImages)
 ɾΞχϝʔγϣϯϒϩοΫΛఏڙ͍ͯ͠ΔϝιουΛ࢖͏
 (animatableϓϩύςΟɺ੍໿ΛlayoutIfNeeded())
 ɾCore AnimationΛ࢖͏
 ɾUnity, Cocos2d, SpriteKit 4

Slide 5

Slide 5 text

Ξχϝʔγϣϯͷ࣮૷ํ๏ - ϥΠϒϥϦΛ࢖͏(facebook/pop, airbnb/lottie-ios) - ಠࣗͰ࣮૷͢Δ
 ɾը૾ϑϨʔϜΛ࢖͏(UIImageView#animationImages)
 ɾΞχϝʔγϣϯϒϩοΫΛఏڙ͍ͯ͠ΔϝιουΛ࢖͏
 (animatableϓϩύςΟɺ੍໿ΛlayoutIfNeeded())
 ɾCore AnimationΛ࢖͏
 ɾUnity, Cocos2d, SpriteKit 5

Slide 6

Slide 6 text

ΞχϝʔγϣϯϒϩοΫΛ༻͍ͨ
 ҉໧తΞχϝʔγϣϯ

Slide 7

Slide 7 text

ΞχϝʔγϣϯϒϩοΫ಺ͰanimatableͳϓϩύςΟͷ஋Λ มߋ͢ΔͱࣗಈͰΞχϝʔγϣϯ͢Δ ※animatable: Ξχϝʔγϣϯͷαϙʔτ͕૊Έࠐ·Ε͍ͯΔ

Slide 8

Slide 8 text

ΞχϝʔγϣϯϒϩοΫ

Slide 9

Slide 9 text

animatableͳUIViewͷϓϩύςΟ - frame - bounds - center - transform - alpha etc 9 https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/ AnimatingViews/AnimatingViews.html

Slide 10

Slide 10 text

ΞχϝʔγϣϯϒϩοΫΛఏڙ͍ͯ͠Δϝιου

Slide 11

Slide 11 text

ɾUIViewͷΫϥεϝιου ɾUIPropertyAnimator (iOS 10ʙ)

Slide 12

Slide 12 text

ϙΠϯτɾϋϚΓͲ͜ - ΞχϝʔγϣϯதͷҐஔ৘ใ͸औΕͳ͍ɻ͜ͷϒϩοΫ͕࣮ߦ͞Εͨ௚ޙ͢Ͱʹ ࠲ඪ͸มΘ͍ͬͯΔɻࢹ֮తʹΞχϝʔγϣϯͯ͠ݟ͑Δ͚ͩɻΞχϝʔγϣϯ ్தͷ࠲ඪΛऔΓ͍ͨ৔߹͸CALayerͷpresentation()Λ࢖͏ɻ - UIView.animateΛ͸͡Ίͱ͢Δϝιου͸ΫϥεϝιουͳͷͰɺΞχϝʔγϣ ϯϒϩοΫ͸1ͭͷViewʹؔ࿈͚ͣΒΕͳ͍ɻ - ΞχϝʔγϣϯϒϩοΫ֎Ͱ੍໿Λมߋ͠ɺΞχϝʔγϣϯϒϩοΫ಺Ͱ view.layoutIfNeeded()ΛݺΜͰ΋Ξχϝʔγϣϯ͢Δ
 (layoutIfNeeded()͸Ξχϝʔγϣϯର৅ViewͰ͸ͳ͘ɺSuperViewʹରͯ͠ݺͿ) 12

Slide 13

Slide 13 text

ෳ਺ͷΞχϝʔγϣϯΛ·ͱΊͯ؅ཧͯ͠ ૊Έ߹Θ࣮ͤͯߦͨ͠Γɺ΋ͬͱৄࡉʹλ ΠϛϯάΛ؅ཧΛ͍ͨ͠…

Slide 14

Slide 14 text

ͦ͜ͰCore Animation

Slide 15

Slide 15 text

CALayer(ϨΠϠΦϒδΣΫτ)ͱ͸ʁ

Slide 16

Slide 16 text

UIView CALayer View͸CALayerͷϥούʔΠϝʔδ

Slide 17

Slide 17 text

- ϏοτϚοϓͷঢ়ଶ৘ใΛ؅ཧ͢ΔϞσϧΦϒδΣΫτ - ࣮ࡍͷඳըॲཧ͸ߦΘͣɺঢ়ଶ৘ใΛϋʔυ΢ΣΞʹ౉͠ɺඳը͸ϋʔυ΢Σ Ξʹ೚ͤΔ - ͢΂ͯͷView͸σϑΥϧτͰϨΠϠΦϒδΣΫτΛ1͍ͭ࣋ͬͯΔ - Core Animation͸ViewͰ͸ͳ͘ɺCALayerʹରͯ͠ΞχϝʔγϣϯΛ௥Ճ͢ Δ 17

Slide 18

Slide 18 text

Core Animationͱ͸ʁ

Slide 19

Slide 19 text

GPU OpenGL ES / Core Graphics Core Animation UIKit

Slide 20

Slide 20 text

- Viewͱ౷߹ͯ͠ඳըੑೳΛվળ͢Δͱͱ΋ʹɺίϯςϯπʹಈ͖ΛՃ͑Δ ͨΊͷٕज़ - ϨΠϠΦϒδΣΫτ͔Βঢ়ଶ৘ใΛ΋Βͬͯϋʔυ΢ΣΞʹ౉͢஥հ໾ - CPUͰ͸ͳ͘ɺGPUͰ࣮ߦ͢ΔͷͰߴ଎ 20

Slide 21

Slide 21 text

Core AnimationΛ༻͍ͨ
 ໌ࣔతΞχϝʔγϣϯ


Slide 22

Slide 22 text

Core Animationͷ୅දతͳΫϥε
 ɾCABasicAnimation
 ɾCAAnimationGroup

Slide 23

Slide 23 text

CABasicAnimation fromValue toValue Core AnimationͷجຊΫϥε
 ࢝఺ͱऴ఺ΛܾΊɺ్த͸ͲͷΑ͏ʹ͢Δ͔Λఆٛ͢Δ

Slide 24

Slide 24 text

ର৅ϓϩύςΟΛʮจࣈྻʯͰࢦఆ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

CAAnimationGroup ෳ਺ͷΞχϝʔγϣϯΛάϧʔϓԽ͠ɺಉ࣌ʹ࣮ߦͰ͖Δ΋ͷ

Slide 27

Slide 27 text

ϙΠϯτɾϋϚΓͲ͜ - CAAnimationͷdelegate͸ڧࢀর - CAAnimationGroupͰάϧʔϓԽͯ͠΋ɺݸผͷCABasicAnimationʹ durationΛ͚ͭΔ͜ͱ͕Մೳ - CABasicAnimationͰͷdelay͸ CACurrentMediaTime() + ஗ΒͤΔඵ਺ - Ξχϝʔγϣϯऴྃޙ΋׬ྃҐஔΛอͭ
 animation.removeOnCompletion = false
 animation.fillMode = kCAFillModeForwards 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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 ͍Ζ͍Ζ͋Γ͗͢Δ…

Slide 30

Slide 30 text

Ͳ͏࢖͍෼͚Ε͹Α͍ͷʁ

Slide 31

Slide 31 text

·ͣ͸UIViewͷΫϥεϝιουΛٙͬͯΈΔ

Slide 32

Slide 32 text

·ͣ͸UIViewͷΫϥεϝιουΛٙͬͯΈΔ 2DۭؒͷجຊతͳฏߦҠಈɺճసɺ֦େɾॖখ΋CGAffineTransform

Slide 33

Slide 33 text

ΠʔδϯάΛΧελϚΠζɺϢʔβͷτϦ ΨʔʹԠͯ͡ΞχϝʔγϣϯΛม͍͑ͨ

Slide 34

Slide 34 text

UIPropertyAnimatorΛٙͬͯΈΔ

Slide 35

Slide 35 text

- ӨͷΞχϝʔγϣϯ - ෳ਺ͷΞχϝʔγϣϯΛάϧʔϓԽͯ͠૊Έ߹Θͤɺಉ࣮࣌ߦ - ૢ࡞Λࢪ͢த৺఺: anchorPoint(ճసͳΒճస࣠ͳͲ)Λม͍͑ͨ - 3DۭؒͰͷม׵ - PathʹԊͬͨΞχϝʔγϣϯ - ύʔςΟΫϧΤϑΣΫτ etc 35

Slide 36

Slide 36 text

Core Animation

Slide 37

Slide 37 text

࿈ଓͨ͠Ξχϝʔγϣϯ͸ʁ

Slide 38

Slide 38 text

ɾίʔϧόοΫ(UIView.completion,CATransaction.setCompletionBlock etc) 
 ɾΩʔϑϨʔϜ(UIView.animateKeyframes,CAKeyframeAnimation) ɾCABasicAnimationͷbeginTimeΛௐ੔

Slide 39

Slide 39 text

ΩʔϑϨʔϜͱ͸ʁ

Slide 40

Slide 40 text

CABasicAnimation fromValue toValue ࢝఺ͱऴ఺ΛܾΊɺ్த͸ͲͷΑ͏ʹ͢Δ͔Λఆٛ͢Δ

Slide 41

Slide 41 text

CAKeyframeAnimation 0 1 Ξχϝʔγϣϯ͕มΘΔͦΕͧΕͷ෼ذ఺ɻ௨ա఺͕͋ΔΠϝʔδ 2 2

Slide 42

Slide 42 text

ॏྗɺিಥɺόωͳͲͷ෺ཧ๏ଇΛ༻͍Δ Ξχϝʔγϣϯ͸ʁ

Slide 43

Slide 43 text

UIDynamicAnimator

Slide 44

Slide 44 text

σϞ

Slide 45

Slide 45 text

·ͱΊ - ࢥ͍ͷ֎Ξχϝʔγϣϯͷ࣮ݱํ๏͸ଟ͍ - γϯϓϧͳ΋ͷ͸·ͣUIViewͷΫϥεϝιου, UIPropertyAnimator, UIDynamicAnimatorͰ࣮ݱͰ͖ͳ͍͔Λٙ͏ - ෳࡶͳ΋ͷ͸Core Animationɻෳ਺ͷΞχϝʔγϣϯΛάϧʔϐϯάͰ͖ͨ Γɺࡉ͔ͳλΠϛϯάௐ੔΋Ͱ͖Δ - ࿈ଓͨ͠Ξχϝʔγϣϯ͸ίʔϧόοΫɺΩʔϑϨʔϜɺbeginTimeௐ੔ͷ3 छྨ 45

Slide 46

Slide 46 text

໨తʹԠͯ͡ྑ͍ΞχϝʔγϣϯΛ࣮ݱ͠·͠ΐ͏ʂ

Slide 47

Slide 47 text

Your business network

Slide 48

Slide 48 text

ࢀߟࢿྉ - 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