greensock 时间线无法正常工作
greensock timline does not work properly
我的greensock时间线只执行第二条时间线指令。如果我注释掉第二个,则第一个补间有效。时间有什么问题?
tl.to($img, .3, {rotation: 0, ease:Linear.easeNone}, 0)
.fromTo($img, .3, {rotation: 0, ease:Linear.easeNone}, {rotation: 10, yoyo:true, repeat:-1, ease:Linear.easeNone}, 0);
每个时间轴调用的最后一个参数称为位置参数。通过在两个方法调用上将该参数设置为 0,您将在时间轴的 0 秒标记处告诉两个动画 tu 运行。这实际上是开始。所以你告诉两个动画同时执行,这就是为什么你只看到第二个动画而当你删除那个调用时你看到第一个。
因此,如果您希望一个动画紧接着另一个动画 运行,您应该从第二个 fromTo 调用中完全删除位置参数。
您还可以定义一个偏移量,这意味着您可以将第二个动画设置为 运行 稍早于第一个结束或稍晚于结束。您可以通过将位置参数设置为“-=0,5”来执行此操作,这将在第一个动画完成之前 0.5 开始第二个动画,或者“+=0.5”将在 .5 秒后开始动画。
我的greensock时间线只执行第二条时间线指令。如果我注释掉第二个,则第一个补间有效。时间有什么问题?
tl.to($img, .3, {rotation: 0, ease:Linear.easeNone}, 0)
.fromTo($img, .3, {rotation: 0, ease:Linear.easeNone}, {rotation: 10, yoyo:true, repeat:-1, ease:Linear.easeNone}, 0);
每个时间轴调用的最后一个参数称为位置参数。通过在两个方法调用上将该参数设置为 0,您将在时间轴的 0 秒标记处告诉两个动画 tu 运行。这实际上是开始。所以你告诉两个动画同时执行,这就是为什么你只看到第二个动画而当你删除那个调用时你看到第一个。 因此,如果您希望一个动画紧接着另一个动画 运行,您应该从第二个 fromTo 调用中完全删除位置参数。
您还可以定义一个偏移量,这意味着您可以将第二个动画设置为 运行 稍早于第一个结束或稍晚于结束。您可以通过将位置参数设置为“-=0,5”来执行此操作,这将在第一个动画完成之前 0.5 开始第二个动画,或者“+=0.5”将在 .5 秒后开始动画。