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

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

Jiro Nagashima
June 30, 2016
2.9k

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

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

Jiro Nagashima

June 30, 2016
Tweet

Transcript

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

    View Slide

  2. Advances in UIKit
    Animations and Transitions
    Session 216

    View Slide

  3. www.wantedly.com/users/3153

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. let timing = UICubicTimingParameters(animationCurve: .easeIn)
    let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing)
    animator.addAnimations {
    circle.center.x = 800.0
    }
    animator.startAnimation()
    جຊతͳ࢖͍ํ

    View Slide

  9. https://developer.apple.com/videos/play/wwdc2016/216/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. UICubicTimingParameters()
    UICubicTimingParameters(animationCurve: .easeIn)
    UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0),
    controlPoint2: CGPoint(x:1.0,y:0.0))
    ΠʔδϯάͷΧελϚΠζ

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  27. UIViewPropertyAnimator
    iOS 10+

    View Slide