补间最大 js 轮换未按预期工作

Question

>我有这段代码，它基本上定义了一个循环，该循环在过渡结束时旋转图像：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/