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.
In this series, you will learn how to transform MotionLayout components.
The purpose of this part is:
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.
Open up app -> res -> layout -> state_1:
Trnsforformation rotation in state_1:
Trnsforformation scale in state_1:
Trnsforformation alpha in state_1:
Trnsforformation background color use CustomAttribute in activity_main_scene.xml:
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:
2. Open up app -> res -> drawable -> New -> VectorAsset:
3. With VectorAsset add two image:
4. In activity_main and state_1 in ImagFilterView set initial image and alternate and set overlay = “false”:
5. In activity_motion_scene.xml change backgroundColor to crossfade and the customColorValue to customFloatValue:
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.