Part 3: MotionLayout — Transformation of components.

How to transform components of MotionLayout.

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 4: KeyPosition — changing animation path.

Transformer.

In this series, you will learn how to transform MotionLayout components.

The purpose of this part is:

TransformationAnimation.

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 TransformationAnimation.

Step 2

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

Path and state_1.

Step 3

Trnsforformation rotation in state_1:

rotation = “360”.

Step 4

Trnsforformation scale in state_1:

scaleX = “2”, scaleY = “2”.

Step 5

Trnsforformation alpha in state_1:

alpha = “0.5”.

Step 6

Trnsforformation background color use CustomAttribute in activity_main_scene.xml:

Change background color.

To understand KeyFrameSet read an article by one of the creators MotionLayout.

Step 7 — ImageFilterView

Trnsforformation background image with ImageFilterView use CustomAttribute in activity_main_scene.xml:

1. In activity_main and state_1 transform View to ImageFilterView:

Transform View to ImageFilterView.

2. Open up app -> res -> drawable -> New -> VectorAsset:

app -> res -> drawable -> New -> VectorAsset.

3. With VectorAsset add two image:

Two Images.

4. In activity_main and state_1 in ImagFilterView set initial image and alternate and set overlay = “false”:

Change activity_main and state_1.

5. In activity_motion_scene.xml change backgroundColor to crossfade and the customColorValue to customFloatValue:

crossfade.

6. Launch:

ImageFilterView.

Conclusion:

To transform a component you can use all attributes available to the component. <<<Experiment>>>

In the next article you will create your first animation using MotionLayout and layout files (states) and KeyPosition.