Advanced Animations with UIKit

Report from WWDC2017

Transcript

1. Advanced Animations with UIKit #CA.swift Report from WWDC2017 Ryu Ka, @Ameba, iOS/Android Engineer, Manager LBOFMJV
2. Why do we need “animations” ?
3. Why do we need “animations” ? “Design is not just what it looks like and feels like. Design is how it works” - Steve Jobs
4. UIView-based Animations
5. UIView-based Animations ɾDuration ɾDelay ɾAnimation options ɾView animations ɾSpring animation ɾCompletion callback
6. UIView-based Animations ɾDuration ɾDelay ɾAnimation options ɾView animations ɾSpring animation ɾCompletion callback
7. UIView-based Animations
8. UIView-based Animations ɾMassive source code ɾDifficult to customize animation options ɾCan not interact with use’s action or gesture ɾCan not interrupt animations ɾCan not reverse animations ɾComplicated to combine and coordinate multiple animations
9. UIView-based Animations ɾMassive source code ɾDifficult to customize animation options ɾCan not interact with use’s action or gesture ɾCan not interrupt animations ɾCan not reverse animations ɾComplicated to combine and coordinate multiple animations
10. UIViewPropertyAnimator VS UIView-based Animations
11. UIViewPropertyAnimator
12. UIViewPropertyAnimator ɾCustom timing ɾInteractive ɾInterruptible ɾResponsive
13. UIViewPropertyAnimator ɾCustom timing ɾInteractive ɾInterruptible ɾResponsive But need to change “Deployment Target” to iOS10.0 or separate animation by
14. UIViewPropertyAnimator ɾCustom timing ɾInteractive ɾInterruptible ɾResponsive But need to change “Deployment Target” to iOS10.0 or separate animation by
15. UIViewPropertyAnimator But Some Good News
16. UIViewPropertyAnimator But Some Good News
17. UIViewPropertyAnimator Basic
18. UIViewPropertyAnimator Basic
19. UIViewPropertyAnimator Basic
20. UIViewPropertyAnimator WWDC2016 Advances in UIKit Animations and Transitions Basic
21. UIViewPropertyAnimator Timing Curves % Progress = % Time
22. UIViewPropertyAnimator Timing Curves % Progress = % Time
23. UIViewPropertyAnimator Custom Curves
24. UIViewPropertyAnimator Custom Curves
25. UIViewPropertyAnimator Custom Curves
26. UIViewPropertyAnimator Sample
27. UIViewPropertyAnimator Sample
28. UIViewPropertyAnimator Sample
29. UIViewPropertyAnimator Interactive
30. UIViewPropertyAnimator Interactive
31. UIViewPropertyAnimator Interactive
32. UIViewPropertyAnimator Interactive
33. UIViewPropertyAnimator Interactive
34. UIViewPropertyAnimator Time Conversion
35. UIViewPropertyAnimator UIViewPropertyAnimator(duration: 1, curve: .easeOut) Time Conversion
36. UIViewPropertyAnimator Time Conversion
37. UIViewPropertyAnimator animator.pauseAnimation() Time Conversion
38. UIViewPropertyAnimator Time Conversion
39. UIViewPropertyAnimator animator.fractionComplete = fabs(translation.x) / 100 Time Conversion
40. UIViewPropertyAnimator Time Conversion
41. UIViewPropertyAnimator animator.continueAnimation(withTimingParameters: nil, durationFactor: 0) Time Conversion
42. UIViewPropertyAnimator Time Conversion
43. UIViewPropertyAnimator animator.continueAnimation(withTimingParameters: nil, durationFactor: 0) Time Conversion
44. UIViewPropertyAnimator Interruptible
45. UIViewPropertyAnimator Interruptible
46. UIViewPropertyAnimator Interruptible
47. UIViewPropertyAnimator Interruptible
48. UIViewPropertyAnimator Interruptible
49. UIViewPropertyAnimator What’s New in iOS 11
50. UIViewPropertyAnimator What’s New in iOS 11 ɾvar scrubsLinearly: Bool ɾvar pauseOnCompletion: Bool ɾCorner radius animation ɾCorner radius mask with “maskedCorners”
51. UIViewPropertyAnimator .pauseOnCompletion
52. UIViewPropertyAnimator .pauseOnCompletion
53. UIViewPropertyAnimator .pauseOnCompletion true false
54. UIViewPropertyAnimator CACornerMask
55. UIViewPropertyAnimator CACornerMask
56. UIViewPropertyAnimator CACornerMask -> topɾleft -> topɾright -> bottomɾleft -> bottomɾright
57. Demo
58. Demo UIPanGestureRecognizer UITapGestureRecognizer
59. Demo UIPanGestureRecognizer UITapGestureRecognizer
60. Demo Interact with Gestures
61. Demo Interact with Gestures
62. Demo Interact with Gestures
63. Demo Interact with Gestures
64. Demo Interact with Gestures
65. Demo Interact with Gestures
66. Demo Interact with Gestures
67. Demo Interact with Gestures
68. Demo Interact with Pan Gesture
69. Demo Interact with Pan Gesture
70. Demo Interact with Pan Gesture
71. Demo Interact with Pan Gesture
72. Demo Interact with Pan Gesture
73. Demo Interrupt with Tap Gesture
74. Demo Interrupt with Tap Gesture
75. Demo Interrupt with Tap Gesture
76. Demo Add Multiple Animators
77. Demo Add Multiple Animators
78. Demo View Frame Animator
79. Demo View Frame Animator
80. Demo Blur Animator
81. Demo Blur Animator
82. Demo Blur Animator
83. Demo Corner Radius Animator
84. Demo Corner Radius Animator NEW
85. Demo Corner Radius Animator NEW
86. Demo Corner Radius Animator NEW
87. Demo Corner Radius Animator OLD NEW
88. Demo KeyFrame Animator
89. Demo KeyFrame Animator
90. Demo KeyFrame Animator
91. Download demo source & build with Xcode9
92. Download demo source & build with Xcode9 IUUQTHJUIVCDPNLBOFMJV"EWBODFE"OJNBUJPOT
93. Download demo source & build with Xcode9 IUUQTHJUIVCDPNLBOFMJV"EWBODFE"OJNBUJPOT WWDC2017 Advanced Animation with UIKit
94. Thank you for listening!!!
95. Thank you for listening!!!