1

我有这段代码，它基本上定义了一个在转换结束时旋转图像的循环：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();

只是想知道为什么图像第二次旋转它会做那种奇怪的事情......有什么想法吗？

4

1 回答 1

3

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

于 2012-11-29T16:34:07.020 回答