效果.gif

MotionLayout 是一種布局類型呐馆，可幫助您管理應(yīng)用中的運動和微件動畫嗤攻。MotionLayout 是 ConstraintLayout 的子類，在其豐富的布局功能基礎(chǔ)之上構(gòu)建而成藕畔。作為 ConstraintLayout 庫的一部分麻诀，MotionLayout 可用作支持庫，并可向后兼容 API 級別 14。

接下來梳理KeyFrameSet 關(guān)鍵幀部分的內(nèi)容

1. KeyPosition關(guān)鍵點 控制動畫期間的布局位置

2. KeyAttribute關(guān)鍵屬性 控制動畫期間的后期布局特性

3. KeyCycle 關(guān)鍵周期 控制動畫期間后期布局特性位置的振蕩

4. KeyTimeCycle 關(guān)鍵時間周期 Controls oscillations with respect to time of post layout properties during animation

5. KeyTrigger 關(guān)鍵觸發(fā)器 在動畫過程中译隘，在固定點觸發(fā)對代碼的回調(diào)

本章節(jié)主要梳理 KeyPosition KeyAttribute

KeyPosition : 關(guān)鍵點控制動畫期間的布局位置,在動畫的關(guān)鍵位置改變View的一些狀態(tài)

KeyPosition 的屬性說明

motionTarget :根據(jù)View的Id 綁定的目標(biāo)View

framePosition :沿插值的點 0 = 開始 100 = 結(jié)束

transitionEasing : 定義從該點開始制作動畫時要使用的緩動曲線（例如固惯，curve(1.0,0,0, 1.0)）或關(guān)鍵字 {standard | 加速 | 減速 | 線性 }

pathMotionArc : 路徑將以话鹪臁（四分之一橢圓）移動 關(guān)鍵詞 {startVertical | 開始水平 | 翻轉(zhuǎn) | 沒有任何 }

keyPositionType : 如何計算此關(guān)鍵幀對線性路徑的偏差{DeltarRelative | pathRelative | parentRelative}

percentX percentY : （浮動）沿Y,X軸（DeltarRelative）或垂直于pathRelative中的路徑從起點到終點的距離百分比
...

KeyAttribute 關(guān)鍵屬性 控制動畫期間的后期布局特性

使用

實現(xiàn)上圖效果圖的 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 自動完成到結(jié)尾  autoComplete自動完成 -->
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right" />
        <!--parentRelative 相對父布局的路徑  相對控件的-->
        <!--percentY 移動的Y位置(百分比+在下 -在上)-->
        <!--percentX 移動的Y位置(百分比+在右邊 -在左邊)-->
        <!--motionTarget 目標(biāo)View-->
        <!--framePosition 0=起點100=終點 什么時候關(guān)鍵幀起作用-->
        <KeyFrameSet>
            <KeyPosition
                motion:framePosition="50"
                motion:keyPositionType="pathRelative"
                motion:motionTarget="@id/button"
                motion:percentX="0.5"
                motion:percentY="-0.5" />

            <!-- KeyAttribute 關(guān)鍵幀的屬性-->
            <!--   scaleX    scaleY XY 縮放      -->
            <!--   rotation    旋轉(zhuǎn)      -->
            <!--   framePosition    執(zhí)行到這個區(qū)間的百分之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>

總結(jié)

KeyFrameSet 動畫中關(guān)鍵幀的一些方法屬性說明 著重說了KeyPosition 其他的關(guān)鍵屬性暫時沒研究后期看有時間搞沒得,再學(xué)學(xué)習(xí)

參考文獻(xiàn)

1.Google的MotionLayout介紹說明

2.MotionLayout的文檔簡介

3.MotionLayout 源碼地址

4. 源碼地址