Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From 0 to Material Motion: Creating Animations ...

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.

Jossi Wolf

June 27, 2018
Tweet

More Decks by Jossi Wolf

Other Decks in Programming

Transcript

  1. 1. Circular „Unreveal“ 2. Unrevealed view moves to the next

    screen 3. Circular reveal from the center of the „circle view“ @jossiwolf
  2. 1. Circular „Unreveal“ 2. Unrevealed view moves to the last

    screen 3. Circular reveal from the center of the „circle view“ @jossiwolf
  3. 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
  4. 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
  5. 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
  6. 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
  7. // Android Framework Method fun createCircularReveal(view: View, centerX: Int, centerY:

    Int, startRadius: Float, endRadius: Float): Animator { ... } @jossiwolf
  8. 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
  9. 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
  10. “Real-world forces, like gravity, inspire an element’s movement along an

    arc rather than in a straight line.” @jossiwolf
  11. <!–- 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
  12. // 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
  13. // 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
  14. // 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
  15. // 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