将时间表A放在时间表B和C(GSAP)中

Question

如何将一个时间轴放入两个不同的时间轴,然后能够单独播放以及播放"容器"时间线？

为了清楚我的意思,这里有4个时间轴的例子:2个简单,2个组合(也是jsFiddle上提供的交互式示例):

var moveRight = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 0}, {x: 300});

var moveLeft = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 300}, {x: 0});

var moveRightLeft = new TimelineMax({paused: true})
    .add(moveRight.play()) // call `play` because timeline paused 
    .add(moveLeft.play());

var moveLeftRight = new TimelineMax({paused: true})
    .add(moveLeft.play())
    .add(moveRight.play());

在这个例子中,当我们尝试播放每个时间轴时,只有最后一个(moveLeftRight)可以工作.为什么会这样？我们能以某种方式玩任何时间表吗？

Answer 1

短

使用函数生成时间轴:

function createMoveRightTl() {
    return new TimelineMax({paused: true})
        .fromTo(box, 1, {x: 0}, {x: 300});
}

var moveRight = createMoveRightTl();

更新了JSFiddle

长

正如Carl Shoof 在GSAP论坛上所说的那样

这里的核心问题是您不能在多个父项中放置任何时间轴或补间.

动画(补间或时间轴)只能有一个父级.

来自文档:

每个动画都放在时间轴上(默认为根时间轴),并且只能有一个父动画.实例不能同时存在于多个时间轴中.

http://api.greensock.com/js/com/greensock/core/Animation.html#timeline

在您的情况下,它听起来不是预先创建所有时间轴,而是应该创建生成时间轴的函数,然后在需要特定效果时调用这些函数.