Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アニメーション実践入門

Adbff2a1447fbe53ca24a6943b3d80e4?s=47 haptaro
February 14, 2018

 アニメーション実践入門

第2回 iOS UI実装勉強会

Adbff2a1447fbe53ca24a6943b3d80e4?s=128

haptaro

February 14, 2018
Tweet

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