From 0 to Material Motion: Creating Animations & Transitions

This talk was given at the GDG Android Munich June Meetup.

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
5. @jossiwolf
6. Animations & Transitions will improve your app‘s UX @jossiwolf
7. Break it down into small pieces @jossiwolf
8. @jossiwolf
9. @jossiwolf
10. 1. Circular „Unreveal“ 2. Unrevealed view moves to the next screen 3. Circular reveal from the center of the „circle view“ @jossiwolf
11. @jossiwolf
12. @jossiwolf
13. 1. Circular „Unreveal“ 2. Unrevealed view moves to the last screen 3. Circular reveal from the center of the „circle view“ @jossiwolf
14. Android Animation APIs Physics-based Animations Shared Element Transitions @jossiwolf MotionLayout
15. @jossiwolf
16. @jossiwolf
17. <android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.CollapsingToolbarLayout> @jossiwolf
18. <android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout> </android.support.constraint.ConstraintLayout> </android.support.design.widget.CollapsingToolbarLayout> @jossiwolf
19. <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
20. <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
21. @jossiwolf
22. @jossiwolf
23. 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
24. 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
25. 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
26. 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. // Android Framework Method fun createCircularReveal(view: View, centerX: Int, centerY: Int, startRadius: Float, endRadius: Float): Animator { ... } @jossiwolf
29. @jossiwolf
30. fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) } @jossiwolf
31. fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) val center = roundedImage.getCenter() } @jossiwolf
32. 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
33. 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
34. window.sharedElementEnterTransition.setListener { onTransitionEnd { reveal() } } @jossiwolf
35. @jossiwolf
36. Making the Transition „Material“ @jossiwolf
37. “Real-world forces, like gravity, inspire an element’s movement along an arc rather than in a straight line.” @jossiwolf
38. <!–- 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
39. // 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
40. // 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
41. // 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
42. // 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
43. @jossiwolf
44. Implementing Animations & Transitions can be tricky… @jossiwolf
45. …but it‘s worth it! @jossiwolf
46. medium.com/@jossiwolf twitter.com/jossiwolf github.com/jossiwolf speakerdeck.com/jossiwolf