Material Animations - A Deep Dive into Motion Design and Animation

A deep dive into the world of animation in Material Design. We'll cover what Material Design is, how natural motion plays a role in its principles and how to create meaningful animations that exhibit the essence of Material Design aims for.

Transcript

1. MATERIAL ANIMATIONS A Deep Dive into Motion Design and Animation twitter.com/jerrellmardis google.com/+jerrellmardis
2. ABOUT ME • Android Engineer at Salesforce.com • Started out as an iOS developer • Have been developing Android apps for 6+ years • GDG Chicago West & Windy City DevCon organizer
3. WHAT IS MATERIAL DESIGN ?
4. IT IS NOT A Style or Theme
5. IT IS A Design Philosophy
6. –Matías Duarte (VP, Material Design) “A system for designing across platforms and screen sizes. With the real utility and usability of surfaces. A system that puts motion at the heart of design.”
7. WHY IS MOTION IMPORTANT ?
8. MOTION PROVIDES • Context between Views • Hints for gestures • Hierarchical and spatial relationships between different elements • Character and polish
9. github.com/nickbutcher/plaid
10. HOW DOES MATERIAL MOVE ?
11. material.google.com/motion/material-motion.html RESPONSIVE
12. material.google.com/motion/material-motion.html NATURAL
13. material.google.com/motion/material-motion.html AWARE
14. material.google.com/motion/material-motion.html INTENTIONAL
15. HOW DO WE CREATE NATURAL MOTION ?
16. INTERPOLATORS
17. WHAT’S AN INTERPOLATOR ? Maps a value representing the elapsed fraction of an animation to a value that represents the interpolated fraction.
18. CUSTOM INTERPOLATOR public class CustomInterpolator implements Interpolator {
 
 @Override
 public float getInterpolation(float v) {
 return (float) Math.pow(v, 4f);
 } }
19. ACCELERATE DECELERATE INTERPOLATOR public class AccelerateDecelerateInterpolator implements Interpolator {
 
 @Override
 public float getInterpolation(float v) {
 return (float)(Math.cos((v + 1) * PI) / 2.0f) + 0.5f; }
 }
20. COMMON DURATIONS • 300ms for typical transitions • 375ms for large/complex transitions • 225ms for objects entering the screen • 195ms for objects leaving the screen
21. COMMON DURATIONS • 300ms for typical transitions • 375ms for large/complex transitions • 225ms for objects entering the screen LinearOutSlowInInterpolator • 195ms for objects leaving the screen
22. COMMON DURATIONS • 300ms for typical transitions • 375ms for large/complex transitions • 225ms for objects entering the screen LinearOutSlowInInterpolator • 195ms for objects leaving the screen FastOutLinearInInterpolator
23. MATERIAL ANIMATIONS
24. MEANINGFUL ANIMATIONS
25. WHAT WE WILL BUILD
26. Window Content
27. Window Content Shared Elements
28. Window Content Shared Elements View Properties
29. WINDOW TRANSITION ORDER
30. Exit WINDOW TRANSITION ORDER
31. Exit Enter WINDOW TRANSITION ORDER
32. Exit Enter Return WINDOW TRANSITION ORDER
33. Exit Enter Reenter Return WINDOW TRANSITION ORDER
34. SHARED ELEMENT TRANSITIONS • Use their own set of transitions states (i.e Enter, Exit, Reenter and Return) • Follows the same order as Window Transitions • Are drawn in the DecorView’s ViewOverlay • Transition API utilizes Scenes to hold view properties to animate between
35. SHARED ELEMENT TRANSITIONS
36. SHARED ELEMENT TRANSITIONS • All animations are executed in the destination Activity • The initial state of the Shared Element is positioned on top of the destination Activity’s View Hierarchy • The Shared Element is animated from its initial state to its final state • Animations are reversed when returning to the previous Activity
37. REVIEW…WHAT WE WILL BUILD
38. STEPS TO SUCCESS
39. 1. Enable activity transitions STEPS TO SUCCESS
40. 1. Enable activity transitions 2. Add the explode exit transition to the initial Activity STEPS TO SUCCESS
41. 1. Enable activity transitions 2. Add the explode exit transition to the initial Activity 3. Share the selected view STEPS TO SUCCESS
42. 1. Enable activity transitions 2. Add the explode exit transition to the initial Activity 3. Share the selected view 4. Add the slide enter tranisition to the destination Activity STEPS TO SUCCESS
43. STEPS TO SUCCESS 1. Enable activity transitions 2. Add the explode exit transition to the initial Activity 3. Share the selected view 4. Add the slide enter tranisition to the destination Activity 5. Add the FAB transform transition
44. SHOW ME CODE
45. ENABLE ACTIVITY TRANSITIONS <style name="AppTheme">
 <item name=“android:windowActivityTransitions”>true</item> ...
 </style>
46. <style name="AppTheme">
 <item name=“android:windowActivityTransitions”>true</item> ...
 </style> <style name="AppTheme" parent=“@android:style/Theme.Material"> ...
 </style> ENABLE ACTIVITY TRANSITIONS
47. <style name="AppTheme">
 <item name=“android:windowActivityTransitions”>true</item> ...
 </style> <style name="AppTheme" parent=“@android:style/Theme.Material"> ...
 </style> <style name="AppTheme" parent=“@android:style/Theme.AppCompat"> ...
 </style> ENABLE ACTIVITY TRANSITIONS
48. <!-- ../transition/main_activity_exit.xml -->
 <explode /> ADD THE EXIT TRANSITION
49. <!-- ../transition/main_activity_exit.xml -->
 <explode /> <!-- ../values/styles.xml -->
 <style name="AppTheme.Main">
 <item name="android:windowExitTransition">@transition/main_activity_exit</item>
 </style> ADD THE EXIT TRANSITION
50. <!-- ../transition/main_activity_exit.xml -->
 <explode /> <!-- ../values/styles.xml -->
 <style name="AppTheme.Main">
 <item name="android:windowExitTransition">@transition/main_activity_exit</item>
 </style> <!-- AndroidManifest.xml -->
 <activity android:name=".MainActivity"
 android:theme="@style/AppTheme.Main">
 <intent-filter>
 <action android:name="android.intent.action.MAIN"/>
 <category android:name="android.intent.category.LAUNCHER"/>
 <category android:name="android.intent.category.DEFAULT"/>
 </intent-filter>
 </activity> ADD THE EXIT TRANSITION
51. // ../MainActivity.java
 ActivityCompat.startActivity(this, intent,
 ActivityOptionsCompat.makeSceneTransitionAnimation(this, pairs.toArray(new Pair[pairs.size()])).toBundle()); ADD THE EXIT TRANSITION
53. SO WHAT WENT WRONG ?
55. Before After
56. // ../MainActivity.java
 List<Pair<View, String>> pairs = new ArrayList<>();
 
 View decor = getWindow().getDecorView();
57. // ../MainActivity.java
 List<Pair<View, String>> pairs = new ArrayList<>();
 
 View decor = getWindow().getDecorView();
 
 View statusBar = decor.findViewById(android.R.id.statusBarBackground);
 pairs.add(Pair.create(statusBar, statusBar.getTransitionName()));

58. // ../MainActivity.java
 List<Pair<View, String>> pairs = new ArrayList<>();
 
 View decor = getWindow().getDecorView();
 
 View statusBar = decor.findViewById(android.R.id.statusBarBackground);
 pairs.add(Pair.create(statusBar, statusBar.getTransitionName()));
 
 View navBar = decor.findViewById(android.R.id.navigationBarBackground);
 if (navBar != null) {
 pairs.add(Pair.create(navBar, navBar.getTransitionName()));
 }

59. // ../MainActivity.java
 List<Pair<View, String>> pairs = new ArrayList<>();
 
 View decor = getWindow().getDecorView();
 
 View statusBar = decor.findViewById(android.R.id.statusBarBackground);
 pairs.add(Pair.create(statusBar, statusBar.getTransitionName()));
 
 View navBar = decor.findViewById(android.R.id.navigationBarBackground);
 if (navBar != null) {
 pairs.add(Pair.create(navBar, navBar.getTransitionName()));
 }
 
 pairs.add(Pair.create((View) binding.toolbar, binding.toolbar.getTransitionName()));
61. SHARE THE SELECTED VIEW <!-- ../transition/detail_activity_shared_element.xml --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
 <transitionSet>
 <targets>
 <target android:targetId="@id/item" />
 </targets>
 <changeBounds>
 <arcMotion android:maximumAngle="90"/>
 </changeBounds>
 </transitionSet>
 </transitionSet>
62. SHARE THE SELECTED VIEW <!-- ../transition/detail_activity_shared_element.xml --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
 <transitionSet>
 <targets>
 <target android:targetId="@id/item" />
 </targets>
 <changeBounds>
 <arcMotion android:maximumAngle="90"/>
 </changeBounds>
 </transitionSet>
 </transitionSet> <!-- ../values/styles.xml -->
 <style name="AppTheme.Details">
 <item name=“android:windowSharedElementEnterTransition"> @transition/detail_activity_shared_element </item>
 </style>
63. SHARE THE SELECTED VIEW <!-- ../layout/grid_item.xml -->
 <layout xmlns:android="http://schemas.android.com/apk/res/android">
 
 <data>
 <variable name="presenter" type="com.jerrellmardis.materialanimations.PresenterImpl"/>
 <variable name="backgroundColor" type="Integer"/>
 <variable name="id" type="Integer"/>
 </data>
 
 <View
 android:id="@+id/item"
 android:layout_width="match_parent"
 android:layout_height="144dp"
 android:background="@{backgroundColor}"
 android:foreground="?attr/selectableItemBackground"
 android:onClick="@{(view) -> presenter.onItemSelected(view, id, backgroundColor)}"
 android:transitionName="@{@string/shared_element_transition_name + id}"/>
 
 </layout>
64. SHARE THE SELECTED VIEW // ../MainActivity.java List<Pair<View, String>> pairs = buildTransitionPairs(view);
65. SHARE THE SELECTED VIEW // ../MainActivity.java List<Pair<View, String>> pairs = buildTransitionPairs(view);
 
 Intent intent = new Intent(this, DetailActivity.class);
 // pass the background color to set on the shared element view in the {@code DetailActivity}
 intent.putExtra(DetailActivity.EXTRA_BG_COLOR, backgroundColor);
 // pass the id (position of the view in the ItemAdapter) of the view to use to build the // unique transitionName in the {@code DetailActivity}
 intent.putExtra(DetailActivity.EXTRA_ID, id);
66. SHARE THE SELECTED VIEW // ../MainActivity.java List<Pair<View, String>> pairs = buildTransitionPairs(view);
 
 Intent intent = new Intent(this, DetailActivity.class);
 // pass the background color to set on the shared element view in the {@code DetailActivity}
 intent.putExtra(DetailActivity.EXTRA_BG_COLOR, backgroundColor);
 // pass the id (position of the view in the ItemAdapter) of the view to use to build the unique transitionName in the {@code DetailActivity}
 intent.putExtra(DetailActivity.EXTRA_ID, id);
 
 ActivityCompat.startActivity(this, intent,
 ActivityOptionsCompat.makeSceneTransitionAnimation(this, pairs.toArray(new Pair[pairs.size()])).toBundle());
67. SHARE THE SELECTED VIEW // ../DetailActivity.java // bind the id and background color to the View
 ActivityDetailBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_detail);
 binding.setId(getIntent().getIntExtra(EXTRA_ID, 0));
 binding.item.setBackgroundColor(getIntent().getIntExtra(EXTRA_BG_COLOR, 0));
68. SHARE THE SELECTED VIEW // ../DetailActivity.java // bind the id and background color to the View
 ActivityDetailBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_detail);
 binding.setId(getIntent().getIntExtra(EXTRA_ID, 0));
 binding.item.setBackgroundColor(getIntent().getIntExtra(EXTRA_BG_COLOR, 0)); <!-- ../layout/activity_detail.xml —> 
 <View android:id="@+id/item"
 android:layout_width="match_parent"
 android:layout_height="200dp"
 android:layout_gravity="top"
 android:transitionName="@{@string/shared_element_transition_name + id}"/>
70. NOT AGAIN…
71. // ../DetailActivity.java // postpone the transition until the view is ready to be drawn
 postponeEnterTransition();
72. // ../DetailActivity.java // postpone the transition until the view is ready to be drawn
 postponeEnterTransition();
 
 final View decor = getWindow().getDecorView();
 decor.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
 @Override
 public boolean onPreDraw() {
 decor.getViewTreeObserver().removeOnPreDrawListener(this);
 startPostponedEnterTransition();
 return true;
 }
 });
74. <!-- ../transition/detail_activity_enter.xml --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
 <slide android:duration="@android:integer/config_shortAnimTime"
 android:interpolator="@android:interpolator/linear_out_slow_in"
 android:slideEdge="bottom"/>
 <fade/>
 </transitionSet> ADD THE ENTER TRANSITION
75. <!-- ../transition/detail_activity_enter.xml --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
 <slide android:duration="@android:integer/config_shortAnimTime"
 android:interpolator="@android:interpolator/linear_out_slow_in"
 android:slideEdge="bottom"/>
 <fade/>
 </transitionSet> <!-- ../values/styles.xml -->
 <style name="AppTheme.Details">
 <item name=“android:windowSharedElementEnterTransition"> @transition/detail_activity_shared_element </item>
 <item name="android:windowEnterTransition">@transition/detail_activity_enter</item> </style> ADD THE ENTER TRANSITION
77. ADD THE FAB TRANSITION <!-- ../transition/fab_transition.xml -->
 <changeBounds xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="@android:integer/config_mediumAnimTime"
 android:interpolator="@android:interpolator/accelerate_decelerate">
 <arcMotion android:maximumAngle="50"/>
 </changeBounds>
78. ADD THE FAB TRANSITION <!-- ../transition/fab_transition.xml -->
 <changeBounds xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="@android:integer/config_mediumAnimTime"
 android:interpolator=“@android:interpolator/accelerate_decelerate"> <arcMotion android:maximumAngle="50"/>
 </changeBounds> // on FAB click, load the fab transition add the FabTransitionCallback
 Transition transition = TransitionInflater.from(view.getContext()).inflateTransition(R.transition.fab_transition);
 transition.addListener(new FabTransitionCallback(fab, revealContainer, revealTextView));
79. ADD THE FAB TRANSITION <!-- ../transition/fab_transition.xml -->
 <changeBounds xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="@android:integer/config_mediumAnimTime"
 android:interpolator=“@android:interpolator/accelerate_decelerate"> <arcMotion android:maximumAngle="50"/>
 </changeBounds> // on FAB click, load the fab transition add the FabTransitionCallback
 Transition transition = TransitionInflater.from(view.getContext()).inflateTransition(R.transition.fab_transition);
 transition.addListener(new FabTransitionCallback(fab, revealContainer, revealTextView));
 
 // 1. saves the current property values of all views in the rootView
 // 2. adds an OnPreDrawListener which is triggered on the next layout pass
 TransitionManager.beginDelayedTransition(rootView, transition);
80. ADD THE FAB TRANSITION <!-- ../transition/fab_transition.xml -->
 <changeBounds xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="@android:integer/config_mediumAnimTime"
 android:interpolator="@android:interpolator/accelerate_decelerate">
 <arcMotion android:maximumAngle="50"/>
 </changeBounds> // on FAB click, load the fab transition add the FabTransitionCallback
 Transition transition = TransitionInflater.from(view.getContext()).inflateTransition(R.transition.fab_transition);
 transition.addListener(new FabTransitionCallback(fab, revealContainer, revealTextView));
 
 // 1. saves the current property values of all views in the rootView
 // 2. adds an OnPreDrawListener which is triggered on the next layout pass
 TransitionManager.beginDelayedTransition(rootView, transition);
 
 // 3. triggers the OnPreDrawListener created in TransitionManager.beginDelayedTransition
 // 4. OnPreDrawListener retrieves the new property values
 // 5. the system calculates the before/after property values and runs the animations
 fab.setLayoutParams(new FrameLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT, CENTER));
81. ADD THE FAB TRANSITION // ../FabTransitionCallback.java @Override
 public void onTransitionEnd(Transition transition) {
 // create and start the circular reveal animation
 Animator anim = ViewAnimationUtils.createCircularReveal(revealContainer, cx, cy, 0, radius);
 anim.setInterpolator(new AccelerateDecelerateInterpolator());
 anim.addListener(new AnimatorListenerAdapter() {
 @Override
 public void onAnimationEnd(Animator animation) {
 // show the text
 revealTextView .animate() .scaleX(1) .scaleY(1) .setInterpolator(new BounceInterpolator()) .setDuration(500) .start();
 }
 });
 anim.start();
 }
82. ADD THE FAB TRANSITION // ../FabTransitionCallback.java @Override
 public void onTransitionEnd(Transition transition) {
 // create and start the circular reveal animation
 Animator anim = ViewAnimationUtils.createCircularReveal(revealContainer, cx, cy, 0, radius);
 anim.setInterpolator(new AccelerateDecelerateInterpolator());
 anim.addListener(new AnimatorListenerAdapter() {
 @Override
 public void onAnimationEnd(Animator animation) {
 // show the text
 revealTextView .animate() .scaleX(1) .scaleY(1) .setInterpolator(new BounceInterpolator()) .setDuration(500) .start();
 }
 });
 anim.start(); 
 // reset the FAB's position and hide it
 fab.setLayoutParams(originalParams);
 fab.setVisibility(View.GONE);
 }
83. SUCCESS
84. THANK YOU! • Material Design Spec material.google.com • Material Animations App Source goo.gl/BSmNyZ • Interpolator Playground App Source goo.gl/YUVIN1 • Nick Butcher’s Plaid App Source goo.gl/d0KIuZ • Animating Views Using Scenes & Transitions goo.gl/gnegWI twitter.com/jerrellmardis google.com/+jerrellmardis