数字をアニメーションでイージング変化
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を使用したサンプル