Part 4: KeyPosition — changing animation path.

How to change animation path using KeyPosition.

The article describes a non-standard method for creating animations, but the best solution for creating animations is to use the MotionLayout editor, which you can learn more about here.

This is a series of 4 consecutive parts dedicated to creating animations using MotionLayout with layout files.

Part 1: MotionLayout with layout files.

Part 2: Сreating animation with MotionLayout and layout files.

Part 3: MotionLayout — Transformation of components.

Photo by William Karl on Unsplash

In this part, you will learn how to change the animation path using KeyPosition.

The purpose of this part is:

KeyPosition.

Step 1

Create FirstAnimation by example or clone a project with GitHub and open FirstAnimation.

Or even easier: clone the project with GitHub and open a ready-made MovingCurveAnimation.

Step 2

Open up app -> res -> layout -> activity_main, add attribute motionDebug = “SHOW_PATH”:

app -> res -> layout -> activity_main.

motionDebug = “NO_DEBUG” vs motionDebug = “SHOW_PATH”.

Step 3

Open up app -> res -> layout -> state_1:

Path and state_1.

Step 4

Change constraints:

Change constraints.

Step 5

Change the curve. For this we need to open app -> res -> xml -> activity_main_scene.xml, and add attribute pathMotionArc:

app -> res -> xml -> activity_main_scene.xml, pathMotionArc = “startVertical”.

Step 6

In this step, for a more explicit effect, we will increase the animation duration to 3 seconds, and add attribute motionInterpolator:

1000 -> 3000.

motionInterpolator: linear, easyOut, easyIn, easyInOut.

Step 7

Using KeyPosition to change animation path:

KeyPosition with pathMotionArc.

Conclusion:

In order to change the animation paths you need to use KeyPosition which is beautifully written in an article by one of the creators MotionLayout. <<<Experiment>>>