Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/463.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Timeline Lite-如何同时处理多个对象_Javascript_Animation_Tween_Gsap - Fatal编程技术网

Javascript Timeline Lite-如何同时处理多个对象

Javascript Timeline Lite-如何同时处理多个对象,javascript,animation,tween,gsap,Javascript,Animation,Tween,Gsap,我在Timeline lite中对一些tween进行排序,但我希望它们中的两个同时发生在不同的对象上。是否有一种方法可以在不使用onComplete函数的情况下执行此操作。我目前的吐温序列是: tl.to($slideTitle, 0.3, {opacity: 0, left: -50 }) .set($slideTitle, { css: { left: 50 } }) .to($slideTitle,0.3, { opacity: 1, left: 0 })

我在Timeline lite中对一些tween进行排序,但我希望它们中的两个同时发生在不同的对象上。是否有一种方法可以在不使用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(){

        }})

所以在中间,在第一个动画到$SLIDDESC的同时,我想执行这个动画:

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

我该怎么做?如果我只是在$slidedsc之后按顺序插入它,它将在$slidedsc完成后才会执行。

您有两个选择:

  • 创建一个标签,并将“位置”参数设置为这两个标签的标签 项目
  • 加入第二个吐温,并以相同的方式进行负向偏移
    $slidedsc的持续时间
  • 因此,为了说明:

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


    你知道如何使用标签和时间透视图吗?”targetPoint','-=0.3'如果有人感兴趣,文档对如何实现这一点有很好的解释
    // Your code
    .to($slideDesc,0.3, {opacity: 0, left: -50 })
    .to($bodyCopy,0.3, {opacity: 0, left: -50, delay: .05 }, '-=0.3')