将时间线 A 放入时间线 B 和 C (GSAP)答案

【问题标题】：Put timeline A in timelines B and C (GSAP)将时间线 A 放入时间线 B 和 C (GSAP)
【发布时间】：2013-12-07 13:10:36
【问题描述】：

您如何将一个时间线放入两个不同的时间线中，然后能够单独播放它以及播放“容器”时间线？

为了清楚我的意思，这里是 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) 会起作用。为什么会这样？我们能以某种方式播放任何时间线吗？

【问题讨论】：

标签： javascript animation timeline gsap

【解决方案1】：

短

使用函数生成时间线：

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

var moveRight = createMoveRightTl();

Updated JSFiddle

长

作为 GSAP 论坛中的 Carl Shoof said

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

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

来自文档：

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

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

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

【讨论】：

我发现这是一个有效的方法。依次;创建函数，在函数调用上创建变量，使用变量。

【解决方案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) 和 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 个嵌套的时间轴，每个时间轴都试图控制 parent 的播放头？，这是一个动画混乱。

罗德里戈。

【讨论】：