动画插值器效果.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>
总结
简单实现了各种插值器展示的效果,方便大家选取插值器
网友评论