Physics UI - Droidcon London 2015

Transcript

1. Physics UI Filipe Abrantes & Will Bailey
2. public void translatePre11(@NonNull View view, @NonNull PointF to) {
 TranslateAnimation translateAnimation =
 new TranslateAnimation(view.getLeft(), view.getTop(),
 to.x, to.y);
 // translateAnimation.setFillAfter(true);
 translateAnimation.setDuration(300);
 translateAnimation.setInterpolator(new OvershootInterpolator());
 view.setAnimation(translateAnimation);
 translateAnimation.start();
 }
3. public void translate(@NonNull View view, @NonNull PointF to) {
 view.animate()
 .x(to.x)
 .setDuration(300)
 .setInterpolator(new OvershootInterpolator());
 }
4. public void translate(@NonNull View view, @NonNull PointF to) {
 view.animate().x(to.x);
 }
5. Overview • What is UI physics? • Why do UI physics matter? • Theory • Practical Implementation • Designing motion
6. What is UI Physics?
7. Model of Motion
8. Games Applications
9. Why do UI physics matter?
10. Direct Manipulation
13. Consistency
16. Declarative Programming Model
17. Delight
19. Complementary to Material Design • Authentic Motion • Consistent Choreography • Delightful Details
20. Springs
21. Theory
22. “Hooke's law: the force F needed to extend or compress a spring by some distance X is proportional to that distance.”
23. “Hooke's law: the force F needed to extend or compress a spring by some distance X is proportional to that distance.”
24. “Damping: is an influence within or upon an oscillatory system that has the effect of reducing, restricting or preventing its oscillations. In physical systems, damping is produced by processes that dissipate the energy stored in the oscillation.”
25. “Damping: is an influence within or upon an oscillatory system that has the effect of reducing, restricting or preventing its oscillations. In physical systems, damping is produced by processes that dissipate the energy stored in the oscillation.”
26. Under-damped Critically-damped Over-damped
28. Demo (spring response)
29. Demo (spring response)
30. Bounciness & Speed
32. Demo (spring response w/ speed/ bounciness)
33. Demo (spring response)
34. Solving Springs
35. Numerical Solver Analytical Solver Interpolator
36. Numerical Solver • Euler • RK4 • Verlet
37. http://gafferongames.com/game-physics/integration-basics/
38. Under-damped Critically-damped Over-damped Analytical Solver
39. https://en.wikipedia.org/wiki/Damping
40. Interpolator • Use the analytical solver as the base • Calculate a time multiplier so it fits in a 0…1 interval • position < 1px away from target • velocity < 1px/16msec 0 1
41. Implementation
42. Approaches • Fake Physics • Full Physics Engine • Pseudo Physics
43. Declarative Model Driven Animation
44. Rebound
45. A simple library that accurately models spring dynamics for the purpose of driving physical animations.
46. Design Goals • Not a full physics engine (springs!) • Lightweight and easy to integrate • Focus on the model, not opinionated about rendering • Low level building block
47. What can it help you build? ▪ delightful transitions ▪ toggles ▪ pagers ▪ scrollers ▪ anything that involves goal driven animation with physics driven motion…
50. Hello World
52. Core API • SpringSystem • Spring • Listeners
53. 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
54. Techniques
55. A spring with 0 tension can be used to model inertial decay
56. mReboundViewPager .setSpringConfig( SpringConfig.fromOrigamiTensionAndFriction( 0, 0.6));
57. Use a 0 - 1 switch Spring and Interpolate
59. Use a common spring to converge multiple animations
61. Use springs to apply constraints
62. @Override
 public void onAfterIntegrate(BaseSpringSystem springSystem) {
 if (!mTouching) {
 // If we are free scrolling then check to see if we have 
 // moved out of bounds and trigger the appropriate 
 // rubber-banding.
 constrainToBounds(true);
 }
 }
63. Other Interesting Libraries • Gravitas (physics engine built for Letterplex)
 https://github.com/iamralpht/gravitas • Backboard (API around Rebound from Tumblr)
 https://github.com/tumblr/Backboard • POP (iOS)
 https://github.com/facebook/pop
64. Designing with Motion
69. Motion Prototyping Tools • Origami • Framer • Principle • After Effects
70. Take aways
71. Thank you!