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