Physics Based UI for Fun and Profit

A discussion of using physics to drive user interfaces on Android presented at Droidcon Montreal 2015.

Transcript

1. Physics based UI for Fun and Profit
2. Overview ▪ Material Design guidelines around motion ▪ Predefined and Dynamic Animations ▪ How a physics system complements Material Design ▪ Brief detour into physics ▪ Rebound Library Walk thru ▪ Comparison of Rebound and Android SDK Animation Techniques ▪ Physics animation techniques
3. Material Design
4. Authentic Motion
5. Consistent choreography
6. Delightful Details
7. Predefined vs Dynamic
8. Predefined Animations
9. Time Driven | Imperative
10. Interpolators can provide realistic feeling curves
12. Discrete user interactions
13. Transitions
15. Dynamic Animations
16. Goal Driven | Declarative
18. Continuous user interactions
19. Retargetable
21. Physics Deterministic
22. A Physics system complements Material Design ▪ Authentic motion with a declarative programming model ▪ Consistent Choreography ▪ Delightful to the user
23. Delightful Details
24. Brief Detour into Physics
25. Newton’s Laws of Motion
26. Inertia
27. f = ma
28. For every action there is an equal and opposite reaction.
29. Hooke’s Law
30. f = -kx
31. http://gafferongames.com/game-physics/spring-physics
32. Rebound
33. A simple library that accurately models spring dynamics for the purpose of driving physical animations.
34. Born out of prototyping efforts for Facebook Home
35. Brief trip down memory lane...
39. Design Goals ▪ Not a replacement for a full physics engine ▪ Lightweight and cheap to integrate ▪ Not opinionated about rendering ▪ Low level building block to construct higher level components from
40. More interesting as a pattern than as a framework * * but it’s a not a bad implementation of the pattern
41. What can it help you build? ▪ delightful transitions ▪ toggles ▪ pagers ▪ scrollers ▪ Anything that involves goal driven animation with inertia…
43. Hello World
45. Core API ▪ SpringSystem ▪ Spring ▪ Listeners ▪ Utilities
46. SpringSystem ▪ maintains a set of springs ▪ provides hooks for acting before and after each integration ▪ Is driven by a looper until equilibrium is achieved on all the springs it maintains ▪ allows synchronous and time choreographed simulation
47. Spring ▪ A model of the motion of a spring ▪ accepts listeners and notifies of lifecycle events ▪ accepts a configuration object for defining spring tension and friction ▪ accepts a velocity and/or end value
48. Listeners SpringListener ▪ onSpringActivate ▪ onSpringUpdate ▪ onSpringAtRest ▪ onSpringEndStateChange SpringSystemListener ▪ onBeforeIntegrate ▪ onAfterIntegrate
49. Architecture
50. SpringSystem Spring SpringSystemListener SpringListener creates/observes observes observes SpringLooper drives Concrete Classes SteppingLooper SynchronousLooper ChoreographerAndroidSpringLooper LegacyAndroidSpringLooper Methods onSpringActivate onSpringUpdate onSpringAtRest onSpringEndStateChange Methods onBeforeIntegrate onAfterIntegrate SpringConfig SpringConfigRegistry holds has Methods setCurrentValue setEndValue setVelocity
51. Utilities ▪ SpringConfig provides tension and friction values to a spring ▪ SpringUtil provides helper functions for clamping and interpolating values in ranges ▪ ChoreographerCompat polyfills the Choreographer timing API on pre-JellyBean
52. More Utilities ▪ SpringConfiguratorView provides an Android View for live tuning your SpringConfigs while the app is running ▪ AnimationQueue and SpringChain can help you create cascading effects
53. SpringConfiguratorView SpringChain
54. Comparative Example
61. Tips & Tricks
62. Use 0 to 1 toggle Springs and interpolate
64. Use springs to indirectly manipulate views
66. Use a common Spring to converge animations
68. Use SpringSystemListener to apply constraints
70. Origami Integration
73. Future Plans ▪ Release more components built on Rebound ▪ Iterate and Improve integration with Origami ▪ Create more examples of Rebound physics complementing Material design patterns
74. Get the Code dependencies { compile 'com.facebook.rebound:rebound:0.3.7' } http://facebook.github.io/rebound or
75. There’s a JavaScript version too! npm install rebound https://github.com/facebook/rebound-js or
76. Thank you! @will_bailey wb@instagram.com