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

iOS 10 時代のアニメーション / Introduction to UIViewPropertyAnimator

03c0e11ea6f2a3e08b3c46db5877c8e1?s=47 Jiro Nagashima
June 30, 2016
2.8k

iOS 10 時代のアニメーション / Introduction to UIViewPropertyAnimator

2016-06-30 "WWDC16. Meetup @Wantedly with 日本経済新聞社" での共有内容です。
http://wantedly.connpass.com/event/33967/

03c0e11ea6f2a3e08b3c46db5877c8e1?s=128

Jiro Nagashima

June 30, 2016
Tweet

Transcript

  1. iOS 10 ࣌୅ͷΞχϝʔγϣϯ ʙUIViewPropertyAnimatorͷ঺հʙ Jiro Nagashima @hedjirog

  2. Advances in UIKit Animations and Transitions Session 216

  3. www.wantedly.com/users/3153

  4. UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

  5. UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

  6. جຊతͳ࢖͍ํ https://developer.apple.com/videos/play/wwdc2016/216/

  7. • 2ඵؒͰ xํ޲ 0 → 800 ʹҠಈ • ঃʑʹ଎͘ͳΔ (ease-in)

    جຊతͳ࢖͍ํ
  8. let timing = UICubicTimingParameters(animationCurve: .easeIn) let animator = UIViewPropertyAnimator(duration: 2.0,

    timingParameters: timing) animator.addAnimations { circle.center.x = 800.0 } animator.startAnimation() جຊతͳ࢖͍ํ
  9. https://developer.apple.com/videos/play/wwdc2016/216/

  10. UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

  11. animator.pauseAnimation() animator.fractionComplete = 0.5 animator.startAnimation() https://developer.apple.com/videos/play/wwdc2016/216/

  12. animator.pauseAnimation() animator.fractionComplete = 0.5 animator.startAnimation()

  13. animator.pauseAnimation() animator.fractionComplete = 0.5 animator.startAnimation()

  14. animator.pauseAnimation() animator.fractionComplete = 0.5 animator.startAnimation() • Ξχϝʔγϣϯͷਐḿͷ౓߹͍ΛมߋՄೳ • λΠϛϯάؔ਺ʹैͬͯಈ࡞Λ࠶։Մೳ ਐḿ౓߹͍ͷมߋ

  15. UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

  16. ํ๏1ɿ ɹҰ࣌ఀࢭ͔ͯ͠Βٯํ޲ʹಈ͔͢ ٯํ޲ʹಈ͔͢ animator.pauseAnimation() animator.isReversed = true animator.startAnimation()

  17. ํ๏2ɿ ɹಈ࡞ͤͨ͞··ٯํ޲ʹಈ͔͢ ٯํ޲ʹಈ͔͢ animator.isReversed = true

  18. ํ๏3ɿ ɹٯํ޲ʹಈ͘ΞχϝʔγϣϯΛ௥Ճ͢Δ ٯํ޲ʹಈ͔͢ animator.addAnimations { circle.center.x = 0.0 }

  19. ํ๏3ɿ ɹٯํ޲ʹಈ͘ΞχϝʔγϣϯΛ௥Ճ͢Δ ɹ※ ͜ͷࡍɺՃࢉॲཧʹΑͬͯ׈Β͔ʹΞχϝʔγϣϯ͢Δ ٯํ޲ʹಈ͔͢ https://developer.apple.com/videos/play/wwdc2014/236/

  20. UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

  21. let timing = UICubicTimingParameters(animationCurve: .easeIn) let animator = UIViewPropertyAnimator(duration: 2.0,

    timingParameters: timing) animator.addAnimations { circle.center.x = 800.0 } animator.startAnimation() ΠʔδϯάͷΧελϚΠζ
  22. let timing = UICubicTimingParameters(animationCurve: .easeIn) let animator = UIViewPropertyAnimator(duration: 2.0,

    timingParameters: timing) animator.addAnimations { circle.center.x = 800.0 } animator.startAnimation() ΠʔδϯάͷΧελϚΠζ
  23. UICubicTimingParameters() UICubicTimingParameters(animationCurve: .easeIn) UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0), controlPoint2: CGPoint(x:1.0,y:0.0)) ΠʔδϯάͷΧελϚΠζ

  24. UICubicTimingParameters() UICubicTimingParameters(animationCurve: .linear) UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0), controlPoint2: CGPoint(x:1.0,y:0.0)) ΠʔδϯάͷΧελϚΠζ https://developer.apple.com/reference/uikit/uicubictimingparameters

  25. UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

  26. ײͨ͜͡ͱ • ΠϯλϥΫςΟϒͳૢ࡞ͱ૬ੑ͕ྑ͍ • ࣗ༝ʹಈ࡞Λதஅ͢Δ͜ͱ͕Մೳ • ࣗવͳಈ࡞ͷ࠶։͕Մೳ • ঢ়ଶͷ؅ཧɾૢ࡞͕ϥΫʹ •

    ΠʔδϯάΛΑΓॊೈʹఆٛՄೳʹ
  27. UIViewPropertyAnimator iOS 10+