Animated UI state change Part 3. Add Fling with the help of dynamicanimation library.

Yuriy Skul
2 min readAug 20, 2020

--

Fling and autoscrolling to the idle state

There is one little thing I have not implemented yet. If user takes off his finger during dragging when the winter-summer transformation is in intermediate state it has no fling animation or autoscrolling up to the end.

For proper solution there is no need to create any article — standard SDK scrolling classes have correct implementation of it with the help of Scroller or Overscroller and VelocityTracker very easy to explore.
Let’s do it another way, more fast and simple, with the help of
dynamicAnimation library.

Starter code is the solution code from previous part.
Solution code of this article.

Part 1: animated UI state change based on clipping path for canvas.
Part 2
: add child view with custom scrolling behavior.
Part 3: current story.
Part 4
: RecyclerView item with custom scrolling behavior.
Part 5
: Add parallax effect -coming soon
Part 6
: Add snowing animation to the winter state in progress

Step 1.

Add to the gradle file dynamicanimation library:
implementation ‘androidx.dynamicanimation:dynamicanimation:$verion’

Define new constant and fields in AnimatedLayout.java:

Step 2

Refactor onTouchEvent()method: move everything from the case MotionEvent.ACTION_UP into the new method:applyIdleState();
and then update onTouchEvent() .

To compute current velocity I use VelocityTracker. If current velocity is lesser then mCurrentMinFlingVelocityPx the proper solution is to run animation instead of fling. There is some difference between animation and fling. Animation should have increase interpolation at start and decrease at the end but fling has just friction that causes decreasing the velocity value during fling animation. I will use fling in such case just for fast solution instead of proper way with the help of animation object.

Step 3. Handle fling.

Inside init() method add to mFling field anonymous DynamicAnimation.OnAnimationEndListener() .

For any case if fling is canceled when there is no dragging we still have to put layout into full summer or winter states.

That is all.
Thanks for reading.
Solution code.

--

--