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:keyPositionType
- parentRelative อิงพิกัดตาม parent
พิกัด (0,0) อยู่ตำแหน่งบนซ้าย และ พิกัด (1,1) อยู่ตำแหน่งล่างขวา ตามรูป A
โค้ดของรูป 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
โค้ดของรูป 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
<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