[React] アニメーション付き数値カウンターで視覚演出する「react-number-easing」の使い方

リアルタイムWebコンテンツにおいてプログレスUIを配置するケースは少なくない。これは進行状況を知らせるために用いられ、たとえばアップロード進捗やAPIリクエスト進捗など思い出される。

さてこのプログレスUI(進捗値)をページに描画するにあたり、瞬時に切り替わるような単純な差し替えでは面白くない。せっかくだから、なめらかに推移するようなエフェクトをかけてリアルタイム感を演出したい。

そんなニーズに最適なReact componentがある。

このエントリーでは、数値変化にアニメーションを与える「react-number-easing」を紹介したい。

導入方法

react-number-easing は、以下コマンドから導入できる。

インストール

$ npm install react-number-easing --save
# or
$ yarn add react-number-easing

設置

import NumberEasing from 'react-number-easing';

<NumberEasing
  value={15}
  speed={300}
  decimals={0}
  ease="quintInOut" />

props

NameDefaultHint
valuenull目標値を設定
speed500msアニメーションの速度を設定
easequintInOutアニメーション方式を設定
decimals0表示する小数点以下の桁数を設定
customFunctionRenderNumber(value).toString(decimals)レンダリング関数のカスタム設定

基本的な使い方

以下でreact-number-easingを使用したReact componentの例を示そう。6秒毎に数値がアニメーションする、というものだ。

import { useState, useEffect } from 'react';
import NumberEasing from 'react-number-easing';
​
var intervalId;
​
function App() {
  const [value, setValue] = useState(0);
​
  function onUpdate() {
    const val = Math.floor(Math.random() * 10001);
    setValue(val);
  }
​
  useEffect(() => {
    intervalId = setInterval(() => onUpdate(), 6000);
    return () => clearInterval(intervalId);
  }, []);
​
  return (
    <div className="App">
      <NumberEasing value={value} />
    </div>
  );
}
​
export default App;

まとめ

数値変化にアニメーションを与えるReactコンポーネント「react-number-easing」の紹介だった。

当該コンポーネントの使用は、いたって簡単でステートの更新で機能する。さらにpropsは少なく非常にシンプルな作りのため迷子になるようなことはなかった。アニメーション方式は内部でeasesライブラリを読み込んでいて、ひと通りのeasingは選択できる。雰囲気にあったものを適用するとよいだろう。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。