MotionLayoutの例を試してみる(キーフレームの位置)

前回はImageFilterViewをやりました。
ImageFilterView

今回はキーフレームの位置を試していこうと思います。

公式リファレンス

KeyFrameSet

今回は縦横同時に移動してみようと思います。

リンク先に公式サンプルがあります。
キーフレームの位置

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

縦横同時に移動するためにはKeyFrameSetを利用します。

keyPositionType

percentX 値と percentY 値の設定方法を指定できるみたいです。
parentRelativeとdeltaRelativeとpathRelativeが設定できます。

parentRelativeを設定するとpercentXとpercentYは親ビューを基準に指定されます。

deltaRelativeを設定するとpercentXとpercentYはビューが移動する距離を基準に指定します。

pathRelativeを設定するとX軸は、パス内でターゲットビューが移動する方向で、0が開始位置、1が最終位置です。Y軸はX軸に垂直で、正の値はパスの左側、負の値は右側になります。

今回はpathRelativeを使用しています。

framePosition

モーション シーケンスの中で、ビューがで指定された地点に到達するタイミングを指定する 1～99 の整数
今回は５０を設定しているので真ん中の位置です。

motionTarget

こちらはどのViewを対象にするのかを指定します。

以上です。
アニメーションが綺麗に動くと気持ちいいですね！