アニメーション実践入門

第2回 iOS UI実装勉強会

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