55

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

 5 years ago
source link: https://www.helloweba.net/javascript/591.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK