vue实现数字过渡动画

Vue 数字过渡动画实现方法

使用 transition 和动态数据绑定

通过 Vue 的 transition 组件结合数据绑定实现数字变化时的过渡效果。定义数字变量，使用计算属性或方法动态更新数值。

<template>
  <div>
    <transition name="fade" mode="out-in">
      <span :key="currentNumber">{{ currentNumber }}</span>
    </transition>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0
    };
  },
  methods: {
    increment() {
      this.currentNumber += 1;
    }
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方库如 Tween.js

引入 Tween.js 实现平滑的数字过渡动画。通过补间动画让数字变化更加流畅。

<template>
  <div>
    <span>{{ animatedNumber }}</span>
    <button @click="startAnimation">开始动画</button>
  </div>
</template>

<script>
import TWEEN from '@tweenjs/tween.js';

export default {
  data() {
    return {
      number: 0,
      animatedNumber: 0
    };
  },
  methods: {
    startAnimation() {
      new TWEEN.Tween({ value: this.number })
        .to({ value: 100 }, 1000)
        .onUpdate(obj => {
          this.animatedNumber = obj.value.toFixed(0);
        })
        .start();

      function animate() {
        requestAnimationFrame(animate);
        TWEEN.update();
      }
      animate();
    }
  }
};
</script>

使用 vue-count-to 插件

安装 vue-count-to 插件，快速实现数字过渡效果。该插件提供了丰富的配置选项。

npm install vue-count-to

<template>
  <div>
    <countTo :startVal="0" :endVal="100" :duration="2000"></countTo>
  </div>
</template>

<script>
import countTo from 'vue-count-to';

export default {
  components: { countTo }
};
</script>

自定义指令实现数字动画

通过自定义指令监听数字变化，触发动画效果。适用于需要高度定制的场景。

<template>
  <div>
    <span v-number-animation="currentNumber"></span>
    <button @click="currentNumber += 10">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0
    };
  },
  directives: {
    numberAnimation: {
      bind(el, binding) {
        let animationDuration = 1000;
        let frameDuration = 1000 / 60;
        let totalFrames = Math.round(animationDuration / frameDuration);
        let easeOutQuad = t => t * (2 - t);

        let current = 0;
        let target = binding.value;
        let increment = (target - current) / totalFrames;

        let animate = () => {
          current += increment;
          el.textContent = Math.floor(current);

          if (current < target) {
            requestAnimationFrame(animate);
          } else {
            el.textContent = target;
          }
        };

        animate();
      },
      update(el, binding) {
        let animationDuration = 1000;
        let frameDuration = 1000 / 60;
        let totalFrames = Math.round(animationDuration / frameDuration);
        let easeOutQuad = t => t * (2 - t);

        let current = parseFloat(el.textContent) || 0;
        let target = binding.value;
        let increment = (target - current) / totalFrames;

        let animate = () => {
          current += increment;
          el.textContent = Math.floor(current);

          if (current < target) {
            requestAnimationFrame(animate);
          } else {
            el.textContent = target;
          }
        };

        animate();
      }
    }
  }
};
</script>

使用 CSS 动画结合 Vue

通过 CSS 关键帧动画与 Vue 数据绑定结合，实现数字过渡效果。

<template>
  <div>
    <span class="number" :class="{ animate: isAnimating }">{{ currentNumber }}</span>
    <button @click="changeNumber">变化数字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      isAnimating: false
    };
  },
  methods: {
    changeNumber() {
      this.isAnimating = true;
      setTimeout(() => {
        this.currentNumber += Math.floor(Math.random() * 100);
        this.isAnimating = false;
      }, 500);
    }
  }
};
</script>

<style>
.number {
  display: inline-block;
}
.animate {
  animation: pulse 0.5s;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>

以上方法涵盖了从简单到复杂的数字过渡动画实现，可根据项目需求选择合适的方式。