MotionLayout KeyCycle and KeyTimeCycle

Question

I have a Motion layout KeyCycle as -

<KeyFrameSet>
   <KeyCycle
     app:motionTarget="@+id/button"
     app:framePosition="75"
     app:wavePeriod="3"
     app:waveOffset="0dp"
     app:waveShape="triangle"
     android:translationY="50dp" />
</KeyFrameSet>

I just see that my button is shaking from start to end and it does even before frame position is reached. Don't understand what the frame position does here? Also why don't I see a triangular movement?

Also, What is the difference between KeyCycle and KeyTimeCycle?

Can you post your layout and the rest of your MotionScene? – Jason Pearson Jan 21 '21 at 23:28 — Jason Pearson, Jan 21 '21 at 23:28

score 1 · Accepted Answer · answered Jan 22 '21 at 00:57

If only one KeyCycle is created it gets "copied" as a start and an end. (giving you 3)

You effectively created:

<KeyFrameSet>
<KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="0"
   app:wavePeriod="3"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="50dp" />
 <KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="75"
   app:wavePeriod="3"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="50dp" />
 <KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="100"
   app:wavePeriod="3"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="50dp" />
 </KeyFrameSet>

It sound like you want to create a ramp in amplitude :

<KeyFrameSet>
<KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="0"
   app:wavePeriod="3"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="0dp" />
 <KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="75"
   app:wavePeriod="3"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="50dp" />
 <KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="100"
   app:wavePeriod="3"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="0dp" />
 </KeyFrameSet>

Or a ramp in frequency:

<KeyFrameSet>
<KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="0"
   app:wavePeriod="0"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="50dp" />
 <KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="75"
   app:wavePeriod="3"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="50dp" />
 <KeyCycle
   app:motionTarget="@+id/button"
   app:framePosition="100"
   app:wavePeriod="0"
   app:waveOffset="0dp"
   app:waveShape="triangle"
   android:translationY="50dp" />
 </KeyFrameSet>

KeyCycle vs. KeyTimeCycle

An Transition moves a value we call progress from 0.0 to 1.0 KeyCycle is an animation with respect to progress. KeyTimeCycle is cycles in time. If you had a 1 second transition that was linear they would be identical. But with swipe controlled gestures, progress != time as you can stop the progress in the middle. Generally use KeyCycle it is easier to control precisely.

Short videos on both

KeyCycles - https://youtu.be/qWmU6emSQ5k
KeyTimeCycles - https://youtu.be/us0sOEq_fck

MotionLayout KeyCycle and KeyTimeCycle

1 Answers1