javascript - TweenMax 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/