Vue.js를 사용하여 드럼 롤러를 실현하다

계기

롤러가 뭐예요?

실시

<template>
  <input v-model.number="inputCount" type="number">
  <NumberDrumRoll :count="inputCount" /> 
</template>

<script lang="ts">
import Vue from 'vue';
import NumberDrumRoll from './NumberDrumRoll.vue';

export default Vue.extend({
  components: {
    NumberDrumRoll,
  },

  data: function() {
    return {
      inputCount: 0;
    };
  },
});
</script>

<template>
  <span>{{ rollingCount }}</span>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  props: {
    count: {
      type: Number,
      default: () => null,
    },
  },

  data: function () {
    return {
      rollingCount: this.count,
      intervalId: 0,
    };
  },

  watch: {
    // 親から送られてくる数値の変更を監視して、変更があればドラムロールを実行
    count(newVal: number, oldVal: number) {
      this.performDrumRolling(newVal, oldVal);
    },
  },

  methods: {
    // 0.5秒間で数値のドラムロールを実行するメソッド
    performDrumRolling(newVal: number, oldVal: number): void {
      // ドラムローリング中に再度値の変更があった場合を考えて、予め変更前の値でドラムローリングを終えたことにしておく
      this.terminateDrumRolling(oldVal);

      // 今回は0.5秒以内にドラムロールが完了するようにしているため、　その間にどれくらいずつ値を変化させていくかの数値。
      const countInterval = Math.abs(Math.floor((newVal - oldVal) / 50)) || 1;

      // setInterval メソッドを使用して、0.01秒間隔で数値の変更処理を実行する
      if (oldVal < newVal) {
        this.intervalId = window.setInterval((): void => {
          this.countUp(newVal, countInterval);
        }, 10);
      } else {
        this.intervalId = window.setInterval((): void => {
          this.countDown(newVal, countInterval);
        }, 10);
      },
    },
    // ドラムロール処理を最終値で完了して、タイマーを止める
    terminateDrumRolling(endVal: number): void {
      this.rollingCount = endVal;
      clearInterval(this.intervalId);
    },
    countUp(newVal: number, countInterval: number): void {
      if (newVal <= this.rollingCount) {
        this.terminateDrumRolling(newVal)
        return;
      }
      this.rollingCount = this.rollingCount + countInterval;
    },
    countDown(newVal: number, countInterval: number): void {
      if (newVal >= this.rollingCount) {
        this.terminateDrumRolling(newVal)
        return;
      }
      this.rollingCount = this.rollingCount - countInterval;
    },
  },
});
</script>

살짝 설명해주세요.

롤러를 설치할 때 반드시 고려해야 할 것은 何秒間で処理を完了させるのか과その間にいくつずつ数値を変化させるか이며, 이번에는 0.5秒間で処理を完了させて,変化前後の数値の差分を50で割った数ずつ変化させる의 형식으로 설치했다.(왜 그랬는지 그 설정치가 예뻐 보여서!)

구체적으로 말하면 이 부분에서 이루어진 거예요.p>

// 今回は0.5秒以内にドラムロールが完了するようにしているため、　その間にどれくらいずつ値を変化させていくかの数値。
const countInterval = Math.abs(Math.floor((newVal - oldVal) / 50)) || 1;

// setInterval メソッドを使用して、0.01秒間隔で数値の変更処理を実行する
if (oldVal < newVal) {
  this.intervalId = window.setInterval((): void => {
    this.countUp(newVal, countInterval);
  }, 10);
} else {
  this.intervalId = window.setInterval((): void => {
    this.countDown(newVal, countInterval);
  }, 10);
},

끝날 때