MotionLayout KeyCycle 和 KeyTimeCycle

Question

我有一个 Motion 布局 KeyCycle 作为 -

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

我只看到我的按钮从头到尾都在摇晃，甚至在到达框架位置之前它就摇晃了。不明白这里的框架位置是做什么的？还有为什么我没有看到三角运动？

还有，KeyCycle和KeyTimeCycle有什么区别？

Answer 1

如果只创建一个 KeyCycle，它将被“复制”为开始和结束。（给你 3 个）

您有效创建了：

<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>

听起来您想创建一个振幅斜坡：

<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>

或频率斜坡：

<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 与 KeyTimeCycle

Transition 将我们称为进度的值从 0.0 移动到 1.0 KeyCycle 是关于进度的动画。 KeyTimeCycle 是时间周期。如果你有一个 1 秒的线性过渡，它们将是相同的。但是使用滑动控制手势，进度 != 时间，因为您可以在中间停止进度。一般使用KeyCycle更容易精确控制

两者都有短视频

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

MotionLayout KeyCycle 和 KeyTimeCycle

MotionLayout KeyCycle and KeyTimeCycle

android

kotlin

android-constraintlayout

android-motionlayout