android MotionLayout动画

### 如何在 Android 中使用 MotionLayout 创建动画 #### 定义布局文件中的 `MotionLayout` `MotionLayout` 是一种特殊的布局管理器，继承自 `ConstraintLayout`。这意味着可以在定义视图位置和大小的同时指定这些属性随时间变化的方式。 ```xml <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motion_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:layoutDescription="@xml/scene_file"> <!-- 子View --> </androidx.constraintlayout.motion.widget.MotionLayout> ``` 上述代码展示了如何声明一个 `MotionLayout` 控件并关联到场景描述文件[^1]。 #### 场景描述文件 (`@xml/scene_file`) 的结构 为了使 `MotionLayout` 能够工作，需要创建 XML 文件来描述不同状态下的约束条件以及两者之间的转换方式： ```xml <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end"/> <ConstraintSet android:id="@+id/start"> <!-- 初始状态下各组件的位置和其他属性设置 --> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <!-- 结束状态下各组件的新位置和其他属性设置 --> </ConstraintSet> </MotionScene> ``` 此配置指定了两个不同的约束集——起始(`start`) 和结束(`end`) ，并通过 `<Transition>` 标签连接起来形成完整的运动路径[^2]。 #### 动态控制动画播放 除了静态设定外，还可以编程地触发或调整动画过程。例如，在 Java/Kotlin 代码里调用相应的方法启动特定的过渡动作或者改变当前进度值: ```java // 获取 MotionLayout 实例 MotionLayout motionLayout = findViewById(R.id.motion_layout); // 开始向目标状态转变 motionLayout.transitionToEnd(); // 或者手动设置中间某个百分比的状态 float progressValue = 0.5f; // 表示一半完成度 motionLayout.setProgress(progressValue); ``` 以上方法允许开发者灵活操控由 `MotionLayout` 所驱动的各种交互行为[^4]。 #### 添加关键帧 (Optional) 如果希望更精细地定制动画流程，则可以通过添加额外的关键帧节点进一步增强表现力。这使得某些时刻内的视觉特性得以精确调控而不必依赖线性的插值算法。 ```xml <KeyFrameSet> <KeyAttribute app:framePosition="50" app:motionTarget="@id/my_view"> <CustomAttribute app:attributeName="alpha" app:value="0.5"/> </KeyAttribute> </KeyFrameSet> ``` 这里展示了一个简单的例子，其中当达到整个动画周期的一半时会将某对象透明度设为半透明白色[^3]。