将时间线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

Long

作为卡尔·肖夫( Carl )在GSAP论坛上的角色

这里的核心问题是，你不能在多个父母中放置任何时间线或时间间隔。 动画(吐温或时间线)只能有一个父级。 从医生那里： 每个动画都放在时间线上(默认情况下是根时间线)，只能有一个父动画。一个实例不能同时存在于多个时间线中。http://api.greensock.com/js/com/greensock/core/Animation.html#timeline 在您的情况下，听起来不像预先创建所有的时间线，您应该只创建生成时间线的函数，然后在需要特定效果时调用这些函数。

Answer 2

基本上这是一个覆盖冲突，而前两个时间线可以在没有任何麻烦的情况下共存，但是从你将它们添加到第三个时间线的那一刻起，它们就受制于这个时间线的游戏头，它们的目标也是如此。另外，由于您有两个父时间线--在本例中是在"moveLeftRight“结尾创建的父时间线，因此，考虑到所有时间线都会影响到相同的目标和相同的属性"X”，因此会覆盖所有其他时间线。如果你用这个：

// Declare timelines
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())
    .add(moveLeft.play());

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

moveRightLeft代码可以工作，但是单独的按钮会得到奇怪的结果。

一种解决方案是在按钮事件上创建主时间线，比如通过将所有时间线创建为全局变量来避免此类冲突：

// Declare timelines
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});

// Handler functions
window.moveRight = function() { moveRight.play(0); }
window.moveLeft  = function() { moveLeft.play(0); }
window.moveRightLeft = function() 
{
    var moveRightLeft = new TimelineMax()
    .add(moveRight)
    .add(moveLeft);
}

window.moveLeftRight = function()
{
   var moveLeftRight = new TimelineMax()
    .add(moveLeft)
    .add(moveRight);
}

另一个选择是只使用一个父时间线，并使用play(0)和反向(0)，如下所示：

// Declare timelines
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)
    .add(moveLeft);

// Handler functions
window.moveRight = function() { moveRight.play(0); }
window.moveLeft  = function() { moveLeft.play(0); }
window.moveRightLeft = function() 
{
   moveRightLeft.play(0);
}

window.moveLeftRight = function()
{
    moveRightLeft.reverse(0);
}

我更新了你的小提琴：http://jsfiddle.net/Zde5U/8/

问题是，如果您创建两个时间线，然后将这些时间线添加到另一个时间线中，哪个时间线具有控制权?如果嵌套的时间线可以控制其父时间线的游戏头，那么如果父时间线有4个嵌套的时间线，并且每个时间线都试图控制父时间线，那么这将是一个动画混乱。

罗德里戈。