基于animate动画库的数字增长动画组件

最新推荐文章于 2023-11-16 17:32:38 发布

原创最新推荐文章于 2023-11-16 17:32:38 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #ecmascript #前端框架

本文介绍了一款基于Anime动画库的数字增长动画组件，适用于动态图表统计，可在Vue项目中实现数值变化的平滑过渡。组件支持设置动画时长、延时及easing效果，安装简便。

这是一个基于anime动画库的数字增长动画组件，适用于动态图表统计中，可以设置动画效果时长、延时以及基于easing的动画效果。

安装

我们通过npm安装

npm install --save animated-number-vue

应用

<template>
    <animated-number 
    :value="value" 
    :formatValue="formatToPrice" 
    :duration="300"
    ></animated-number>
</template>
<script>
import AnimatedNumber from "animated-number-vue";

export default {
  components: {
    AnimatedNumber
  },
  data() {
    return {
      value: 1000
    }
  },
  methods: {
    formatToPrice(value) {
      return `$ ${value.toFixed(2)}`;
    }
  }
};
</script>

组件参数
只有value属性是必须的，其他选项可选。

属性类型说明
value Number, String 用于动画效果的数值
duration Number 动画效果时长
delay Number 动画效果延时
easing String 动画效果easing function
更多使用说明请查看项目地址：https://github.com/Leocardoso94/animated-number-vue