Вращение TweenMax js не работает должным образом

У меня есть этот фрагмент кода, который в основном определяет цикл, который вращает изображение в конце перехода: http://jsfiddle.net/bolaoch8/k8XtU/1/

$('#avion').css('left', '0%');

var animacionAvion = TweenMax.to($('#avion'), 5, {css:{left:'100%'}, delay:0, repeat:-1, yoyo:true});

setInterval(giraAvion, 5000);

var rotationValue = 180;

function giraAvion()
{
    console.log('giraAvion a:', rotationValue);
    TweenMax.to($('#avion'), 0.8, {css:{transform:'rotate('+rotationValue+'deg)'}, delay:5});
    rotationValue == 180?rotationValue = 0:rotationValue = 180;
}
giraAvion();

Просто интересно, почему при втором повороте изображения происходит такая странная вещь... Есть идеи?


javascript rotation gsap
person Albert Espinosa Aguado    schedule 29.11.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я предлагаю вам использовать TimelineMax, который поможет вам связать анимацию: http://api.greensock.com/js/

Это сделает вашу анимацию намного проще.

var tl = new TimelineMax({repeat:-1});    
tl.to($('#avion'), 5, {css:{left:'100%'}});
tl.to($('#avion'), 0.8, {css:{rotation:180}});
tl.to($('#avion'), 5, {css:{left:'0%'}});
tl.to($('#avion'), 0.8, {css:{rotation:0}});
tl.play();

Больше никаких интервалов и функций!

Я изменил ваш jsfiddle, чтобы получить его силу: http://jsfiddle.net/xavier_seignard/k8XtU/3/

person xavier.seignard    schedule 29.11.2012
comment
Вот и все! Он полностью решил эту проблему и работает идеально! Большое спасибо! - person Albert Espinosa Aguado; 29.11.2012