0

私はそのような単純な数学について理解するのに苦労しています.少なくともそれは単純であるべきだと思われます.

私は基本的にjQueryの機能をミラーリングしようとして.animateいますが、うまくいきません。

ここに私がこれまでに持っているものの簡略化されたバージョンがあります:

var args = {
  speed: 1000, // 1 second.
  left: 65 // distance.
}, rot, step;

// Terrible math.
rot = step = (((args.left / args.speed) * 10) - 0.10);

var t = setInterval(function() {
  if(elem.style.left >= args.left) {
    clearInterval(t);
    return;
  }
  rot += step;
  elem.style.left = rot;
}, 10);

非論理的なコード (または数学) を許してください。私は数時間いじり回しており、完全に正気を失いました。

4

3 に答える 3

1

編集：

これが私が行う方法です。

var start_time = Date.now();
// Get the starting time in milliseconds

var t = setInterval(function() {

    var delta_time = Date.now() - start_time;
    // Get time that has elapsed since starting

    if (delta_time >= 1000) {
        // if it's been a second

        clearInterval(t);
        // Stop the timer

        elem.style.left = args.left + 'px';
        // Set the element to exactly the value it should be (avoids having it set to a float value)

        return;
    }

    elem.style.left = delta_time * args.left / args.speed + 'px';
    // Move the element according to how much time has elapsed

}, 10);​

この方法にはいくつかの利点があります。たとえば、間隔を調整して多かれ少なかれ滑らかにすることができ、アニメーションが台無しになることはありません。

ソリューションに 1 秒以上かかった理由は、 の使用方法によるものですsetInterval。setIntervalコードの実行にかかる時間は考慮されていないため、合計時間は常に少し増加します。これは、デルタ タイミングを使用して修正できます (私の例のように)。

于 2012-09-13T05:26:53.657 に答える
0

まあ、それはあるべきです

var args = { ... }

elem が正しく設定されていると仮定すると、アニメーション化する属性のインライン スタイルが必要になります。また、「px」が付加されているため、スタイルを解析する必要がありますが、間隔関数内で計算を行った後はいつでも追加できます。

ここに何かを設定したので、設定などをいじることができます。

編集: http://jsfiddle.net/mb4JA/2/

edit2: これは 1 秒にする必要があります http://jsfiddle.net/mb4JA/4/

最終回答;) http://jsfiddle.net/mb4JA/10/

そこに任意の速度を入れて、その秒数だけアニメーション化できるはずです。

于 2012-09-13T05:24:26.907 に答える
0

sinとcosを使って回転を計算してみるとこんな感じ

newx = distance * Math.cos(direction) + x
newy = distance * Math.sin(direction) + y

よくわかりませんが、これで問題は解決します。スムーズな回転をしたいと思います

機能する関数として作成してみてください。数学に問題は見られません。

このような

function move(elem) {

var left = 0

function frame() {

left++  // update parameters

elem.style.left = left  // show frame

if (left == 100)  // check finish condition
clearInterval(id)
}

var id = setInterval(frame, 10) // draw every 10ms
}
于 2012-09-13T05:30:22.093 に答える