アニメーション実践入門

Transcript

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

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

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

   ࣮૷্ͷ࢖͍෼͚ 3

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

   AnimationΛ࢖͏
 ɾUnity, Cocos2d, SpriteKit 4

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

   AnimationΛ࢖͏
 ɾUnity, Cocos2d, SpriteKit 5

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

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

8. ΞχϝʔγϣϯϒϩοΫ

9. animatableͳUIViewͷϓϩύςΟ - frame - bounds - center - transform -

   alpha etc 9 https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/ AnimatingViews/AnimatingViews.html

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

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

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

    view.layoutIfNeeded()ΛݺΜͰ΋Ξχϝʔγϣϯ͢Δ
 (layoutIfNeeded()͸Ξχϝʔγϣϯର৅ViewͰ͸ͳ͘ɺSuperViewʹରͯ͠ݺͿ) 12

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

14. ͦ͜ͰCore Animation

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

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

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

    Δ 17

18. Core Animationͱ͸ʁ

19. GPU OpenGL ES / Core Graphics Core Animation UIKit

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

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


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

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

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

25. 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

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

27. ϙΠϯτɾϋϚΓͲ͜ - CAAnimationͷdelegate͸ڧࢀর - CAAnimationGroupͰάϧʔϓԽͯ͠΋ɺݸผͷCABasicAnimationʹ durationΛ͚ͭΔ͜ͱ͕Մೳ - CABasicAnimationͰͷdelay͸ CACurrentMediaTime() +

    ஗ΒͤΔඵ਺ - Ξχϝʔγϣϯऴྃޙ΋׬ྃҐஔΛอͭ
 animation.removeOnCompletion = false
 animation.fillMode = kCAFillModeForwards 27

28. 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

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

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

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

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

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

34. UIPropertyAnimatorΛٙͬͯΈΔ

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

    PathʹԊͬͨΞχϝʔγϣϯ - ύʔςΟΫϧΤϑΣΫτ etc 35

36. Core Animation

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

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

39. ΩʔϑϨʔϜͱ͸ʁ

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

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

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

43. UIDynamicAnimator

44. σϞ

45. ·ͱΊ - ࢥ͍ͷ֎Ξχϝʔγϣϯͷ࣮ݱํ๏͸ଟ͍ - γϯϓϧͳ΋ͷ͸·ͣUIViewͷΫϥεϝιου, UIPropertyAnimator, UIDynamicAnimatorͰ࣮ݱͰ͖ͳ͍͔Λٙ͏ - ෳࡶͳ΋ͷ͸Core Animationɻෳ਺ͷΞχϝʔγϣϯΛάϧʔϐϯάͰ͖ͨ

    Γɺࡉ͔ͳλΠϛϯάௐ੔΋Ͱ͖Δ - ࿈ଓͨ͠Ξχϝʔγϣϯ͸ίʔϧόοΫɺΩʔϑϨʔϜɺbeginTimeௐ੔ͷ3 छྨ 45

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

47. Your business network

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