播放动画到特定时间

Question

我正在创建一个后端来为进度条设置动画。

// Default easing.
TweenLite.defaultEase = Power0.easeNone;

// Timeline.
var tl = new TimelineLite({
    onUpdate : function()
    {
        console.log(progress.progress);
    }
});

// Initial state.
var progress = { progress : 0 };

// Finalized state.
tl.to(progress, 1, { progress : 100 });

// The length of the animation.
tl.totalDuration(15);

// Play.
tl.play();

这按预期工作，但是有没有办法从当前播放头到特定播放头设置动画？像 tl.playTo(0.5) 和之后的 tl.playTo(0.2) 会恢复到 20%。

我知道 seek、progress 和 play 方法的可选变量，但它们只让我指定起始位置，而不是结束位置。

如何实现这种行为？

Answer 1

如果我对你的问题理解正确，这就是我的建议。

您可以为 TimelineLite 的 progress 属性制作动画。类似于：

TweenLite.to(tl, 1, {progress: .5, ease: Linear.easeNone});.

此外，您是否看到 TimelineMax 中可用的 tweenTo() and tweenFromTo，我知道您正在使用 TimelineLite 但我仍然想知道你是否知道它们。

这有帮助吗？

播放动画到特定时间

Playing animation to a specific time

javascript

gsap