From 0 to Material Motion: Creating Animations & Transitions //Droidcon Berlin '18

Slides for my talk from Droidcon Berlin 2018. This version also includes the basics of the newly released MotionLayout.

Implementing animations and transitions can be tricky - but that shouldn't hold you back! Animations and transitions can help the user keep track of what is going on on the screen and determine context. As a developer, looking at the Material Design Guidelines, a mockup by your designer or other inspirations can sometimes leave you wondering how to actually implement an animation or transition and "making it material". In this session, you will learn how to get from a recording or a rough sketch of animation or transition to implementing it using the Android SDK, and finally some tips about tweaking animations and transitions.

Transcript

1. 0 → Material Motion Creating Animations and Transitions @jossiwolf
2. Jossi Wolf High School Student Freelance Android Developer @jossiwolf
3. speakerdeck.com/jossiwolf @jossiwolf
4. @jossiwolf
7. @jossiwolf
8. „But why should we waste time on animations?“ @jossiwolf
9. Animations & Transitions help provide context for the users @jossiwolf
10. But… how do I do it (as fast as possible)? @jossiwolf
11. Break it down into small pieces @jossiwolf
12. @jossiwolf
13. @jossiwolf
14. 1. Circular „Unreveal“ 2. Unrevealed view moves to the next screen 3. Circular reveal from the center of the „circle view“ @jossiwolf
15. @jossiwolf
16. @jossiwolf
17. 1. Circular „Unreveal“ 2. Unrevealed view moves to the last screen 3. Circular reveal from the center of the „circle view“ @jossiwolf
18. Android Animation APIs Physics-based Animations Shared Element Transitions @jossiwolf MotionLayout
19. @jossiwolf
20. @jossiwolf
21. <android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.CollapsingToolbarLayout> @jossiwolf
22. <android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout> </android.support.constraint.ConstraintLayout> </android.support.design.widget.CollapsingToolbarLayout> @jossiwolf
23. <android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout> <ImageView android:id="@+id/collapsingToolbarBackground" android:layout_width="fill_parent" android:layout_height="match_parent" android:visibility="invisible"/> <RoundedColorView android:id="@+id/roundedImage" android:transitionName="@string/transitionName"/> </android.support.constraint.ConstraintLayout> </android.support.design.widget.CollapsingToolbarLayout> @jossiwolf
24. <android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout> <ImageView android:id="@+id/collapsingToolbarBackground" android:layout_width="fill_parent" android:layout_height="match_parent" android:visibility="invisible"/> <RoundedColorView android:id="@+id/roundedImage" android:transitionName="@string/transitionName"/> </android.support.constraint.ConstraintLayout> <android.support.v7.widget.Toolbar ...> </android.support.design.widget.CollapsingToolbarLayout> @jossiwolf
25. @jossiwolf
26. @jossiwolf
27. override fun onClickRecyclerViewItem(view: RoundedColorView) { Intent(this, SecondActivity::class.java).apply { val transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation( this@MainActivity, view, getString(R.string.transitionName)) startActivity(this, transitionActivityOptions.toBundle()) } } @jossiwolf
28. override fun onClickRecyclerViewItem(view: RoundedColorView) { Intent(this, SecondActivity::class.java).apply { val transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation( this@MainActivity, view, getString(R.string.transitionName)) startActivity(this, transitionActivityOptions.toBundle()) } } @jossiwolf
29. override fun onClickRecyclerViewItem(view: RoundedColorView) { Intent(this, SecondActivity::class.java).apply { val transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation( this@MainActivity, view, getString(R.string.transitionName)) startActivity(this, transitionActivityOptions.toBundle()) } } @jossiwolf
30. override fun onClickRecyclerViewItem(view: RoundedColorView) { Intent(this, SecondActivity::class.java).apply { val transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation( this@MainActivity, view, getString(R.string.transitionName)) startActivity(this, transitionActivityOptions.toBundle()) } } @jossiwolf
32. // Android Framework Method fun createCircularReveal(view: View, centerX: Int, centerY: Int, startRadius: Float, endRadius: Float): Animator { ... } @jossiwolf
33. @jossiwolf
34. fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) } @jossiwolf
35. fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) val center = roundedImage.getCenter() } @jossiwolf
36. fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) val center = roundedImage.getCenter() // create the animator for this view (the start radius is zero) val anim = ViewAnimationUtils.createCircularReveal(collapsingToolbarBackground, center.first.toInt(), center.second.toInt(), 0f, collapsingToolbarBackground.width.toFloat()) .apply { duration = 400 } } @jossiwolf
37. fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) val center = roundedImage.getCenter() // create the animator for this view (the start radius is zero) val anim = ViewAnimationUtils.createCircularReveal(collapsingToolbarBackground, center.first.toInt(), center.second.toInt(), 0f, collapsingToolbarBackground.width.toFloat()) .apply { duration = 400 } // make the view visible and start the animation collapsingToolbarBackground.visibility = View.VISIBLE anim.start() } @jossiwolf
38. window.sharedElementEnterTransition.setListener { onTransitionEnd { reveal() } } @jossiwolf
39. @jossiwolf
40. Making the Transition „Material“ @jossiwolf
41. @jossiwolf
42. Different Types of Easing @jossiwolf
43. Standard Easing @jossiwolf
44. Decelarate Easing @jossiwolf
45. Accelerate Easing @jossiwolf
46. “Real-world forces, like gravity, inspire an element’s movement along an arc rather than in a straight line.” @jossiwolf
47. <!–- TransitionSets allow to choreograph more complex transitions !--> <transitionSet android:transitionOrdering="together"> <changeBounds> <arcMotion android:maximumAngle="90" android:minimumHorizontalAngle="90" android:minimumVerticalAngle="0" /> </changeBounds> </transitionSet> @jossiwolf
48. // Create a new TransitionSet and inflate a transition from the resources val inSet = TransitionSet() val inflater = TransitionInflater.from(this) val transition = inflater.inflateTransition(R.transition.arc) // Add the inflated transition to the set and set duration and interpolator inSet.apply { addTransition(transition) duration = 380 // The shared element should not move in linear motion interpolator = AccelerateDecelerateInterpolator() } @jossiwolf
49. // Create a new TransitionSet and inflate a transition from the resources val inSet = TransitionSet() val inflater = TransitionInflater.from(this) val transition = inflater.inflateTransition(R.transition.arc) // Add the inflated transition to the set and set duration and interpolator inSet.apply { addTransition(transition) duration = 380 // The shared element should not move in linear motion interpolator = AccelerateDecelerateInterpolator() } @jossiwolf
50. // Create a new TransitionSet and inflate a transition from the resources val inSet = TransitionSet() val inflater = TransitionInflater.from(this) val transition = inflater.inflateTransition(R.transition.arc) // Add the inflated transition to the set and set duration and interpolator inSet.apply { addTransition(transition) duration = 380 // The shared element should not move in linear motion interpolator = AccelerateDecelerateInterpolator() } @jossiwolf
51. // Create a new TransitionSet and inflate a transition from the resources val inSet = TransitionSet() val inflater = TransitionInflater.from(this) val transition = inflater.inflateTransition(R.transition.arc) // Add the inflated transition to the set and set duration and interpolator inSet.apply { addTransition(transition) duration = 380 // The shared element should not move in linear motion interpolator = AccelerateDecelerateInterpolator() } @jossiwolf
52. @jossiwolf
53. @jossiwolf
54. @jossiwolf
55. @jossiwolf
56. @jossiwolf
57. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@layout/layout_start" motion:constraintSetEnd="@layout/layout_end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene> @jossiwolf
58. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@layout/layout_start" motion:constraintSetEnd="@layout/layout_end" motion:duration="1000" motion:interpolator="accelerate_decelerate"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene> @jossiwolf
59. @jossiwolf
60. <?xml version="1.0" encoding="utf-8"?> <Transition xmlns:motion="http://schemas.android.com/apk/res-auto"> <KeyFrameSet> <KeyPosition motion:framePosition="50" motion:percentY="0.25" motion:target="@+id/button" motion:type="screenRelative" /> </KeyFrameSet> </Transition>
62. Implementing Animations & Transitions can be tricky… @jossiwolf
63. …but it‘s worth it! (and MotionLayout makes things a lot easier) @jossiwolf
64. https://developer.android.com/training/animation/overview https://material.io/design/motion/understanding-motion.html https://github.com/googlesamples/android- ConstraintLayoutExamples https://medium.com/@camaelon/introduction-to-motionlayout- part-i-29208674b10d Reading On
65. medium.com/@jossiwolf twitter.com/jossiwolf github.com/jossiwolf speakerdeck.com/jossiwolf