Zenn
💯

【Vue】数値の変化をドラムロールさせる

2022/04/16に公開
JavaScript
Vue.js
Vue 3
tech

はじめに

計算結果の表示をドラムロール的に変化させられると、計算結果の変化が分かりやすくて捗りそうだったのでやり方を調べてみたら公式に載ってました。
今回はそれを元に少しアレンジしたので残します。

https://v3.ja.vuejs.org/guide/transitions-state.html#状態のトランジション

コード

解説

外部ライブラリ

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

これはGreenStockというJSのアニメーションライブラリです。

JS

watch

まずはwatchで数字の変化を元に計算結果を返します。
（同じコード書いてるけどここはもっと良い方法があるはず😓）

watch: {
    numberA() {
      newValue = this.numberA * this.numberB;
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    },
    numberB() {
      newValue = this.numberA * this.numberB;
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    }
  }

gsap.toはGSAPでゴールの状態を指定します。

gsap.to(アニメーションさせる要素,{プロパティ名:値,...});

computed

watchの変化後の数値をtweenedNumber変数で渡して、animatedNumberが変化する形です。

computed: {
    animatedNumber() {
      return this.tweenedNumber.toFixed(0);
    }
  },

Discussion