Положить временную шкалу 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(); 

Updated JSFiddle

Long

Как Карл 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); 
} 

Другой выбор является использование только один из родителей сроки и использовать игру (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 вложенных временных графика, и каждый из них пытается контролировать головку проигрывателя ?, это анимационный хаос.

Rodrigo.