2

描画される円/パイである画像プリロード アニメーションを構築しています。各「スライス」は totalImages / imagesLoaded です。したがって、4 つの画像があり、2 つが読み込まれた場合、時間の経過とともに 180 まで描画されます。

私は requestAnimFrame を使用していますが、これはうまく機能しており、アニメーションを時間に制限するために deltaTime を設定していますが、数学に頭を悩ませています。私が得ることができる最も近いものは、それがアニメーション化し、本来あるべき場所に近づくことですが、その後、値の増分はますます小さくなります。基本的に完成値に達することはありません。(例として、1 つの画像が読み込まれた場合は 90 度)。

var totalImages = 4;
var imagesLoaded = 1;
var currentArc = 0;

function drawPie(){
  var newArc = 360 / totalImages * this.imagesLoaded // Get the value in degrees that we should animate to
  var percentage = (isNaN(currentArc / newArc) || !isFinite(currentArc / newArc)) || (currentArc / newArc) > 1 ? 1 : (currentArc / newArc); // Dividing these two numbers sometimes returned NaN or Infinity/-Infinity, so this is a fallback
  var easeValue = easeInOutExpo(percentage, 0, newArc, 1);

  //This animates continuously (Obviously), because it's just constantly adding to itself:
  currentArc += easedValue * this.time.delta;

  OR

  //This never reaches the full amount, as increments get infinitely smaller
  currentArc += (newArc - easedValue) * this.time.delta;
}

function easeInOutExpo(t, b, c, d){
  return c*((t=t/d-1)*t*t + 1) + b;
}

私はすべての正しい要素と価値観を持っているように感じます. 私はそれらを間違ってまとめているだけです。

ありとあらゆる助けをいただければ幸いです。

4

1 に答える 1

2

あなたは緩和のアイデアを持っています。現実には、ある時点で値を制限します。少し学習したい場合は、ゼノのパラドックス
(ここで適切なのはアキレスと亀) をブラッシュ アップできます。これは非常に短いです... 二分法パラドックスは同じコインの反対側です。

基本的に、「ここ」または「あそこ」がどこにあるかに関係なく、途中にいるだけなので、「最後の」ステップを実行することはできません。
そして、イージングなどの分数を扱う場合、それはまさに真実です。いつでも小さくなれます。

したがって、解決策はそれをクランプすることです。更新で移動できる最小量を設定します (2 ピクセル、1 ピクセル、または 0.5 ピクセルなど)。

別の方法 (最終的には似ていますが、おそらく少しジャンプします) は、距離のしきい値を設定することです。イージングを継続するのではなく、「ホームから 4px 以内になったらすぐに最後までスナップする」と言うか、線形モデルに切り替えます。

于 2013-02-18T12:00:00.893 に答える