zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vue.js 数値の変化をドラムロールアニメーションする

Vue.jsの公式ドキュメントの状態のトランジションで紹介されている数値のドラムロールアニメーションをコンポーネントとして実装します。

公式のサンプルではTween.jsを使用していますが、今回は外部ライブラリを使用せずに作成します。

AnimatedNumber.vue
<template>
  <span>{{ animated_number }}</span>
</template>

<style scoped>
/*必要に応じて追加*/
</style>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      animated_number: 0
    };
  },
  watch: {
    value (newValue, oldValue) {
      let timeCnt = 0;
      let timer;
      const animate = () => {
        timeCnt++;
        if (timeCnt <= 60) {
          this.animated_number = Math.floor((newValue - oldValue) * timeCnt / 60) + oldValue;
          timer = setTimeout(() => {
            animate();
          }, 10);
        } else {
          clearTimeout(timer);
          timer = null;
          this.animated_number = newValue;
        }
      };
      animate();
    }
  },
  mounted () {
    this.animated_number = this.value;
  }
};
</script>
使用方法
<template>
  <div>
    <input v-model.number="num" type="number">
    <AnimatedNumber :value="num"></AnimatedNumber>
  </div>
</template>

<style scoped>
</style>

<script>
import AnimatedNumber from './AnimatedNumber.vue';
export default {
  components: { AnimatedNumber },
  data () {
    return {
      num: 0,
    };
  }
};
</script>

解説

propsで親から渡された値(value)をwatchで監視します。

valueが変更されるたびにwatch処理でanimated_numberを徐々に変化させます。

valueではなくanimated_numbertemplateで表示するようにすれば、徐々に変化する様子(アニメーション)が表示されるようになります。

ドラムロール

Tween.jsを使わずにドラムロール処理を実装しました。

1〜10に変化する時と、1〜1000に変化するときでアニメーションの長さが変わらないように、1ステップあたりの数値の変化量を工夫しています。

watchの処理ではアローファンクションを使っているのでthisのスコープには注意が必要です。


続きを表示

関連記事

  • vueコンポーネントでvue-routerのページ制御を行う

    vueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネン...


  • vueファイル(単一ファイルコンポーネント)をwebpackでビルド

    vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • vue-routerを導入してSPAを作成する

    Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション(spa)を作成します。最初にvue-routerのパッケージをインストールします。router-linkはナビ...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • Vue.js axiosをajaxライブラリとして導入する

    Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。axiosの設定用にhttp.jsというファイルを作成します。エントリポイントのapp...


  • Vue.jsを学習する上で知っておきたいES2015の文法

    Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...


  • Vue.js 独自のfilterを実装する

    Vue.jsで独自のfilterを実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...