Как изменить временную шкалу TimelineLite?

Question

Я совершенно новый с GreenSock и я сам в беде ...

Я хотел бы изменить сроки GreenSock TimelineLite смещения для обратного, так что некоторые задержки удаляются (я думаю, что они называются колер).

Вот пример: http://jsfiddle.net/4bvnv1d5/

var red = $('.red'); 
var green = $('.green'); 
var blue = $('.blue'); 
var black = $('.black'); 

var tl = new TimelineLite({onReverseComplete:reverseCompleted}); 

$('#start').click(function(){ 
    tl.to(red, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'}); 
    tl.to(green, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'}); 
    tl.to(blue, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'}); 
    tl.to(black, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px', onComplete:lastCompleted, onCompleteParams:[black]}, "+=4"); 
}); 

$('#reverse').click(function(){ 
    tl.reverse();  
}); 

function lastCompleted(target) { 
    console.log('lastCompleted');  
} 

function reverseCompleted(){ 
    console.log('reverseCompleted'); 
    tl.clear(); 
    tl.restart(); 
} 

На игре есть четыре вторая задержка с последней коробкой, но на обратной стороне я хотел бы анимации играть сразу после друг с другом без каких-либо задержек. Существует функция lastCompleted(), которая запускается после запуска последней анимации. Как я могу использовать эту функцию для удаления задержки между анимацией черного и синего полей?

Спасибо!

Answer 1

Посмотрите на this скрипка.

JavaScript:

var red = $('.red'); 
var green = $('.green'); 
var blue = $('.blue'); 
var black = $('.black'); 

var tl = new TimelineLite({ 
    paused: true, 
    callbackScope: this, 
    onReverseComplete: onTlReverseComplete 
}); 
tl.staggerTo([red, green, blue], 0.3, { marginLeft: 100, ease: Power1.easeInOut }, 0.3); 
tl.addLabel('MyLabel'); 
tl.to(black, 0.3, { marginLeft: 100, ease: Power1.easeInOut, onReverseComplete: onBlackBoxReverseComplete, callbackScope: this }, '+=4'); 

$('#start').click(function() { 
    tl.play(); 
}); 
$('#reverse').click(function() { 
    tl.reverse(); 
}); 

function onBlackBoxReverseComplete() { 
    tl.reverse('MyLabel'); 
} 

function onTlReverseComplete() { 
    tl.stop(); 
} 

Довольно мало что изменилось с вашего кода. Вот список:

• В Подростков добавлены в экземпляр tl за рамки щелчка обработчика #start кнопки. Только обработчик кликов .play() с временной шкалой вперед.
• .staggerTo() метод используется вместо добавления трех твинов один за другим перед одним для элемента .black.
• Кроме того, margin-left был заменен эквивалентом JS marginLeft, и поскольку он принимает номера и по умолчанию пиксели, не нужно передавать значения в виде строк.
• Подвижность для элемента .black имеет onReverseComplete обратный вызов.

Надеюсь, это поможет. Дайте знать, если у вас появятся вопросы.