Vue3+TS实现数字滚动效果CountTo组件

下面我将为您详细讲解“Vue3+TS实现数字滚动效果CountTo组件”的完整攻略。

1. 项目背景

数字滚动效果在 web 开发中经常用于展示数据增量或者倒计时情况，通过 CountTo 组件，我们可以方便地实现数字滚动动画效果。本文以 Vue3 和 TypeScript 的方式实现该组件。

2. 技术选型

CountTo 组件的实现需要使用到 Vue3 的响应式数据以及过渡动画效果，同时在实现过程中也需要考虑到代码的可维护性和可读性，因此我们选择使用 TypeScript 作为语言。

3. 实现方式

3.1. 安装依赖

首先，我们需要使用 Vue3，因此需要安装 @vue/cli 以及官方提供的 TypeScript 模板：

npm install -g @vue/cli
vue create --preset typescript my-project

在项目目录下安装 vue-typescript 对应插件以保证 TS 的正常使用：

npm install vue@next @vue/compiler-sfc @vue/runtime-core -D
npm install typescript ts-loader -D

3.2. 实现 CountTo 组件的 DOM 结构

CountTo 组件由多个数字组成，数字大小位置相同，只是数字内容不同，因此我们可以使用 Vue3 的 v-for 指令以及 :key 属性快速完成 CountTo 的 DOM 结构，CountTo 的模板代码如下：

<template>
  <div>
    <span v-for="(digit, index) in digits" :key="index" class="count-to-digit">
      {{ digit }}
    </span>
  </div>
</template>

3.3. 实现 CountTo 组件的动画效果

CountTo 的数字滚动效果需要运用到 Vue3 的过渡动画，我们需要使用 Vue3 的 Transition 组件，配合 CSS 过渡类名实现动画效果，CountTo 的动画效果代码如下：

<template>
  <div>
    <transition-group tag="span" name="count-to" class="count-to-container">
      <span v-for="(digit, index) in digits" :key="index" class="count-to-digit">
        {{ digit }}
      </span>
    </transition-group>
  </div>
</template>

<style>
.count-to-enter-active, .count-to-leave-active {
  transition: all 0.5s;
}
.count-to-enter, .count-to-leave-to {
  opacity: 0;
  transform: translateY(50%);
}
</style>

3.4. 实现 CountTo 组件的功能

在 CountTo 组件中，我们希望能够通过使用 props 接收传递过来的数字和动画持续时间，同时在 mounted 生命周期周期中开始数字的滚动动画。为了实现上述功能，我们还需要定义纯函数以完成 CountTo 组件的数字计算，并将计算结果绑定到 CountTo 的数据模型中，CountTo 组件的完整代码如下：

<template>
  <div>
    <transition-group tag="span" name="count-to" class="count-to-container">
      <span v-for="(digit, index) in digits" :key="index" class="count-to-digit">
        {{ digit }}
      </span>
    </transition-group>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue';

export default defineComponent({
  props: {
    start: {
      type: Number,
      default: 0,
      required: true
    },
    end: {
      type: Number,
      default: 100,
      required: true
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  setup(props) {
    const digits = ref<Array<number>>([]);
    const intervalId = ref<NodeJS.Timeout | null>(null);

    /**
     * 计算 CountTo 组件的数字
     * @param progress 进度值
     */
    function calculateDigits(progress: number) {
      const numbers = Math.abs(props.end - props.start) + 1;
      const step = Math.floor((progress * numbers) / 100);

      digits.value = []
        .concat(props.start + step)
        .toString()
        .split('')
        .map((digit: string) => parseInt(digit));
    }

    /**
     * 开始数字滚动动画
     */
    function startAnimation() {
      let start = 0;

      intervalId.value = setInterval(() => {
        const progress = start / props.duration;

        if (progress < 1) {
          calculateDigits(progress * 100);
        } else {
          clearInterval(intervalId.value as NodeJS.Timeout);
          calculateDigits(100);
        }

        start += 10;
      }, 10);
    }

    onMounted(() => {
      if (props.start !== props.end) {
        startAnimation();
      } else {
        digits.value = [props.start];
      }
    });

    return {
      digits
    };
  }
});
</script>

<style>
.count-to-enter-active,
.count-to-leave-active {
  transition: all 0.5s;
}
.count-to-enter,
.count-to-leave-to {
  opacity: 0;
  transform: translateY(50%);
}
</style>

3.5. 使用 CountTo 组件

使用 CountTo 组件也非常简单，我们只需要传递 start、end 和 duration 三个 props 就可以完成数字滚动的动画效果。如下所示：

<template>
  <div class="container">
    <h1>CountTo Component Demo</h1>
    <div class="intro">
      Want to count from <strong>100</strong> to <strong>10</strong>, in <strong>3</strong> seconds?
    </div>
    <div class="demo">
      <count-to :start="100" :end="10" :duration="3000" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import CountTo from '@/components/CountTo.vue';

export default defineComponent({
  components: { CountTo }
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro {
  margin-bottom: 20px;
}
.demo {
  font-size: 36px;
  font-weight: bold;
  color: #ff3e00;
  padding: 20px;
  border: 5px solid #ff3e00;
  border-radius: 5px;
}
</style>

4. 总结

通过以上我们可以发现 Vue3 和 TypeScript 配以过渡动画类名可以非常方便地实现数字滚动效果，同时对与高扩展、高可维护性有着很好的帮助。