Question

我正在使用timelinemax执行一系列补间，如下所示：

this.backgroundColorTimeline = new TimelineMax({
    repeat: -1,
    yoyo: true,
    onUpdate:this.updateTimeline,
});

palette.bg.forEach((paletteColor) => {
    this.backgroundColorTimeline.add(TweenMax.to(this.bg, settings.colorAnimTime, {
        easel: { tint: paletteColor },
    }));
});

当每个TweenMax实例都在运行时，我希望能够获得它的进展。因此，如果我的时间轴有10个tweenmax动画，我想在更新时获得每个动画的进度（从0到1的比例）。

我看到timelinemax有一个progress事件，但这不会将每个动画的时间分开。

如何获得当前动画的进度？

Answer 1

只需使用onUpdate回调来跟踪每个实例的进度：

ES5 Way

function getProgress () {
    var currProgress = this.progress();
}
palette.bg.forEach((paletteColor) => {
    this.backgroundColorTimeline.add(TweenMax.to(this.bg, settings.colorAnimTime,{
        easel: { tint: paletteColor },
        onUpdate: getProgress
    }));
});

ES6 + Way

const getProgress = t {
    const currProgress = t.progress();
}
palette.bg.forEach((paletteColor) => {
    this.backgroundColorTimeline.add(TweenMax.to(this.bg, settings.colorAnimTime,{
        easel: { tint: paletteColor },
        onUpdate: getProgress, onUpdateParams: ["{self}"]
    }));
});

如何在TimelineMax中获取当前动画序列的进度

1 个答案: