5

私は、コーチが画面に選手を追加し、(HTML5 キャンバスを使用して矢印を描画することによって) 移動方向を設定し、[再生] を押して画面上のすべての選手を移動できるようにするフットサル (屋内サッカー) コーチング アプリケーションを作成しています。プレーヤーは、プレーヤーの背景画像を持つ div で構成されます。

関数を使用してアニメーションを行っていjquery .animate()ます。

プレーヤーdiv's leftとtopCSS の位​​置属性を変更するだけです。

私は2つのことをしたいのですが、それがどのようにできるかわかりません:

  1. jQuery スライダーを作成し、アニメーションの進行に合わせて段階的に動かしたいと考えています。アニメーションを開始する前に、アニメーションの全長を計算することでこれを行うと思いますか?

  2. jQueryスライダーを前後に動かしたいと思います - アニメーションを逆にして、必要に応じて一時停止します。アニメーションのために div を移動していて、フレームごとのシーケンス アニメーションを行っていないことを考えると、それはまったく可能です。

4

2 に答える 2

3

アニメーションが始まる前に、開始位置を保存してみませんか？

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which
$(playerdiv).data("startTop",startposition.top);
$(playerdiv).data("startLeft",startposition.left);

後でそれを使用して取得できます

left = $(playerdiv).data("startTop")

等

ステップオプションを使用して、アニメーションへのコールバックを常に提供できます。これにより、それに応じてスライダーを更新できます。

$(playerdiv).animate({ 
    top : targetTop,
    left : targetLeft, 
    step, function(){ magic happens here
})
于 2009-03-22T02:45:54.213 に答える
0

私はこのようにします：

  1. ユーザーが [再生] をクリックすると、div の現在の位置から目的地までのアニメーションが開始されます。スライダーの位置に応じて、残り時間と div の位置を簡単に計算できます。

    • startingDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
    • startingDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
    • startingTime = totalDuration * sliderPosition;

    (または、sliderPosition が 0 から 1 の間のようなもの)

  2. ユーザーがスライダーをもう一度クリックした場合、すべての div で .stop() メソッドを呼び出します: そうすればアニメーションが停止し、それらを静的に設定できるようになります: div があるべき位置を計算し、それらを静的に移動します。その点。

  3. ユーザーがスライダーを「ドロップ」し、「再生」がまだアクティブになっている場合、アニメーションはスライダーがドロップされたポイントから前方に続行する必要があります。

あなたが取り組んでいる素晴らしいプロジェクトのようですね :)

于 2009-03-20T10:46:41.500 に答える