0

このサイトをチェックしてください：

http://photoshop.tutorialcraft.com/

太陽が上に移動し、次に右に移動することに注意してください。これが私のコードです：

var windowWidth = $(window).width();

var width50 = (windowWidth*0.50)-220; //220 is half the width of the BG image being animated.
var width100 = (windowWidth*1);


$("#sunnmooncycle").css("backgroundPosition", "-440px 100px");.delay(2000) 

            .animate({'backgroundPosition':'('+ width50+'px '+'-400px' + ')'}, {duration:1500})
            .animate({'backgroundPosition':'('+ width100+'px '+'100px' + ')'}, {duration:1500});

2 つのまっすぐなアニメーションではなく、よりアーチ型のパターンで進むことができればいいのにと思います。間に 2 つの「キーフレーム」を作成すると、アーチが配置される位置で、途切れ途切れに見えます。これは、Jquery が一方から他方へ流れるのではなく、アニメーションを緩和するためです。

私はこれを行う方法を理解するのに十分な数学が得意ではありませんが、ウィンドウの幅は実行の直前に計算されるため、誰かがこれを行う方法を知っていると確信しています.

では、これを point-to-point ではなくアーチでアニメーション化するにはどうすればよいでしょうか?

4

1 に答える 1

0

jQuery のanimate. linear呼び出しの 3 番目の引数として値を使用することで、簡単にイージングをオフに指定できます。

このようにして、キーフレームをいくつでも設定できます。

于 2010-08-18T19:44:39.933 に答える