Animations + Physics = Cool App Transitions

Presentation slide for Droidcon Berlin,2017 and GDG BlrDroid Devfest.
I have talked about the newly introduced physics-based animations in Android which you can use to build some really cool effects.

Medium blog:
https://medium.com/@richa.khanna/introduction-to-physics-based-animations-in-android-1be27e468835
Github demo: https://github.com/richakhanna/physicsbasedanimation

Transcript

2. What is Physics-based animation? • Introduced in Google IO 2017. • Driven by force. • Mimics the laws of physics. • Based on the force, velocities and values for the animation are updated at each frame. • It comes to rest when the force reaches equilibrium.
3. Earlier: ObjectAnimator
4. Let’s see the difference: ObjectAnimator & Physics-based
5. How Physics-based animation is different? • Natural • Reactive • Less visual disruption
6. Getting Started Add the physics-based support library as a dependency to your build.gradle file: dependencies { //physics based animation library compile "com.android.support:support-dynamic-animation:25.4.0" } The library provides two Animation classes: SpringAnimation and FlingAnimation.
7. Spring Animation How to bounce a view gracefully using Spring Animation?
8. Spring Animation Two Spring Animation examples: • Animate translate using Spring Animation. • Animate rotate and translate using Spring Animation.
9. Animate Translate Using Spring Animation
10. Spring Animation Properties of Spring: Spring Force: It defines the properties of the spring being used in the animation. • It allows you to control the properties of a spring by changing its damping ratio, stiffness, and its resting position.
11. Spring Animation 1. Damping ratio : • No. of oscillations before coming to rest. • You can change the bounciness of the spring by simply setting the damping ratio. • A damping ratio of zero would oscillate infinitely. • A very high damping ratio will stop animating very quickly.
12. Spring Animation Damping ratio : It can range from high bouncy to no bouncy constants. DAMPING_RATIO_HIGH_BOUNCY = 0.2f; // more oscillations DAMPING_RATIO_MEDIUM_BOUNCY = 0.5f; DAMPING_RATIO_LOW_BOUNCY = 0.75f; DAMPING_RATIO_NO_BOUNCY = 1f; // very few oscillations
13. Spring Animation 2. Stiffness : • How fast the oscillation is, ie, how quickly the object returns to its resting position. • High stiffness would quickly bring back the object to its resting position. • Very low stiffness would slowly bring back the object to its resting position, like a loose suspension bounces back and forth slowly.
14. Spring Animation Stiffness : It can range from high to very low stiffness constants. STIFFNESS_HIGH = 10_000f; STIFFNESS_MEDIUM = 1500f; STIFFNESS_LOW = 200f; STIFFNESS_VERY_LOW = 50f;
15. Spring Animation 3. Resting position : That position where you want the spring force to reach the equilibrium.
16. Animate Translate Using Spring Animation mSpringTranslationXAnim = new SpringAnimation(mViewToBeAnimated, new FloatPropertyCompat<View>("translationX") { @Override public float getValue(View view) { return view.getTranslationX(); } @Override public void setValue(View view, float value) { view.setTranslationX(value); } });
17. Animate Translate Using Spring Animation SpringForce springForceX = new SpringForce(0f); springForceX.setStiffness(SpringForce.STIFFNESS_MEDIUM); springForceX.setDampingRatio(SpringForce.DAMPING_RATIO_HIGH_BOUNCY); mSpringTranslationXAnim.setSpring(springForceX);
18. Animate Translate Using Spring Animation SpringForce springForceX = new SpringForce(0f); springForceX.setStiffness(SpringForce.STIFFNESS_MEDIUM); springForceX.setDampingRatio(SpringForce.DAMPING_RATIO_HIGH_BOUNCY); mSpringTranslationXAnim.setSpring(springForceX);
19. Animate Translate Using Spring Animation SpringForce springForceX = new SpringForce(0f); springForceX.setStiffness(SpringForce.STIFFNESS_MEDIUM); springForceX.setDampingRatio(SpringForce.DAMPING_RATIO_HIGH_BOUNCY); mSpringTranslationXAnim.setSpring(springForceX);
20. Animate Translate Using Spring Animation SpringForce springForceX = new SpringForce(0f); springForceX.setStiffness(SpringForce.STIFFNESS_MEDIUM); springForceX.setDampingRatio(SpringForce.DAMPING_RATIO_HIGH_BOUNCY); mSpringTranslationXAnim.setSpring(springForceX);
21. Animate Translate Using Spring Animation private View.OnTouchListener onTouchListener = new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { ... case MotionEvent.ACTION_UP: mSpringTranslationXAnim.start(); break; } return true; } };
22. Animate Translate Using Spring Animation private View.OnTouchListener onTouchListener = new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { ... case MotionEvent.ACTION_UP: mSpringTranslationXAnim.start(); break; } return true; } };
23. Spring Animation Two Spring Animation examples: • Animate translate using Spring Animation. • Animate rotate and translate using Spring Animation.
24. Animate Rotate & Translate Using Spring Animation
25. Animate Rotate & Translate Using Spring Animation To achieve this, we need to apply : • A rotational spring force on each individual head, • Along with a translation animation to slide this whole list in.
26. Animate Rotate & Translate Using Spring Animation SpringForce springForce = new SpringForce(INITIAL_ROTATION); springForce.setStiffness(SpringForce.STIFFNESS_LOW); springForce.setDampingRatio(SpringForce.DAMPING_RATIO_HIGH_BOUNCY);
27. Animate Rotate & Translate Using Spring Animation SpringAnimation slideAnim = new SpringAnimation(mLinearLayout, new FloatPropertyCompat<View>("translationX") { @Override public float getValue(View view) { return view.getTranslationX(); } @Override public void setValue(View view, float value) { view.setTranslationX(value); } }, 0); slideAnim.getSpring().setStiffness(500).setDampingRatio(0.4f); slideAnim.setStartValue(400).start();
28. Animate Rotate & Translate Using Spring Animation for (int i = 0; i < mLinearLayout.getChildCount(); i++) { View child = mLinearLayout.getChildAt(i); SpringAnimation rotationAnim; rotationAnim = new SpringAnimation(child, new FloatPropertyCompat<View>("rotation") { @Override public float getValue(View view) { return view.getRotation(); } @Override public void setValue(View view, float value) { view.setRotation(value); } }); rotationAnim.setSpring(springForce).setStartValue(-30).start(); }
29. Animate Rotate & Translate Using Spring Animation Awesome, we are done!
30. Fling Animation How to fling a view gracefully using Fling Animation?
31. Fling Animation
32. Some facts about Fling animation: • The force behind Fling Animation is a friction force. • Fling animation starts with the initial velocity and usually that’s the velocity of your gesture. • Fling animation continues with the momentum it received from your gesture, and then gradually comes to a stop. • Friction force is proportional to the velocity. Fling Animation
33. Fling Animation Setting three params to configure Fling Animation. 1. StartVelocity 2. Setting Minimum and Maximum value 3. Friction
34. Fling Animation 1. StartVelocity • Set startVelocity for Fling Animation as by default the start velocity is set to zero pixels/ sec. • If we don’t, it would stop the animation in next frame. • So, define a start velocity to ensure the animation does not end right away.
35. Fling Animation 2. Setting Minimum and Maximum value • When you want to animate the property value within a certain range. • Fling Animation will end immediately as soon as it reaches either min/max value.
36. Fling Animation 2. Friction • Set friction to control the rate of slowing down of animation.
37. Fling Animation Set up Gesture listener to receive fling gesture events. And now we are ready to create a Fling Animation.
38. private GestureDetector.OnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() { ... @Override public boolean onFling(MotionEvent downEvent, MotionEvent moveEvent, float velocityX, float velocityY) { FlingAnimation flingX = new FlingAnimation(mViewTobeFlung, DynamicAnimation.TRANSLATION_X); flingX.setStartVelocity(velocityX) .setMinValue(MIN_TRANSLATION) //min translationX property .setMaxValue(maxTranslationX) //max translationX property .setFriction(FRICTION) .start(); return true; }}; Fling Animation
39. private GestureDetector.OnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() { ... @Override public boolean onFling(MotionEvent downEvent, MotionEvent moveEvent, float velocityX, float velocityY) { FlingAnimation flingX = new FlingAnimation(mViewTobeFlung, DynamicAnimation.TRANSLATION_X); flingX.setStartVelocity(velocityX) .setMinValue(MIN_TRANSLATION) //min translationX property .setMaxValue(maxTranslationX) //max translationX property .setFriction(FRICTION) .start(); return true; }}; Fling Animation
40. private GestureDetector.OnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() { ... @Override public boolean onFling(MotionEvent downEvent, MotionEvent moveEvent, float velocityX, float velocityY) { FlingAnimation flingX = new FlingAnimation(mViewTobeFlung, DynamicAnimation.TRANSLATION_X); flingX.setStartVelocity(velocityX) .setMinValue(MIN_TRANSLATION) //min translationX property .setMaxValue(maxTranslationX) //max translationX property .setFriction(FRICTION) .start(); return true; }}; Fling Animation
41. private GestureDetector.OnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() { ... @Override public boolean onFling(MotionEvent downEvent, MotionEvent moveEvent, float velocityX, float velocityY) { FlingAnimation flingX = new FlingAnimation(mViewTobeFlung, DynamicAnimation.TRANSLATION_X); flingX.setStartVelocity(velocityX) .setMinValue(MIN_TRANSLATION) //min translationX property .setMaxValue(maxTranslationX) //max translationX property .setFriction(FRICTION) .start(); return true; }}; Fling Animation
42. private GestureDetector.OnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() { ... @Override public boolean onFling(MotionEvent downEvent, MotionEvent moveEvent, float velocityX, float velocityY) { FlingAnimation flingX = new FlingAnimation(mViewTobeFlung, DynamicAnimation.TRANSLATION_X); flingX.setStartVelocity(velocityX) .setMinValue(MIN_TRANSLATION) //min translationX property .setMaxValue(maxTranslationX) //max translationX property .setFriction(FRICTION) .start(); return true; }}; Fling Animation
43. private GestureDetector.OnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() { ... @Override public boolean onFling(MotionEvent downEvent, MotionEvent moveEvent, float velocityX, float velocityY) { FlingAnimation flingX = new FlingAnimation(mViewTobeFlung, DynamicAnimation.TRANSLATION_X); flingX.setStartVelocity(velocityX) .setMinValue(MIN_TRANSLATION) //min translationX property .setMaxValue(maxTranslationX) //max translationX property .setFriction(FRICTION) .start(); return true; }}; Fling Animation
44. Chained Springs
45. final SpringAnimation animFirstFollowerX = new SpringAnimation(mViewFirstFollower, DynamicAnimation.TRANSLATION_X); final SpringAnimation animFirstFollowerY = new SpringAnimation(mViewFirstFollower, DynamicAnimation.TRANSLATION_Y); Chained Springs
46. mViewLead.setOnTouchListener(new View.OnTouchListener() { float lastX, lastY; @Override public boolean onTouch(View v, MotionEvent motionEvent) { if (motionEvent.getActionMasked() == MotionEvent.ACTION_MOVE) { float deltaX = motionEvent.getRawX() - lastX; float deltaY = motionEvent.getRawY() - lastY; mViewLead.setTranslationX(deltaX + mViewLead.getTranslationX()); mViewLead.setTranslationY(deltaY + mViewLead.getTranslationY()); animFirstFollowerX.animateToFinalPosition( mViewLead.getTranslationX()); animFirstFollowerY.animateToFinalPosition( mViewLead.getTranslationY()); } lastX = motionEvent.getRawX(); lastY = motionEvent.getRawY(); return true; } }); Chained Springs
47. Chained Springs final SpringAnimation animFirstFollowerX = new SpringAnimation(mViewFirstFollower, DynamicAnimation.TRANSLATION_X); final SpringAnimation animFirstFollowerY = new SpringAnimation(mViewFirstFollower, DynamicAnimation.TRANSLATION_Y); final SpringAnimation animSecondFollowerX = new SpringAnimation(mViewSecondFollower, DynamicAnimation.TRANSLATION_X); final SpringAnimation animSecondFollowerY = new SpringAnimation(mViewSecondFollower, DynamicAnimation.TRANSLATION_Y);
48. Chained Springs animFirstFollowerX.addUpdateListener( new DynamicAnimation.OnAnimationUpdateListener() { @Override public void onAnimationUpdate(DynamicAnimation animation, float value, float velocity) { animSecondFollowerX.animateToFinalPosition(value); } });
49. animFirstFollowerY.addUpdateListener( new DynamicAnimation.OnAnimationUpdateListener() { @Override public void onAnimationUpdate(DynamicAnimation animation, float value, float velocity) { animSecondFollowerY.animateToFinalPosition(value); } }); Chained Springs
50. Conclusion With the new physics-based animation system, • we don’t need to provide duration or start and end values for creating a physics based animation. • driven by force. • create cool animations that mimic the law of physics with just a few lines of code!
51. Conclusion
52. References & Resources • Android Animations Spring to Life (Google I/O ’17) https://www.youtube.com/watch?v=BNcODK-Ju0g&t=959s • Android Developer Doc https://developer.android.com/guide/topics/graphics/physics-based- animation.html • My Medium article : Introduction to Physics-based animations https://medium.com/@richa.khanna/introduction-to-physics-based- animations-in-android-1be27e468835 • Demo App https://github.com/richakhanna/physicsbasedanimation
53. Thank You Q&A