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();

画像が2回目に回転すると、なぜその奇妙なことが起こるのか疑問に思っています.何かアイデアはありますか?

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 に答える