android 动画_Android动画新势力——MotionLayout

背景

MotionLayout的设计是为了连接布局过渡与复杂的手势处理。你可以把它想象成属性动画框架、过渡动画管理和CoordinatorLayout三种能力集于一身的框架。

它可以能够描述两个布局之间的过渡( 就像TransitionManager的功能一样)，但是它又和TransitionManager不一样的地方在于，在转换的过程中，任何属性都能以动画的形式过渡(不仅仅是已有的属性，自定义属性也可以)。更屌的是，它本身就支持可见的转换,就像CoordinatorLayout一样(这种转换完全由触摸驱动，并且立即转换到任意点)。它支持触摸处理和关键帧(keyFrames),允许开发者非常容易的定制元素之间的过渡。

MotionLayout另一个不同点就是完全是声明式的，你完全可以用xml写一个复杂的转换(如果想用代码，当时也是非常可以的)

MotionLayout非常有特色的将所有的信息保存在了一个独立的XML文件中，保存在XML文件中的信息优先级将会比layout文件中要高。

MotionLayout的限制

MotionLayout只能对其直属的子View提供各种变换功能，这一点相对于可以作用布局层级和Activity之间转换的TransitionManager来说，的确是一个劣势。

MotionLayout官方使用场景

1. 平移、缩放、旋转

2. 属性动画(支持自定义属性)

BackgroundColor属性变化

3. 自定义路径动画

4. 配合CoordinatorLayout动画

5. 配合DrawLayout

MotionLayout属性

• layoutDescription：动画布局xml引用

• applyMotionScene：布尔类型，表示是否应用 MotionScene，默认值为 true。

• showPaths：布尔类型，表示在运动进行时是否显示运动路径。默认值为 false

• progress：float类型，可以明确指定转换进度(取值0.0~1.0)

• currentState：reference类型，可指定具体的 ConstraintSet

• motionDebug：可显示与运动有关的其他调试信息。可取值有：SHOW_PROGRESS、SHOW_PATH或SHOW_ALL。

运动描述文件详解

描述文件组成元素

：描述文件的根节点元素。

：声明所有的视图控件在运动过程中，特定关键点的位置和属性。

：声明单个视图控件在运动过程中，特定关键点的位置和属性。

：声明运动过程中的开始和结束状态，包括所有预期的过度状态、用户的触发的交互等。

：声明当用户触摸特定的视图控件时所要执行的动作。

：声明当用户在布局中滑动时所要执行的动作。

：声明在运动过程中视图控件的位置和属性。

：声明在运动过程中特定时刻视图控件的位置。

：声明在运动过程中特定时刻视图控件的属性。

元素详解

            ......    

是运动场景文件的根元素，必须包含一个或多个 元素，元素用于定义运动序列的开始和结束状态，以及这两种状态之间的转换。

必须包含的元素

：指定运动场景需要的动画序列，可以有多个，每一个指定需要执行的运动序列。如果 包含多个 元素，MotionLayout 会根据用户的互动选择最合适的 元素，但是要注意防止冲突。

可以包含的元素

：运动的状态布局集，为 元素指定开始或结束状态。 MotionLayout 关联的 可以没有 子元素，因为 可指向 XML 布局，而不是指向布局集。

属性

1. defaultDuration：所有动画的默认持续时间(以毫秒为单位)。用于给未指定持续时间的 指定一个默认的持续时间。

    ...

元素是用来指定视图在动画序列中某一点上的位置和属性(可同时指定多个视图)，也叫约束条件集合。通常，一个 元素可指向两个 元素，其中一个定义动画序列的开始，另一个定义动画序列的结束。

必须包含的元素

：必须包含一个或者多个 元素，描述动画在特定时刻视图的位置和属性。

属性

1. android:id：集合的 ID，在 中通过此 ID 来引用该序列
2. deriveConstraintsFrom：(可选)值为另一个 ConstraintSet 的 ID。如果指定这个属性，ID 对应约束集合内的所有约束条件都将应用于此集合，除非此集明确替换它们。

属性

1. android:id：视图 ID，约束视图的 ID ；
2. 其他在 ConstraintLayout 中用来约束视图位置的属性；

该元素是用来声明运动过程中的开始和结束状态，包括所有预期的过度状态、用户的触发的交互等。

属性

1. motion:constraintSetStart：运动序列的初始状态。可以是 的 ID (属性值设置为“@+id/constraintSetId”)，也可以是布局(属性值设置为"@layout/layoutName”)。
2. motion:constraintSetEnd：运动序列的最终状态。可以是 的 ID (属性值设置为“@+id/constraintSetId”)，也可以是布局(属性值设置为"@layout/layoutName”)。
3. motion:duration：运动序列的时长(单位：毫秒，可选)。如果未指定，则使用 元素中的 defaultDuration 属性值。

包含的元素

1. ：表示运动序列是由用户轻触触发的。
2. ：表示运动序列是由用户滑动触发的。
3. ：用于为运动序列中的元素指定一个或多个中间位置或属性设置。

该元素用于指定当用户点按特定视图时要执行的操作，用于 元素内部，指定当用户点击视图时触发动画序列，在一个 内部只能有一个 元素。

属性

1. motion:targetId：点击的视图的 ID。
2. motion:clickAction：点击时触发的操作，enum 类型，可选值有

该元素用于指定当用户在不居中滑动时需要执行的操作。动画序列的速度和目标视图的动画，受滑动的速度和方向影响，滑动的速度和方向是通过可选参数配置来控制的。

属性

1. motion:touchAnchorId：滑动时需要移动的视图 ID。
2. motion:touchAnchorSide：滑动所关联到的目标视图的锚点边，MotionLayout 会尝试在该锚点与用户手指之间保持恒定的距离。(可取值有： left、right、top 和 bottom)。
3. motion:dragDirection：用户滑动的方向，如果设定了该值，这个 将仅支持向特定的方向滑动(可取值有：dragLeft、dragRight、dragUp 和 dragDown)
4. motion:dragScale：控制目标视图的滑动距离和用户手指滑动距离的相对比例，默认值是1。取值小于1时目标视图的移动速度小于手指滑动速度，取值大于1时目标视图的移动速度大于手指的滑动速度。
5. motion:maxVelocity：目标视图的最大速度。
6. motion:maxAcceleration：目标视图的最大加速度。
7. motion:onTouchUp：触摸收起时的动作，可选值有：stop(停止动画)、autoComplete(自动完成动画)、autoCompleteToEnd(自动完成到结束状态)、autoCompleteToStart(自动完成到开始状态)、decelerate(减速停止动画)、decelerateAndComplete(减速并完成动画)

前面提到，动画的声明是有 “开始状态” 和 “结束状态” 两个点，目标控件在这两个点之间移动，前面的例子都是直线的动画，显然这个实际使用中需要更复杂的动画。 就是提供声明更加复杂动画的元素，他声明了动画运动轨迹的关键点集合，它可包含 和 ，通过这些元素，可以在动画的 “开始状态” 和 “结束状态” 添加 “中间点”，动画将平滑地移动到每个中间点，完成更复杂的动画。

该元素用于指定视图在运动过程中，在特定的时刻的位置。换句话说就是运动轨迹上的关键点的位置。在一个 中可以添加多个 用来添加多个不同的关键点位置。

属性

1. motion:motionTarget：当前关键点位置控制的目标视图的 ID。
2. motion:framePosition：关键帧位置，用百分比表示，取值为 0~100 之间的整数。(例如：取值20，表示该关键帧在运动轨迹的 20% 位置处 )，这个点将运动时间一分为二，两边的时间是相等的，如果运动轨迹长度不一样，那么将会造成运动速度不一样。但需要注意的是，关键帧的位置并不是关键点的位置。
3. motion:keyPositionType：关键点的类型，不同的类型会对 motion:percentX 和 motion:percentY 的值做出不一样的解析。取值有 parentRelative 、 deltaRelative 和pathRelative。
4. motion:percentX：X 轴方向的属性取值百分比，取值范围为0.0~1.0。
5. motion:percentY：Y 轴方向的属性取值百分比，取值范围为0.0~1.0。

关键点类型详细说明

1. parentRelative ：父容器关系型，即关键点的位置是相对于整个父容器中的相对位置来指定，percentX 和 percentY 分别表示 X 轴和Y轴相对位置，取值为 -1.0~1.0(负数时目标视图将移动到父容器外面)。需要注意的是：关键点的位置是相对父容器来指定，跟 “开始点” 和 “结束点” 位置无关。
2. deltaRelative：三角区域关系型，在目标视图整个运动序列移动的区域组成一个坐标轴，X 为横轴，Y 为纵轴，原点为 “开始点”，视图移动的方向为坐标的正方向。percentX 和 percentY 分别为 X 轴和 Y 轴上的数值，控制关键点的位置，取值范围是 -1.0 ~ 1.0之间，负数表示在坐标轴的负值方向位置。framePosition 一样控制的是轨迹弧顶的位置。
3. pathRelative：路径关系型，即关键点的位置是相对于路径相对指定的，路径是指 “开始点” 和 “结束点” 的直线路径(构成 X 轴)，percentX 表示在 X 轴相对位置，0 表示在开始点， 1表示在结束点；percentY 表示垂直于 X 轴(Y 轴)的相对位置，正数在 X 轴左侧，负数在 X 轴右侧。 |percentY 取值范围为-1.0~1.0，Y 轴距离是以 “开始点” 和 “结束点”之间的距离为基数的百分比(也就是说 Y 轴的最大距离就是开始点和结束点直线距离的最大值，如果该值取0，弧度为0，则轨迹为直线)。另外， framePosition 控制的是轨迹弧顶的位置(而不是关键点的位置)，大于 50 时偏向起始点，小于50时偏向结束点，弧顶两端轨迹，运动时间是相等的，如果取了不对等的值(非50)，就可以实现快慢变化的效果。

1. android:alpha：视图的透明度
2. android:elevation：视图的 Z 轴深度(在 API Level 21开始才有，像素单位，如dp)
3. android:rotation：视图的旋转角度(默认方向)
4. android:rotationX：视图 X 轴方向旋转角度
5. android:rotationY：视图 Y 轴方向旋转角度
6. android:scaleX：视图 X 轴方向缩放
7. android:scaleY：视图 Y 轴方向缩放
8. android:translationX：视图 X 轴方向的平移量(像素单位，如dp)
9. android:translationY：视图 Y 轴方向的平移量(像素单位，如dp)
10. android:translationZ：视图 Z 轴方向的平移量(在 API Level 21开始才有，像素单位，如dp)

在 元素中，您可以使用 元素设置属性，自定义属性不仅仅可以设置标准属性，也可以设置非标准的相关属性(例如：backgroundColor 背景色)，但是必须要注意一点，设置的自定义属性，必须是在 View 中定义了 getter 和 setter 方法的，而且属性值的类型必须准确。

一个 元素必须包含两个属性：

1. motion:attributeName：属性名(必须)
2. 必须包含以下含类型的属性值的一个：

motion:customColorValue： 适用于颜色

motion:customIntegerValue：适用于整数

motion:customFloatValue：适用于浮点值

motion:customStringValue：适用于字符串

motion:customDimension：适用于尺寸

motion:customBoolean：适用于布尔值

结语

MotionLayout 在动画处理方面的能力非常强大，完全配置化，如果需要在布局中使用到动画的同学可以试试这个强大的布局。