MotionLayout 动画插值器效果

动画插值器效果.gif

MotionLayout 是一种布局类型，可帮助您管理应用中的运动和微件动画

MotionScene: 是一个 XML 资源文件，其中包含相应布局的所有运动描述

Transition 定义动画的效果

Transition 中的 motionInterpolator 属性用来定义动画的运动插值器

• easeInOut 轻松进出效果
• easeIn 轻松进入效果
• linear 线性效果
• bounce 反弹效
• overshoot 超出效果
• anticipate 预料效果

实现

1.MotionScene 文件

<?xml version="1.0" encoding="utf-8"?>

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        android:id="@+id/transition_ball"
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000"
        motion:motionInterpolator="bounce">

        <!-- bounce 反弹插值器  -->

<!--        <KeyFrameSet>-->
<!--            <KeyAttribute-->
<!--                android:alpha="0.7"-->
<!--                android:scaleX="1.5"-->
<!--                android:scaleY="1.5"-->
<!--                motion:framePosition="20"-->
<!--                motion:motionTarget="@+id/ball" />-->
<!--            <KeyAttribute-->
<!--                android:alpha="1"-->
<!--                android:scaleX="1"-->
<!--                android:scaleY="1"-->
<!--                motion:framePosition="35"-->
<!--                motion:motionTarget="@+id/ball" />-->
<!--            <KeyAttribute-->
<!--                android:alpha="0.7"-->
<!--                android:scaleX="1.5"-->
<!--                android:scaleY="1.5"-->
<!--                motion:framePosition="50"-->
<!--                motion:motionTarget="@+id/ball" />-->
<!--            <KeyAttribute-->
<!--                android:alpha="1"-->
<!--                android:scaleX="1"-->
<!--                android:scaleY="1"-->
<!--                motion:framePosition="65"-->
<!--                motion:motionTarget="@+id/ball" />-->
<!--            <KeyAttribute-->
<!--                android:alpha="0.7"-->
<!--                android:scaleX="1.5"-->
<!--                android:scaleY="1.5"-->
<!--                motion:framePosition="80"-->
<!--                motion:motionTarget="@+id/ball" />-->
<!--            <KeyAttribute-->
<!--                android:alpha="1"-->
<!--                android:scaleX="1"-->
<!--                android:scaleY="1"-->
<!--                motion:framePosition="95"-->
<!--                motion:motionTarget="@+id/ball" />-->

<!--        </KeyFrameSet>-->
        <!--        点击事件-->
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@+id/ball" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/ball"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.15"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.5" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/ball"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.85"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.5" />


    </ConstraintSet>

</MotionScene>

...其他效果xml 参考底部源码,其实替换motion:motionInterpolator=""属性就可以实现

2.xml代码

<?xml version="1.0" encoding="utf-8"?>

<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="1:bounce插值器(反弹)" />

        <androidx.constraintlayout.motion.widget.MotionLayout
            android:id="@+id/motionLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            app:layoutDescription="@xml/scene_ball">

            <ImageView
                android:id="@+id/ball"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@mipmap/iv_ball"
                android:text="测试数据" />
        </androidx.constraintlayout.motion.widget.MotionLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="2:easeInOut插值器(轻松进出)" />

        <androidx.constraintlayout.motion.widget.MotionLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            app:layoutDescription="@xml/scene_ball_easeinout">

            <ImageView
                android:id="@+id/ball_easeinout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@mipmap/iv_ball"
                android:text="测试数据" />
        </androidx.constraintlayout.motion.widget.MotionLayout>
        <!-- 移动的控件 -->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="3:easeIn插值器(轻松进)" />

        <androidx.constraintlayout.motion.widget.MotionLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            app:layoutDescription="@xml/scene_ball_easein">

            <ImageView
                android:id="@+id/ball_easeIn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@mipmap/iv_ball"
                android:text="测试数据" />
        </androidx.constraintlayout.motion.widget.MotionLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="4:linear插值器(水平)" />

        <androidx.constraintlayout.motion.widget.MotionLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            app:layoutDescription="@xml/scene_ball_linear">

            <ImageView
                android:id="@+id/ball_linear"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@mipmap/iv_ball"
                android:text="测试数据" />
        </androidx.constraintlayout.motion.widget.MotionLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="5:overshoot插值器(过度射击)" />

        <androidx.constraintlayout.motion.widget.MotionLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            app:layoutDescription="@xml/scene_ball_overshoot">

            <ImageView
                android:id="@+id/ball_overshoot"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@mipmap/iv_ball"
                android:text="测试数据" />
        </androidx.constraintlayout.motion.widget.MotionLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="6:anticipate插值器(预料)" />

        <androidx.constraintlayout.motion.widget.MotionLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            app:layoutDescription="@xml/scene_ball_anticipate">

            <ImageView
                android:id="@+id/ball_anticipate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@mipmap/iv_ball"
                android:text="测试数据" />
        </androidx.constraintlayout.motion.widget.MotionLayout>

    </LinearLayout>
</androidx.core.widget.NestedScrollView>

总结

简单实现了各种插值器展示的效果,方便大家选取插值器

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址