6

jQuery.crSplineを使用して、曲線のパスに沿ってグラフィックをアニメーション化しています。結果にはかなり満足しています。

ただし、キャンバス全体のサイズは意図的にかなり広く（ほとんどの画面よりも明らかに大きい）、グラフィックはビューポートスペースをすぐに使い果たし、画面からアニメーション化されます。

代わりに、ブラウザのビューポートを画像のフォローまたは中央に配置して、画像が「ショット内」にとどまるようにします。

jQueryでこれをどのように処理しますか？scrollTopはオプションですか？

crSplineデモソースに基づいてjsFiddleデモを作成しましたが、minX設定が広くなっています。

注意：私は最初にYUI3でこれを試みましたが、Loktarはキャンバスベースのソリューションを提供しましたが、 YUIとキャンバスはもう使用していません。

4

2 に答える 2

5

これはあなたが考えていたものですか？http://jsfiddle.net/gNdwD/33/。少し途切れ途切れに見えますが、最初の試みは大まかなものです。

crSplineがアニメーション化された要素の座標を公開していないように見えるため、定期的にそれらを観察し、それに応じてビューポートを調整する必要があります。

setInterval(function() {

    var mover = $('#mover'),
        posX = mover.position().left,
        posY = mover.position().top;

    $(window)
        .scrollLeft(posX - $(window).width() / 2)
        .scrollTop(posY - $(window).height() / 2);
}, 10);

ムーバーsetIntervalのオンと同期していないため、途切れが発生しているのではないかと思います。$.animateこれを修正するには、2つのアニメーションを実行します。1つはムーバーで、もう1つはラッパーdivのscrollTopandで実行します。このようscrollLeftに2つ同時に適用できます。$.animate

于 2012-09-18T09:09:20.950 に答える
3

stepjQuery animateには、アニメーションのすべてのステップで実行される関数のオプションがあります。

ここで関数パラメーターの2番目のバージョンを参照してください：http： //api.jquery.com/animate/

.animate( properties, options )

propertiesA map of CSS properties that the animation will move toward.

optionsA map of additional options to pass to the method. Supported keys:

duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
complete: A function to call once the animation is complete.
step: A function to be called after each step of the animation.
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

stepビューポートを調整する関数を呼び出すコードに基づいて、このフィドルを参照してください。

http://jsfiddle.net/gNdwD/35/

$('<div id="mover" />')
        .appendTo($(document.body))
        .animate({ crSpline: spline },{
            duration: 20000,
            step: function() {       /* THE STEP FUNCTION TO ADJUST VIEWPORT */
              var mover = $('#mover'),               
              posX = mover.position().left;
              posY = mover.position().top;

              $(window)
              .scrollLeft(posX - $(window).width() / 2)
               .scrollTop(posY - $(window).height() / 2);
            } ,
            complete:function () {
                      // Re-run the demo with a new spline after we're done
                       window.setTimeout(function() {
                       DEMO.run();
                      }, 5000);
            }
        });
于 2012-09-18T09:34:16.723 に答える