1

シーンに、特定の開始速度で指定された時間間隔で回転させたい立方体があります。
さらに、立方体の終了角度は開始角度と同じである必要があります。したがって、時間間隔の±5％の偏差を許容することを考えました。

これが私の現在のステータスです：http：//jsfiddle.net/5NWab/1/。 それが現在機能
しているのも不思議ではありません。時間間隔を「3000」などで変更すると、問題が発生します：http: //jsfiddle.net/5NWab/2/。

私のキューブの基本的なmove（）メソッド：

Reel.prototype.move = function (delta) {
    if (this.velocity < 0 && this.mesh.rotation.x == 0) {
        return false;
    }

    // Create smooth end rotation
    if (this.velocity < 0 && this.mesh.rotation.x != 0) {
        this.mesh.rotation.x += Math.abs(delta * this.speedUp * 0.5 * this.timeSpan);
        if (Math.abs(this.mesh.rotation.x - 2 * Math.PI) < 0.1) {
            this.mesh.rotation.x = 0;
        }
    }

    else {
        this.mesh.rotation.x += delta * this.velocity;

        this.time -= delta;
        this.velocity = this.speedUp * this.time;
    }
}

問題は、自分のトピックを達成するための解決策や方法を考えることができないということです。delta変数が一定で あれば、それほど複雑ではありません。を使用しているので、それは周り
にある はずです。 60fps = 1000/60requestAnimationFrame()

私はまた、解決策を見つけるのに役立つ可能性のあるこの質問を見つけました。

私はコードがどちらかでなければならないと思います

  • 実際の終わりに達する前に速度を遅くします。
    これは、最終的な角度が目的の（開始）角度よりも少し大きい場合に当てはまります。

  • または、実際の終了に達した後、回転速度を上げる必要があります。
    これは、最終的な角度が目的の（開始）角度よりも少し小さい場合に当てはまります。

しかし、角度が目的の角度から半サイクル離れている場合（つまり、180°またはPI）はどうなりますか？

私の質問を明確にするために、ここに私の既知と未知のものがあります：

既知：

  • 開始速度
  • 時間間隔
  • 開始角度（通常は0）

回転の終了時に立方体の開始角度/位置を同じにしたいと思います。FPSカウントは一定ではないため、キューブを目的の位置に配置するには、時間間隔を短縮または延長する必要があります。

4

2 に答える 2

1

これが1つの可能な方法ですが、私が望むほど良くはありません：http: //jsfiddle.net/5NWab/8/

アイデアは、キューブが開始回転（0）に到達するために回転しなければならない距離が大きくなるポイントに到達するまで、残りの時間に基づいて、速度を徐々に下げることです。または、現在の速度と現在の残り時間で可能な回転量に等しい。その後、残り時間を無視し、残りの回転量に比例して速度を落とします。

これは特定の場合にはかなりうまく機能しますtimeSpansが、他の場合には、スローダウンアニメーションの終了に少し時間がかかります。

于 2012-09-27T22:12:40.993 に答える
1

回転を特定の時間に特定の角度で終了させたい場合は、現在のコード（2012-09-27）のように回転を継続的にデクリメントするのではなく、初期化時に目標時間と回転を設定することをお勧めします。アニメーションを作成し、フレームの再計算時に正しい回転を計算します。

したがって、正弦波の速度曲線を実行している場合（簡単に出入りでき、中央が線形で、それを計算するための優れたネイティブ関数）、（変数を使用しない擬似コード）：

//in init
var targetTime = now + animationTime;
// normalize the length of the sine curve
var timeFactor = pi/animationTime;
var startAngle = ...
var endAngle = ...
var angleChange = endAngle - startAngle;

// inside the animation, at some time t
var remainingT = targetTime - t;
if(remainingT <= 0) {
    var angle = endAngle;
} else {
    var angle = startAngle + cos(remainingT * timefactor) * angleChange;
}

[andle計算にstartAngleを追加するために編集]

cos関数は奇数（つまり、原点に関して対称）であるため、tがtargetTimeに近づくと、remainingTはゼロに近づき、曲線上でpiから0に逆方向に移動します。罪の形の曲線はゼロ（および円周率）に向かって平坦になるため、最後（および最初）で緩和されます。targetTimeまたはそれ以降の角度は明示的にゼロ化されるため、フレームレートのジッターは発生しません。ただそれを無限のループに押し込むだけではありません。

于 2012-09-27T22:27:44.123 に答える