Android新控件之MotionLayout 动画管理布局之KeyFrameSet关键位置<四>

效果.gif

MotionLayout 是一种布局类型，可帮助您管理应用中的运动和微件动画。MotionLayout 是 ConstraintLayout 的子类，在其丰富的布局功能基础之上构建而成。作为 ConstraintLayout 库的一部分，MotionLayout 可用作支持库，并可向后兼容 API 级别 14。

接下来梳理KeyFrameSet 关键帧部分的内容

1. KeyPosition关键点 控制动画期间的布局位置

2. KeyAttribute关键属性 控制动画期间的后期布局特性

3. KeyCycle 关键周期 控制动画期间后期布局特性位置的振荡

4. KeyTimeCycle 关键时间周期 Controls oscillations with respect to time of post layout properties during animation

5. KeyTrigger 关键触发器 在动画过程中，在固定点触发对代码的回调

本章节主要梳理 KeyPosition KeyAttribute

KeyPosition : 关键点控制动画期间的布局位置,在动画的关键位置改变View的一些状态

KeyPosition 的属性说明

motionTarget :根据View的Id 绑定的目标View

framePosition :沿插值的点 0 = 开始 100 = 结束

transitionEasing : 定义从该点开始制作动画时要使用的缓动曲线（例如，curve(1.0,0,0, 1.0)）或关键字 {standard | 加速 | 减速 | 线性 }

pathMotionArc : 路径将以弧（四分之一椭圆）移动 关键词 {startVertical | 开始水平 | 翻转 | 没有任何 }

keyPositionType : 如何计算此关键帧对线性路径的偏差{DeltarRelative | pathRelative | parentRelative}

percentX percentY : （浮动）沿Y,X轴（DeltarRelative）或垂直于pathRelative中的路径从起点到终点的距离百分比
...

KeyAttribute 关键属性 控制动画期间的后期布局特性

使用

实现上图效果图的 MotionScene.xml

<?xml version="1.0" encoding="utf-8"?><!--
  Copyright (C) 2018 The Android Open Source Project
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  -->
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000"
        motion:motionInterpolator="linear">
        <!--  motion:pathMotionArc="startHorizontal"-->
        <!-- motionInterpolator 动画插值器 -->
        <!-- autoCompleteToEnd 自动完成到结尾  autoComplete自动完成 -->
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right" />
        <!--parentRelative 相对父布局的路径  相对控件的-->
        <!--percentY 移动的Y位置(百分比+在下 -在上)-->
        <!--percentX 移动的Y位置(百分比+在右边 -在左边)-->
        <!--motionTarget 目标View-->
        <!--framePosition 0=起点100=终点 什么时候关键帧起作用-->
        <KeyFrameSet>
            <KeyPosition
                motion:framePosition="50"
                motion:keyPositionType="pathRelative"
                motion:motionTarget="@id/button"
                motion:percentX="0.5"
                motion:percentY="-0.5" />

            <!-- KeyAttribute 关键帧的属性-->
            <!--   scaleX    scaleY XY 缩放      -->
            <!--   rotation    旋转      -->
            <!--   framePosition    执行到这个区间的百分之80      -->
            <KeyAttribute
                android:rotation="45"
                android:scaleX="2"
                android:scaleY="2"
                motion:framePosition="80"
                motion:motionTarget="@id/button" />

<!--            <KeyPosition-->
<!--                motion:framePosition="60"-->
<!--                motion:keyPositionType="pathRelative"-->
<!--                motion:motionTarget="@id/button"-->
<!--                motion:percentX="0.7"-->
<!--                motion:percentY="-0.8" />-->
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="BackgroundColor"
                motion:customColorValue="#D81B60" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="BackgroundColor"
                motion:customColorValue="#9999FF" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

总结

KeyFrameSet 动画中关键帧的一些方法属性说明 着重说了KeyPosition 其他的关键属性暂时没研究后期看有时间搞没得,再学学习

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4. 源码地址