MotionEffect

MotionEffect是2.1中的一個新的MotionHelper，可以讓你根據檢視的整體運動方向，自動為其引用的檢視新增關鍵幀。它可以簡化很多過渡動畫的創作。

為了更好地理解它的作用，請看下面的例子。這個例子只使用了MotionLayout的start和end功能，它自動建立了兩種場景下的過渡效果。

預設的兩種狀態之間的過渡做了一個線性插值的移動效果——這個展示結果是混亂的，並不令人愉快。

如果我們看這個例子，我們可以識別出只向西移動的元素（2、3、6、9），而其他元素則以其它不同的模式移動（1、4、5、7、8）。

我們可以使用MotionEffect對這些元素應用淡入淡出的效果，給人帶來更愉悅的效果。

可以檢視下面的demo。

<androidx.constraintlayout.motion.widget.MotionLayout ... >
    <TextView android:id="@+id/t1" ... />
    <TextView android:id="@+id/t2" ... />
    <TextView android:id="@+id/t3" ... />
    <TextView android:id="@+id/t4" ... />
    <TextView android:id="@+id/t5" ... />
    <TextView android:id="@+id/t6" ... />
    <TextView android:id="@+id/t7" ... />
    <TextView android:id="@+id/t8" ... />
    <TextView android:id="@+id/t9" ... />

    ...

    <androidx.constraintlayout.helper.widget.MotionEffect
        android:id="@+id/fade"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="t1,t2,t3,t4,t5,t6,t7,t8,t9"
    />
</androidx.constraintlayout.motion.widget.MotionLayout>
 

Controling which views get the effect

首先，只有MotionEffect中引用的檢視才有可能得到效果。

其次，預設情況下，我們會自動計算這些檢視的主要移動方向（在北、南、東、西之間），只有與該方向相反移動的檢視才會得到應用於它們的效果。

使用motionEffect_move=auto|north|south|east|west，你可以覆蓋它來指定你想要效果應用到哪個方向。

你也可以使用motionEffect_strict=true|false來讓這個效果嚴格地應用於（或不應用於）做這個運動的元素。

預設效果 預設情況下，效果將應用淡出/淡入；你可以通過以下屬性控制alpha的數量以及效果的開始/結束。

app:motionEffect_start="keyframe"
app:motionEffect_end="keyframe"

你也可以控制alpha和translation的數值。

app:motionEffect_alpha="alpha"
app:motionEffect_translationX="dimension"
app:motionEffect_translationX="dimension"

Custom effect

你也可以引用一個ViewTransition來代替預設的淡入淡出效果應用到widget上，只需設定motionEffect_viewTransition，你就可以無限制地控制你想要應用的效果型別。

例如，要得到以下動畫。

你可以建立一個ViewTransition，並在MotionEffect中引用它。

在layout xml中：

<androidx.constraintlayout.helper.widget.MotionEffect
...
app:motionEffect_viewTransition="@+id/coolFade"/>

在motion scene中：

<ViewTransition android:id="@+id/coolFade">
    <KeyFrameSet>
        <KeyAttribute
            motion:framePosition="20"
            android:scaleX="0.1"
            android:scaleY="0.1"
            android:rotation="-90"
            android:alpha="0" />
        <KeyAttribute
            motion:framePosition="80"
            android:scaleX="0.1"
            android:scaleY="0.1"
            android:rotation="-90"
            android:alpha="0" />
    </KeyFrameSet>
</ViewTransition>

文末

您的點贊收藏就是對我最大的鼓勵！
歡迎關注我，分享Android乾貨，交流Android技術。
對文章有何見解，或者有何技術問題，歡迎在評論區一起留言討論！