TweenMax JS轉動不靈預期

Question

我有代碼至極basicaly的該位定義了一個循環，在過渡期結束旋轉的圖像：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(); 

只是想知道，爲什麼第二次的圖像旋轉，它做那件奇怪的事...任何想法？

Answer 1

我建議你使用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/