JavaScriptで簡単に数字をアニメーションでイージング変化

数字をアニメーションでイージング変化

JavaScriptだけで数字をアニメーションでイージング変化するスクリプトを簡単に作成。

作成したものはCALC_TIMESで減少回数を指定してsetIntervalに設定したSPEEDで減少させていく単純なもの。

減少ではなく上昇にしたい場合は不等式を逆にする。

減少・上昇の場合は2つの数値を比べて条件分岐すれば簡単に作成可能だ。

var b = document.getElementById('b');
b.addEventListener('click', function() {
  var rFrom = parseInt(document.getElementById('r').value, 10);
  var rTo = parseInt(document.getElementById('rr').value, 10);
  if(rFrom !== rTo) {
    var CALC_TIMES = 30;
    var SPEED = 50;
    var rReduce = Math.floor((rFrom - rTo) / CALC_TIMES);
    var timer = setInterval(function() {
        if(rFrom > (rTo + rReduce)) {
            rFrom -= rReduce;
            r.value = rFrom;
        }
        else {
          r.value = rTo;
          clearInterval(timer);
        }
    }, SPEED);
  }
}, false);

数字をアニメーションでイージング変化させるサンプル

ライブラリを使用するならCountUp.js

自分でいろいろカスタマイズする必要がないのであればJavaScriptライブラリのCountUp.jsを使用すると便利。

CountUp.js

CountUp.jsを使用したサンプル