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/

TweenMax js旋转无法按预期工作

1 个答案: