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

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

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+