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

这是一个基于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

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?