MotionLayout EP.2

: KeyFrameSet

KeyFrameSet

ใช้เพิ่มลูกเล่นระหว่างเคลื่อนที่จาก start ถึง end สามารถปรับเปลี่ยน path จากเดิมเส้นตรงให้โค้งได้ ใส่ค่า alpha, scale, rotation ให้กับ view ระหว่างทางได้

ประกอบด้วย KeyPosition KeyAttribute KeyCycle และ KeyTimeCycle

<KeyPositon

<Transition ...>
    <KeyFrameSet>
        <KeyPosition
            motion:framePosition="50"
            motion:keyPositionType="parentRelative"
            motion:motionTarget="@id/passengerNameTitleTextView"
            motion:percentY="0.8" />
    </KeyFrameSet>
</Transition>

• motion:motionTarget อ้างอิง id ของ view
• motion:framePosition ระบุตำแหน่งมีค่า 0–100
• motion:keyPositionType มี 3 รูปแบบ ได้แก่ parentRelative deltaRelative และ pathRelative
• motion:percentX , motion:percentY พิกัด (x,y) เกี่ยวข้องกับ keyPositionType

motion:framePosition

มีค่า 0 ที่ start และ 100 ที่ end ตามรูป

motion:framePosition

motion:keyPositionType

1. parentRelative อิงพิกัดตาม parent
   พิกัด (0,0) อยู่ตำแหน่งบนซ้าย และ พิกัด (1,1) อยู่ตำแหน่งล่างขวา ตามรูป A

parentRelative

โค้ดของรูป B

<Transition ...>
    <KeyFrameSet>
        <KeyPosition
            motion:framePosition="25"
            motion:keyPositionType="parentRelative"
            motion:motionTarget="@id/imageView"
            motion:percentX="0.25"
            motion:percentY="0.25" />
        <KeyPosition
            motion:framePosition="75"
            motion:keyPositionType="parentRelative"
            motion:motionTarget="@id/imageView"
            motion:percentX="0.75"
            motion:percentY="0.75" />
    </KeyFrameSet>
</Transition>

2. deltaRelative อิงพิกัดตาม start-end
พิกัด (0,0) อยู่ตำแหน่ง start และ พิกัด (1,1) อยู่ตำแหน่ง end ตามรูป A

deltaRelative

โค้ดของรูป B

<Transition ...>
    <KeyFrameSet>
        <KeyPosition
            motion:framePosition="50"
            motion:keyPositionType="deltaRelative"
            motion:motionTarget="@id/imageView"
            motion:percentY="0.8" />
    </KeyFrameSet>
</Transition>

3. pathRelative อิงพิกัดตาม path และกำหนด speeding up ได้
พิกัด (0,0) อยู่ตำแหน่ง start และ พิกัด (1,0) อยู่ตำแหน่ง end

ศึกษาเพิ่มเติม
https://codelabs.developers.google.com/codelabs/motion-layout#5

<KeyAttribute

<Transition ...>
    <KeyFrameSet>
        <KeyAttribute
            android:alpha="1"
            motion:framePosition="0"
            motion:motionTarget="@id/textView" />
        <KeyAttribute
            android:alpha="0"
            motion:framePosition="50"
            motion:motionTarget="@id/textView" />
        <KeyAttribute
            android:alpha="0"
            motion:framePosition="90"
            motion:motionTarget="@id/textView" />
        <KeyAttribute
            android:alpha="1"
            motion:framePosition="95"
           motion:motionTarget="@id/textView" />
    </KeyFrameSet>
</Transition>

โค้ดเบื้องต้น อธิบายได้ว่า

ตำแหน่ง0(เริ่มต้น) -> 50(กึ่งกลาง) : view ค่อยๆจางลงจนหายไปที่กึ่งกลาง
ตำแหน่ง50(กึ่งกลาง) -> 90 : view ยังคงไม่ปรากฎ
ตำแหน่ง90 -> 95 : view ค่อยๆปรากฎขึ้นมา ชัดเจนที่ตำแหน่ง 95

Attribute ที่รองรับ มีดังนี้

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

<KeyCycle

Example: KeyCycle

<Transition ...>
    <KeyFrameSet>
        <KeyCycle
            android:translationX="120dp"
            motion:framePosition="50"
            motion:motionTarget="@id/planeImageView"
            motion:waveOffset="0dp"
            motion:wavePeriod="0.5"
            motion:waveShape="sin" />
        <KeyCycle ... />
    </KeyFrameSet>
</Transition>

• motion:waveOffset ขยับ wave อยู่ตำแหน่งบนหรือล่าง (0dp = กึ่งกลางปกติ)
• motion:wavePeriod ความถี่ของ wave
• motion:waveShape ลักษณะของ wave (sin, cos, square, sawtooth, reverseSawTooth, triangle, bounce)

Source Code: https://github.com/lookmoojin/BoardingPass

ข้อมูลเพิ่มเติม

https://developer.android.com/training/constraint-layout/motionlayout/ref/keyframeset

https://developer.android.com/training/constraint-layout/motionlayout/examples#keyframe_cycle