Search code examples
androidandroid-motionlayoutandroid-motionscene

Apply bezier curve to MotionLayout at runtime


I have used this article to create an expand/collapse cardview component. Right now, the expand/collapse animation is linear. I want to apply a bezier curve to the animation so that the animation will be ease-in-out. I have googled a lot and couldn't find out how it can be added dynamically at runtime. I have seen it applying from the MotionScene xml file. But could not find any material which does this at runtime. Please let me know how this can be added at runtime. Thanks very much.


Solution

  • Transition has a method setInterpolatorInfo so in the article you reference where they type transaction.duration = 1000 You should be able to add one of the below.

     val INTERPOLATOR_REFERENCE_ID = -2
     val SPLINE_STRING = -1
     val EASE_IN_OUT = 0;
     val EASE_IN = 1;
     val EASE_OUT = 2;
     val LINEAR = 3;
     val BOUNCE = 4;
     val OVERSHOOT = 5;
     val ANTICIPATE = 6;
     
     //Android Custom Interpolators 
     transaction.setInterpolatorInfo(INTERPOLATOR_REFERENCE_ID , null, R.interpolator.???? )
     // css style string   
     transaction.setInterpolatorInfo(SPLINE_STRING , "cubic(0,0,0,1.0)", 0 )
     // pre baked 
     transaction.setInterpolatorInfo( OVERSHOOT , null, 0 )