Meaningful Motion: Circular Reveal with Shared Elements

A lightning talk about implementing a circular reveal effect with shared element transitions on Android.

https://medium.com/@jossiwolf/meaningful-motion-circular-reveal-shared-elements-ea495b99adf4

Transcript

1. Meaningful Motion Circular Reveal & Shared Elements @jossiwolf
2. Jossi Wolf High School Student Android Developer @jossiwolf
3. speakerdeck.com/jossiwolf @jossiwolf
4. @jossiwolf
5. @jossiwolf
6. IMPROVE YOUR UX WITH ANIMATIONS AND TRANSITIONS! @jossiwolf
7. BREAK IT DOWN INTO SMALL PIECES @jossiwolf
8. @jossiwolf
9. @jossiwolf
10. <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
11. <android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.CollapsingToolbarLayout> @jossiwolf
12. <android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout> </android.support.constraint.ConstraintLayout> </android.support.design.widget.CollapsingToolbarLayout> @jossiwolf
13. <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
14. <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
15. @jossiwolf
16. @jossiwolf
17. 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
18. 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
19. 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
20. 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
21. @jossiwolf
22. // Android Framework Method fun createCircularReveal(view: View, centerX: Int, centerY: Int, startRadius: Float, endRadius: Float): Animator { ... } @jossiwolf
23. @jossiwolf
24. @jossiwolf
25. fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) } @jossiwolf
26. fun reveal() { collapsingToolbarBackground.setBackgroundColor(Color.CYAN) val center = roundedImage.getCenter() } @jossiwolf
27. 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
28. 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
29. window.sharedElementEnterTransition.setListener { onTransitionEnd { reveal() } } @jossiwolf
30. @jossiwolf
31. Making The Transition “Material” @jossiwolf
32. “Real-world forces, like gravity, inspire an element’s movement along an arc rather than in a straight line.” @jossiwolf
33. <transitionSet android:transitionOrdering="together"> <changeBounds> <arcMotion android:maximumAngle="90" android:minimumHorizontalAngle="90" android:minimumVerticalAngle="0" /> </changeBounds> </transitionSet> @jossiwolf
34. // 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
35. // 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
36. // 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
37. // 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
38. @jossiwolf
39. medium.com/@jossiwolf twitter.com/jossiwolf github.com/jossiwolf speakerdeck.com/jossiwolf