Intro to Material Motion

Material Motion is a toolkit for building responsive motion using Core Animation.

Learn more at https://github.com/material-motion

View the original deck at https://docs.google.com/presentation/d/1vXNpEYTMCXugFDNNBOWXBtQY9jHsB7FxxYa6BqpUnlM/pub?start=false&loop=false&delayms=3000

Transcript

1. An introduction to Material Motion by @featherless - engineering lead // April 10, 2017
2. About @featherless Software designer on the Material Design team I build shared libraries for Google’s iOS apps and the open source community
3. About @featherless Software designer on the Material Design team Previously: Facebook iOS app 2009 Nimbus iOS libraries 2011 Google Maps iOS app 2012 Material Components iOS libraries at Google 2013, 2014-2015
5. productive inspiring
6. Material Motion
8. engineering For considerations on motion design, visit our spec at material.io/guidelines/motion/
10. hard
11. hard
12. hard
13. hard
14. hard
15. hard get right
16. Challenges
17. Challenges
18. Jank is any stuttering, juddering or just plain halting that users see when an app isn't keeping up with the refresh rate. - jankfree.org
19. Challenges
20. Gestural interactions should feed their velocity into animations in a simulation of continuous momentum.
21. Gestural interactions should feed their velocity into animations in a simulation of continuous momentum. - from Facebook Paper’s tech talk youtu.be/OiY1cheLpmI?t=47m30s
22. Challenges
23. Don’t force users to wait for animations to complete before being allowed to take their next action.
24. Challenges
25. Animations don’t generally react well to breakpoints because breakpoints disconnect animations from time.
26. Animations don’t generally react well to breakpoints because breakpoints disconnect animations from time. We need real-time tooling designed specifically for motion.
27. Challenges
29. Intro to Material Motion
30. Intro to Material Motion How to make things move
31. Intro to Material Motion How to make things move How to build transitions
32. Intro to Material Motion How to make things move How to build transitions Closing thoughts
33. Common implementations of motion
34. one-off animation code scattered in view controllers Common implementations of motion
35. Interactions Constraints Intro to Material Motion How to make things move How to build transitions Closing thoughts
36. Interactions Constraints Intro to Material Motion How to make things move How to build transitions Closing thoughts
37. How to make things move
38. How to make things move An object that conforms to the Interaction protocol.
39. How to make things move
40. Gestural interactions How to make things move
41. How to make things move Gestural interactions Animated interactions
42. How to make things move Gestural interactions Animated interactions Compositional interactions
43. How to make things move Gestural
44. let draggable = Draggable() let rotatable = Rotatable() let scalable = Scalable() How to make things move Gestural
46. // Interaction: Draggable let view = UIView() How to make things move
47. // Interaction: Draggable let view = UIView() let runtime = MotionRuntime() How to make things move
48. // Interaction: Draggable let view = UIView() let runtime = MotionRuntime() let draggable = Draggable() How to make things move
49. // Interaction: Draggable let view = UIView() let runtime = MotionRuntime() let draggable = Draggable() runtime.add(draggable, to: view) How to make things move
50. // Interaction: Draggable let view = UIView() let runtime = MotionRuntime() runtime.add(Rotatable(), to: view) How to make things move
51. // Interaction: Draggable let view = UIView() let runtime = MotionRuntime() runtime.add(Scalable(), to: view) How to make things move
52. How to make things move
53. Use Core Animation. How to make things move
54. How to make things move Use Core Animation. Generic Interaction types.
55. Use Core Animation. Generic Interaction types. let spring = Spring<CGFloat>() How to make things move
56. Use Core Animation. Generic Interaction types. let spring = Spring<CGFloat>() let spring = Spring<CGPoint>() How to make things move
57. How to make things move Use Core Animation. Generic Interaction types. let spring = Spring<CGFloat>() let spring = Spring<CGPoint>() let tween = Tween<CGFloat>() let tween = Tween<CGPoint>()
59. // Interaction: Spring let view = UIView() let runtime = MotionRuntime() How to make things move
60. // Interaction: Spring let view = UIView() let runtime = MotionRuntime() let spring = Spring<CGPoint>() How to make things move
61. // Interaction: Spring let view = UIView() let runtime = MotionRuntime() let spring = Spring<CGPoint>() runtime.add(spring, How to make things move
62. // Interaction: Spring let view = UIView() let runtime = MotionRuntime() let spring = Spring<CGPoint>() runtime.add(spring, to: runtime.get(view).position) How to make things move
63. // Interaction: Spring let view = UIView() let runtime = MotionRuntime() let spring = Spring<CGPoint>() runtime.add(spring, to: runtime.get(view).position) How to make things move
64. Reactive programming
65. reactive Reactive programming
66. Reactive programming view: UIView view
67. Reactive programming view: UIView position: ReactiveProperty<CGPoint> position 50, 50 view
68. Reactive programming view: UIView position: ReactiveProperty<CGPoint> let subscription = position .subscribe { value in print(value) } position 50, 50 view Subscription
69. Reactive programming view: UIView position: ReactiveProperty<CGPoint> let subscription = position .subscribe { value in print(value) } Subscription Console 50, 50 position 50, 50 view
70. Reactive programming view: UIView position: ReactiveProperty<CGPoint> let subscription = position .subscribe { value in print(value) } position.value = .init(x: 10, y: 20) Subscription Console 50, 50 10, 20 position 50, 50 view
72. // Interaction: Spring let view = UIView() let runtime = MotionRuntime() let spring = Spring<CGPoint>() runtime.add(spring, to: runtime.get(view).position) How to make things move
73. // Interaction: Spring let view = UIView() let runtime = MotionRuntime() let spring = Spring<CGPoint>() runtime.add(spring, to: runtime.get(view).position) spring.destination How to make things move reactive property
74. // Interaction: Spring let view = UIView() let runtime = MotionRuntime() let spring = Spring<CGPoint>() runtime.add(spring, to: runtime.get(view).position) spring.destination.value = CGPoint(x: 75, y: 50) How to make things move
75. Reactive programming connect
76. Reactive programming runtime.add(spring, to: property) Spring() property
77. Reactive programming Spring system value runtime.add(spring, to: property) property
78. Reactive programming view runtime.add(Draggable(), to: view) Draggable()
79. Reactive programming Pan Gesture translation position view runtime.add(Draggable(), to: view)
80. Reactive programming composable
81. Reactive programming Draggable + Rotatable + Scalable =
82. Reactive programming Draggable + Rotatable + Scalable = DirectlyManipulable
83. Reactive programming Draggable + Rotatable + Scalable = DirectlyManipulable Draggable + Spring =
84. Reactive programming Draggable + Rotatable + Scalable = DirectlyManipulable Draggable + Spring = Tossable
86. // Interaction: Tossable let view = UIView() let runtime = MotionRuntime() How to make things move
87. // Interaction: Tossable let view = UIView() let runtime = MotionRuntime() let tossable = Tossable() How to make things move
88. // Interaction: Tossable let view = UIView() let runtime = MotionRuntime() let tossable = Tossable() runtime.add(tossable, to: view) How to make things move
89. // Interaction: Tossable let view = UIView() let runtime = MotionRuntime() let tossable = Tossable() runtime.add(tossable, to: view) // Under the hood: How to make things move
90. // Interaction: Tossable let view = UIView() let runtime = MotionRuntime() let tossable = Tossable() runtime.add(tossable, to: view) // Under the hood: // runtime.add(spring, to: view.position) // runtime.add(draggable, to: view) How to make things move
91. // Interaction: Tossable let view = UIView() let runtime = MotionRuntime() let tossable = Tossable() runtime.add(tossable, to: view) // Under the hood: // runtime.connect(draggable.finalVelocity, to: spring.initialVelocity) // runtime.add(spring, to: view.position) // runtime.add(draggable, to: view) How to make things move
92. Interactions Constraints Intro to Material Motion How to make things move How to build transitions Closing thoughts
93. Reactive programming Pan Gesture translation position view
94. Reactive programming Pan Gesture translation position view constraint xLocked
96. // Customizing interactions let draggable = Draggable() runtime.add(draggable, to: mochiView) How to make things move
97. // Customizing interactions - Constraints let draggable = Draggable() runtime.add(draggable, to: mochiView, constraints: { return $0.xLocked(to: 100) }) How to make things move
98. // Customizing interactions - Constraints let draggable = Draggable() runtime.add(draggable, to: mochiView, constraints: { return $0.xLocked(to: 100) .rubberBanded(below: -50, above: 50, maxLength: 25) }) How to make things move
99. Intro to Material Motion How to make things move How to build transitions Closing thoughts Short summary:
100. Intro to Material Motion How to make things move How to build transitions Closing thoughts Short summary: •
101. Intro to Material Motion How to make things move How to build transitions Closing thoughts Short summary: • •
102. Intro to Material Motion How to make things move How to build transitions Closing thoughts Short summary: • • •
103. Intro to Material Motion How to make things move How to build transitions Closing thoughts
104. Intro to Material Motion How to make things move How to build transitions Closing thoughts Using custom transitions Creating a transition
105. Intro to Material Motion How to make things move How to build transitions Closing thoughts Using custom transitions Creating a transition
106. // Custom transitions viewController How to build transitions
107. // Custom transitions viewController.transitionController transitionController How to build transitions
108. // Custom transitions viewController.transitionController.transition = PushBackTransition.self How to build transitions PushBackTransition
109. // Custom transitions viewController.transitionController.transition = PushBackTransition.self present(viewController, animated: true) How to build transitions
110. // Custom transitions viewController.transitionController.transition = PushBackTransition.self present(viewController, animated: true) dismiss(animated: true) How to build transitions
111. Intro to Material Motion How to make things move How to build transitions Closing thoughts Using custom transitions Creating a transition
112. // Building a transition class PushBackTransition: Transition { } How to build transitions
113. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { } }
114. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { } }
115. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { } } • • • •
116. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { let offscreen = ctx.height + ctx.fore.height / 2 let onscreen = ctx.center.y } }
117. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { let offscreen = ctx.height + ctx.fore.height / 2 let onscreen = ctx.center.y } } fore back fore
118. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { let offscreen = ctx.height + ctx.fore.height / 2 let onscreen = ctx.center.y } } fore back back fore back fore
119. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { let offscreen = ctx.height + ctx.fore.height / 2 let onscreen = ctx.center.y runtime.add(TransitionSpring(back: offscreen, fore: onscreen, direction: ctx.direction) to: ctx.fore.positionY) } }
120. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { let offscreen = ctx.height + ctx.fore.height / 2 let onscreen = ctx.center.y runtime.add(TransitionSpring(back: offscreen, fore: onscreen, direction: ctx.direction) to: ctx.fore.positionY) } } back fore
121. How to build transitions // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { let offscreen = ctx.height + ctx.fore.height / 2 let onscreen = ctx.center.y runtime.add(TransitionSpring(back: offscreen, fore: onscreen, direction: ctx.direction) to: ctx.fore.positionY) runtime.add(TransitionSpring(back: 1, fore: 0.95, direction: ctx.direction), to: ctx.back.scale) } }
122. // Building a transition class PushBackTransition: Transition { func willBegin(ctx: TransitionContext, runtime: MotionRuntime) { let offscreen = ctx.height + ctx.fore.height / 2 let onscreen = ctx.center.y runtime.add(TransitionSpring(back: offscreen, fore: onscreen, direction: ctx.direction) to: ctx.fore.positionY) runtime.add(TransitionSpring(back: 1, fore: 0.95, direction: ctx.direction), to: ctx.back.scale) } } How to build transitions
123. Reactive programming
124. Reactive programming reversible
125. Reactive programming reversible
126. Reactive programming position view
127. Reactive programming value position view Spring
128. Reactive programming value position view Spring destination
129. Reactive programming value position view Spring destination fore value
130. Reactive programming value position view Spring destination back value
131. Reactive programming value position view Spring destination direction
132. Reactive programming value position view Spring destination direction rewrite back fore
133. Reactive programming value position view Spring destination direction rewrite fore
134. Reactive programming value position view Spring destination direction rewrite back
135. Summary: Intro to Material Motion How to make things move How to build transitions Closing thoughts
136. Summary: • Intro to Material Motion How to make things move How to build transitions Closing thoughts
137. Intro to Material Motion How to make things move How to build transitions Closing thoughts Summary: • • reactive
138. Intro to Material Motion How to make things move How to build transitions Closing thoughts
139. responsive Intro to Material Motion How to make things move How to build transitions Closing thoughts
140. responsive • • • • • Intro to Material Motion How to make things move How to build transitions Closing thoughts
141. responsive • • • • • github.com/material-motion Intro to Material Motion How to make things move How to build transitions Closing thoughts
142. responsive • • • • • github.com/material-motion discord.gg/ZJyGXza Intro to Material Motion How to make things move How to build transitions Closing thoughts
143. github.com/material-motion discord.gg/ZJyGXza
144. Some quick background on Core Animation (CA) Core Animation
145. Some quick background on Core Animation (CA) • CA animations occur on the render server. Core Animation
146. Some quick background on Core Animation (CA) • CA animations occur on the render server. • The render server is independent from your app’s main thread. Core Animation
147. Some quick background on Core Animation (CA) • CA animations occur on the render server. • The render server is independent from your app’s main thread. This means CA animations aren’t subject to main-thread jank. Core Animation
148. Core Animation Some quick background on Core Animation (CA) • CA animations occur on the render server. • The render server is independent from your app’s main thread. This means CA animations aren’t subject to main-thread jank. Third-party animation libraries like Facebook’s POP operate on the main thread, which is why POP is often used hand-in-hand with AsyncDisplayKit.