Android animation 30天上手 — Day28 MotionLayout KeyframeSet

我們在講Property animation有講過keyFrame，這裡也可以使用keyFrameSet。

KeyFrameSet 裡可以設定

KeyPosition 位置的變化
KeyCycle 振盪效果
KeyAttribute 屬性的變化

KeyPosition
設定動畫在50%時，Y的位置往上移動25%

<Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000">
    <OnSwipe
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right"
            motion:dragDirection="dragRight"/>
    <KeyFrameSet>
        <KeyPosition
                motion:keyPositionType="pathRelative"
                motion:percentY="-0.25"
                motion:framePosition="50"
                motion:target="@id/button"/>
    </KeyFrameSet>
</Transition>

再加3個keyPosition

<KeyFrameSet>
    <KeyPosition
            motion:keyPositionType="pathRelative"
            motion:percentY="-0.25"
            motion:framePosition="25"
            motion:target="@id/button"/>
    <KeyPosition
            motion:keyPositionType="pathRelative"
            motion:percentY="0.25"
            motion:framePosition="50"
            motion:target="@id/button"/>
    <KeyPosition
            motion:keyPositionType="pathRelative"
            motion:percentY="-0.25"
            motion:framePosition="75"
            motion:target="@id/button"/>
</KeyFrameSet>

加上KeyCycle 產生振盪

<KeyFrameSet>
    <KeyCycle
        android:rotation="25"
        motion:framePosition="50"
        motion:target="@+id/button"
        motion:wavePeriod="1"
        motion:waveShape="sin" />
</KeyFrameSet>

KeyCycle加上KeyAttribute放大2倍

<KeyFrameSet>
    <KeyCycle
        android:rotation="25"
        motion:framePosition="25"
        motion:target="@+id/button"
        motion:wavePeriod="1"
        motion:waveShape="sin" />
    <KeyAttribute
        motion:target="@id/button"
        android:scaleX="2"
        android:scaleY="2"
        motion:framePosition="50" />
</KeyFrameSet>

KeyAttribute 支援的屬性

android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ

MotionLayout 仍有非常多可以應用的。可以看看Google的範例：https://github.com/googlesamples/android-ConstraintLayoutExamples
裡面有MotionLayout結合CoordinatorLayout、viewPager、reveal、fragment等的應用。

下一篇：Day29 基於物理的動畫：Spring animation、FlingAnimation

線上課程：

Android 動畫入門到進階

Android animation 動畫入門到進階 - HiSKIO 跨領域學程式 | 專業程式線上課程平台 | 嗨 程式技能

Android UI 進階實戰(Material Design Component)

Android UI 進階實戰 - 打造App絕佳體驗 - HiSKIO 跨領域學程式 | 專業程式線上課程平台 | 嗨 程式技能

出版書：

Android TDD 測試驅動開發：從 UnitTest、TDD 到 DevOps 實踐

天瓏網路書店 | Android TDD 測試驅動開發：從 UnitTest、TDD 到 DevOps 實踐（iT邦幫忙鐵人賽系列書）