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

Exploring MotionLayout

Exploring MotionLayout

Talk exploring MotionLayout more in-depth from Chicago Roboto 2019.

Jossi Wolf

April 25, 2019
Tweet

More Decks by Jossi Wolf

Other Decks in Programming

Transcript

  1. fun setTransitions() { // 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() // Set a listener to create a circular reveal when the transition has ended setListener { onTransitionEnd { reveal() } } } val outSet = TransitionSet() .apply { addTransition(transition) duration = 380 interpolator = AccelerateDecelerateInterpolator() startDelay = 200 } // Set the shared element transitions of the activity window.sharedElementEnterTransition = inSet window.sharedElementExitTransition = outSet window.sharedElementReturnTransition = outSet } 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() } fun hideView() { val center = roundedImage.getCenter() // create the animator for this view (the end radius is zero) ViewAnimationUtils.createCircularReveal(collapsingToolbarBackground, center.first.toInt(), center.second.toInt(), collapsingToolbarBackground.width.toFloat(), 0f) .apply { duration = 400 addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator?) { super.onAnimationEnd(animation) collapsingToolbarBackground.visibility = View.INVISIBLE } }) start() } }
  2. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.3"

    motion:framePosition="50" motion:target="@id/button"/> </KeyFrameSet> </Transition> </MotionScene>
  3. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50"

    motion:percentY="0.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
  4. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50"

    motion:percentY="0.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
  5. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50"

    motion:percentY="1.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
  6. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50"

    motion:percentY="1.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
  7. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50"

    motion:percentY="1.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
  8. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50"

    motion:percentY="0.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
  9. <MotionScene> <Transition> <OnSwipe /> <ConstraintSet .../> <KeyFrameSet> <KeyPosition motion:motionTarget="@id/button" motion:framePosition="50"

    motion:percentY="0.25" motion:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> </MotionScene>
  10. 0 5 10 15 20 25 0 5 10 15

    20 25 30 35 40 45 SIZE
  11. <KeyFrameSet> <KeyCycle android:translationY="50dp" motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="3" motion:wavePeriod="1" motion:waveShape="sin" /> <KeyCycle

    android:translationY="90dp" motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" /> </KeyFrameSet>
  12. <KeyFrameSet> <KeyCycle android:translationY="50dp" motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="3" motion:wavePeriod="1" motion:waveShape="sin" /> <KeyCycle

    android:translationY="90dp" motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" /> </KeyFrameSet>
  13. <KeyFrameSet> <KeyCycle android:translationY="50dp" motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="3" motion:wavePeriod="1" motion:waveShape="sin" /> <KeyCycle

    android:translationY="90dp" motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" /> </KeyFrameSet>
  14. <KeyFrameSet> <KeyTimeCycle android:translationY="50dp" android:rotation="180" motion:framePosition="50" motion:motionTarget="@id/button" motion:waveOffset="3" motion:wavePeriod="1" motion:waveShape="sin" />

    <KeyTimeCycle android:translationY="90dp" motion:framePosition="100" motion:motionTarget="@id/button" motion:waveOffset="0" motion:wavePeriod="0" motion:waveShape="sin" /> </KeyFrameSet>