javascript - Timeline Lite - 如何同时补间多个对象

Question

我正在 Timeline lite 中对多个补间进行排序，但我希望其中几个补间同时发生在不同的对象上。如果没有 onComplete 函数，有没有办法做到这一点。我当前的补间序列是:

tl.to($slideTitle, 0.3, {opacity: 0, left: -50 })
        .set($slideTitle, { css: { left: 50 } })
        .to($slideTitle,0.3, { opacity: 1, left: 0 })
        .to($slideDesc,0.3, {opacity: 0, left: -50 }) //Here is where I want a tween to happen to another item at the same time as I am animating $slideDesc
        .set($slideDesc, { css: { left: 50 } })
        .to($slideDesc,0.3, {opacity: 1, left: 0, onComplete: function(){

        }})

所以在中间，与 $slideDesc 的第一个动画同时，我想执行这个动画:

.to($bodyCopy,0.3, {opacity: 0, left: -50, delay: .05 })

我该怎么做？如果我只是将它放在 $slideDesc 之后的序列中，它将在 $slideDesc 完成后才会执行。

Answer 1

您实际上有两个选择:

1. 创建一个标签并将 position 参数设置为标签项目
2. 添加第二个补间并将其负偏移$slideDesc
的持续时间

为了说明:

// Your code
.addLabel('targetPoint')
.to($slideDesc,0.3, {opacity: 0, left: -50 }, 'targetPoint')
.to($bodyCopy,0.3, {opacity: 0, left: -50, delay: .05 }, 'targetPoint')

或

// Your code
.to($slideDesc,0.3, {opacity: 0, left: -50 })
.to($bodyCopy,0.3, {opacity: 0, left: -50, delay: .05 }, '-=0.3')