1

2 人のアスリートが互いにレースをしているシミュレーションを実行したいと考えています。3 つのスプリット タイムと 2 つのトランジション タイムがあります。

したがって、レースは次のようになります: スプリット 1、トランジション 1、スプリット 2、トランジション 2、スプリット 3

私はこのようにシミュレートしようとしました：

$(window).load(function(){
jQuery("#box1").animate({ width: "100%" }, {duration: 100}).animate({ width: "100%" }, 10>).animate({ width: "100%" }, 1000%>).animate({ width: "100%" }, 100%>).animate({ width: "100%" }, 50);
jQuery("#box2").animate({ width: "100%" }, {duration: 50}).animate({ width: "100%" }, 10).animate({ width: "100%" }, 2000).animate({ width: "100%" }, 100).animate({ width: "100%" }, 500);
});

Athlet 1 (box1) がすべてのスプリットで動作しているよりも速い場合。しかし、上記の例では、Athlet 2 は最初のスプリットで速く、2 番目のスプリットで遅くなるはずです。しかし、これは機能していません。

HTML コード:

<div id="box1">Athlet 1</div>
<div id="box2">Athlet 2</div>

手伝ってくれませんか？

ドイツ語の例はここにあります: http://www.trinews.at/trimag/index.asp?f=head2head&VID=703&athlet1=117252&athlet2=117256

ありがとう

4

2 に答える 2

1

このフィドルをチェックしてください：
http://jsfiddle.net/ML3h6/
必要なものではありませんか？

または、関数に時間を秒単位で渡すことができる例を次に示しますrace():
http://jsfiddle.net/nUBqk/

于 2012-08-17T11:33:15.627 に答える
1

@LLAliveが作成したものから、私はあなたの例として機能するように始めて試みました.

これが私がこれまでに思いついたものです

http://jsfiddle.net/ML3h6/6/

入力を 3 つの分割に分割し、それらを秒に変換した後、エントリに従ってアニメーションを実行します。アニメーションは 3 つの分割に分割され、結果は期待どおりです。

元：

プレイヤー 1: 5 秒 ==> 6 秒 ==> 7 秒 = 18 秒

プレイヤー 2: 8 秒 ==> 5 秒 ==> 5 秒 = 18 秒

これらの数値を試してみると、期待どおりに機能し、両方とも同じ合計時間で終了することがわかりますが、現在の分割によって異なります。

試してみて、これがあなたの望むものかどうか教えてください。

改めて、「 LLAlive」のおかげで

* *更新:あなたの例に合わせて「イージング」を変更しました。実際の実行中の div としてより自然になりました:) チェックしてください: http://jsfiddle.net/ML3h6/7/

于 2012-08-17T12:00:18.477 に答える