在Vue3中封装一个数字滚动效果的组件

前端大大怪
582 阅读4分钟

在Vue3中封装一个数字滚动效果的组件

在Vue3项目开发中，我们常常需要为页面添加一些生动且富有交互性的组件来提升用户体验。本文将详细介绍如何封装一个具有数字滚动效果的组件，该组件能够与页面滚动巧妙结合，带来独特的视觉感受。

一、组件功能概述

此组件旨在接收外部传入的数值及动画持续时间参数，在页面滚动到特定位置时，触发数字从初始值平滑滚动至目标值的动画效果，并且当传入数值发生变化时，能够自动重新执行动画以更新显示。

二、代码实现剖析

（一）依赖引入

import { nextTick, reactive, ref, watch, onMounted } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

首先，我们从Vue框架引入了一系列关键函数和钩子，如nextTick用于在DOM更新循环后执行回调，reactive和ref用于创建响应式数据，watch用于监听数据变化，onMounted在组件挂载时执行特定操作。同时，引入强大的gsap动画库及其ScrollTrigger模块，为实现滚动触发动画奠定基础。

（二）属性接收定义

//接收需要实现滚动的数据
const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
  duration: {
    type: Number,
    default: 1,
  },
});

通过defineProps函数，我们定义了组件接收的两个重要属性。value属性指定了数字滚动要达到的目标数值，类型为Number且默认值为0；duration属性则确定了动画的持续时间，同样为Number类型，默认时长1秒。这些属性使得组件具有良好的灵活性和可定制性，能够适应不同的应用场景需求。

（三）响应式数据初始化

const id = ref(null);
//初始值
const d = reactive({
  num: 0,
});

这里创建了两个重要的响应式数据。id变量通过ref创建，初始值为null，后续将被赋予一个随机生成的字符串，用于唯一标识组件元素，以便与gsap动画的滚动触发条件精准关联。d对象通过reactive创建，其num属性初始化为0，这个属性将作为动画的核心数据，在动画执行过程中从初始值逐渐变化为目标值。

（四）动画实现方法

//实现动画的方法
function AnimateToValue() {
  gsap.to(d, {
    scrollTrigger: ".num-" + id.value,
    duration: props.duration,
    num: props.value,
  });
}

AnimateToValue函数是组件动画效果的核心驱动。它利用gsap的to方法对d对象进行动画操作。其中，scrollTrigger属性设置为与id值相关联的特定CSS选择器字符串，确保动画在页面滚动到对应元素时触发；duration属性直接引用组件接收的props.duration，实现动画时长的灵活设定；num属性则指定了动画要将d.num变化到的目标值props.value。

（五）组件挂载逻辑

onMounted(() => {
  id.value = Math.random().toString(16).slice(2);

  nextTick(() => {
    gsap.registerPlugin(ScrollTrigger);
    AnimateToValue();
  });
});

当组件挂载完成后，在onMounted钩子中，我们首先为id变量赋予一个随机生成的十六进制字符串（去除前两位），作为元素的唯一标识。然后，借助nextTick函数，在DOM更新完成后，注册ScrollTrigger插件到gsap库，并立即执行AnimateToValue函数，启动数字滚动动画，使数字从初始值0开始，按照设定的条件向目标值滚动。

（六）属性值变化监听

//监听传过来的值是否变化，如果变化了，就执行一次
watch(
  () => props.value,
  () => {
    nextTick(() => {
      gsap.registerPlugin(ScrollTrigger);
      AnimateToValue();
    });
  }
);

通过watch函数，我们持续监听props.value的变化。一旦该值发生改变，在nextTick函数确保DOM更新后，再次注册ScrollTrigger插件（防止插件未注册或重新注册的情况），然后重新执行AnimateToValue函数，使数字动画能够根据新的目标值重新启动，从而实现动态更新数字滚动效果的目的。

（七）模板结构

<template>
  <span :class="'num-' + id">
    {{ d.num.toFixed(0) }}
  </span>
</template>

在组件模板中，我们定义了一个<span>元素。通过动态绑定类名:class="'num-' + id"，将id变量与num-字符串拼接作为类名，这不仅用于样式设置，更与gsap动画的滚动触发条件紧密相连。而{{ d.num.toFixed(0) }}则在<span>元素内展示d.num的值，并通过toFixed(0)方法将其保留为整数，随着动画的进行，这里显示的数字将动态变化，直观呈现数字滚动效果给用户。

通过以上各个部分的紧密协作，我们成功封装了一个在Vue3中具有数字滚动效果且与页面滚动深度结合的组件，它能够在多种场景下为页面增添生动性和交互性，提升用户的视觉体验和操作感受。

（八）补充

因为gsap动画库采用了插件式的架构来扩展其功能。ScrollTrigger是一个独立的插件，它并不是gsap核心库的一部分。就像安装软件插件来为软件添加新功能一样，在使用ScrollTrigger插件之前，需要通过gsap.registerPlugin(ScrollTrigger)来将这个插件注册到gsap库中。只有注册后，gsap才能识别并使用ScrollTrigger提供的与滚动相关的动画触发功能。

avatar
文章
阅读
粉丝