1

特定の期間にわたって div の境界線の幅を変更し、div の位置を同じ量だけオフセットしようとしています。増分は次のように計算されます: デルタ幅/デルタ時間 (時間は for ループで導出されます)

var widthchange = (width2-width1)/(t2-t1)

このような値が得られます（たとえば）

widthchange = 2.199999999999843

したがって、幅をインクリメントすると:

___ .style.borderWidth =(current += widthchange)+"px "+current+"px "+current+"px "+current+"px"

配置をオフセットします（この場合）

___.style.top =(current -= widthchange)+"px "+current+"px "+current+"px "+current+"px"

変更が発生すると、div がわずかに前後に揺れます。

問題は、幅が最も近いピクセルに丸められ (私は信じています)、位置がそうではないことです。丸めの多くの組み合わせを試しましたが、増分が整数でない限り、幅調整とオフセットは正確に等しくなりません。

最も近いピクセルへの丸めが幅で起こっていることを誰かが確認できますか? または、これを適切に機能させる方法について何かアドバイスをください。

ありがとう

4

1 に答える 1

2

これを行うことでこれを解決できます：

  1. 希望の移動量を計算する
  2. 整数値に丸める (または切り捨てる)。
  3. 新しい整数移動量で何歩か計算する
  4. 正確に整列するために最終ステップに必要なピクセル数を計算します

コードは次のようになります。テストされていないコードを削除すると思います...

var totalWidth = width2-width1; // must be positive
var count = t2-t1; // must be positive
var widthchange = totalWidth/count; 

var iWidthChange = Math.floor(widthchange);
var pixelsToMove = Math.floor(totalWidth / iWidthchange);
var finalPixelsToMove = totalWidth - (pixelsToMove * count);

for (var i=0 ; i < (t2-t1); ++i) {
    ... move one increment of 'pixelsToMove' ...
}
... move one final increment of 'finalPixelsToMove'
于 2013-05-29T17:50:35.427 に答える