animation - キャンバス アニメーション

Question

キャンバスを使用してグラフ スクリプトを作成しています。チャートにアニメーションを追加していますが、見た目が好きではありません。X 関数に setInterval を使用して長方形に高さを追加し、棒グラフを作成していますが、アニメーションをもっと滑らかにしたいのですが、アニメーションを行う別の方法はありますか?

Answer 1

ダメダメダメ。JS でアニメーションを作成するには、次の 3 つの方法があります。

1. setTimeout()
2. setInterval()
3. requestAnimationFrame

オプション #1 と #2 は、アニメーションを作成する昔ながらの方法です。オプション #3 は新しい仕様であり、ブラウザー自体が FPS を動的に制御するため、最もスムーズなアニメーションが得られます。以下は、すべてのブラウザー実装を処理する requestAnimFrame ラッパーを作成する、Paul Irish によって作成された素晴らしい shim です。

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage: 
// instead of setInterval(render, 16) ....

(function animloop(){
  render();
  requestAnimFrame(animloop, element);
})();

Answer 2

初期の高さ 0 の長方形があり、設定値に達するまで間隔ごとに高さを増やしていると仮定しています...そして、アニメーションを「よりスムーズ」にしたいですか?

より流動的にするには、setInterval [delay] の 2 番目のパラメーターを下げるだけで、最初のパラメーター [呼び出す関数] がさらに呼び出されます...

さらに、式を使用して最後にスローダウンのあるトゥイーンを追加できます
rect.h = (rect.h*N+targetHeight)/(N+1)... where N > 1...
そのため、最初はバーが大幅に成長し、最終的に目標の高さまで成長が遅くなります。