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();

Updated JSFiddle

<强>长

作为Carl Shoof said参加GSAP论坛

这里的核心问题是你不能放置任何时间轴或补间   多个父母。

动画（补间或时间轴）只能有一个父级。

来自文档：


每个动画都放在时间轴上（默认情况下是根时间轴），并且只能有一个父动画。实例不能同时存在于多个时间轴中。


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

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

Answer 2

基本上这是一个覆盖冲突，而前两个时间轴可以毫无困难地共存，但从你将它们添加到第三个时间轴的那一刻起，它们就会受到那个timelne的播放头的影响，他们的目标也是如此。此外，由于您有两个父时间轴，在这种情况下在末尾创建的父“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）和reverse（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/

问题在于，如果您创建两个时间轴，然后将这些时间轴添加到另一个时间轴，哪个时间轴具有控件？，如果嵌套时间轴可以控制其父时间轴的播放头，那将会非常混乱，如果parent有4个嵌套时间轴，其中每个都尝试控制父级的播放头？这是一个动画混乱。

罗德里戈。

将时间表A放在时间表B和C（GSAP）中

2 个答案: