Ротацията на 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, който ще ви помогне да свържите tweens: 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