[Vue.js]数字の変化をジャカジャカとドラムロールさせる

Vue.jsで何かを計算するスクリプトを書いた場合、反映は一瞬で行われます。

これはこれで良いのですが、数字の変更をドラムロールのようにジャカジャカさせたいなと思い、調べたのでメモ。

Vue.jsのリファレンスにあった

調べたらすぐに公式サイトにありました。

ここでは状態のトランジションということで、ウォッチャによる状態のアニメーションが紹介されています。

Vue.js公式サイト

watchプロパティで状態の変化を監視し、変更後の値をアニメーションで実行しています。

アニメーション部分はライブラリのGreenSockで実装しています。

GreenSock公式サイト

コード紹介

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>

new Vue({
  el: '#animated-number-demo',
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    }
  }
})

watchプロパティでnumberの値を監視しています。

何か数字が入力された場合に、gsap.to()メソッドが実行されます。

ここは、GreenSock側のメソッドです。

gsap.to(対象, { duration: アニメーション秒数, 変数: 変更された値 });

this.$dataはdataプロパティを参照しています。