アニメーションを一工夫すると、自然な動きを実現できます。物体を単純に移動させるのは簡単ですが、それは自然ではありません。いわゆるイージングを付けることで、自然な動きに近づけられます。イージングは種類も多く、そのアルゴリズムも公開されています。 今回紹介するjQuery Numeratorは数字のカウントアップ/ダウンを滑らかに行ってくれるjQueryライブラリです。

jQuery Numeratorの使い方

実例です。

カウントアップが徐々に速くなり、目標の数字に近づくとゆっくりになります。イージングなしで線形にカウントアップさせたり、小数点以下の数字を追加することもできます。得点を表示する際に使ったり、カウントダウンに使ったりすると面白そうです。

jQuery NumeratorはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Jquery Numerator by garethdn garethdn/jquery-numerator: A jQuery plugin to animate numbers