animated-number-vue-longmo
v1.0.1
Published
A vue component with number animation
Downloads
3
Maintainers
Readme
animated-number-vue
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
animated-number-vue
基于Vue2的一个简单的数字动画组件, 使用了 anime.
现场演示 here
用法
$ npm install @longmo/animated-number-vue
# OR
$ yarn add @longmo/animated-number-vue
<template>
<animated-number
:value="value"
:formatValue="formatToPrice"
:duration="300"
/>
</template>
<script>
import AnimatedNumber from "@longmo/animated-number-vue";
export default {
components: {
AnimatedNumber
},
data() {
return {
value: 1000
};
},
methods: {
formatToPrice(value) {
return `R$ ${value.toFixed(2)}`;
}
}
};
</script>
属性
初始化时使用以下属性 props
只有
value
是必填属性,其余的为选填的
| Prop Name | Type | Description |
| --------------------- | ----------------- |-------------------------------------------------------------------------------------------|
| value (required)
| [ Number, String] | 将设置动画的数字 |
| duration (optional)
| Number | 动画的持续时间 |
| round (optional)
| Number | 通过舍入值删除小数 |
| delay (optional)
| Number | 动画的延迟 |
| easing (optional)
| String | 你可以从这里找到所有有效值 here |
https://animejs.com/documentation/#linearEasing
回调属性
Execute a function at the beginning, during or when an animation or timeline is completed.
在动画或时间线开始、期间或完成时执行函数。
| Names | Types | Arguments | Info |
| ----------- | -------- | ------------------ | -------------------------------------------------- |
| formatValue | Function | value Number
| A function that will manipulate the animated value |
| update | Function | animation Object
| Called at time = 0 |
| run | Function | animation Object
| Called after delay is finished |
| begin | Function | animation Object
| Called after animation delay is over |
| complete | Function | animation Object
| Called only after all the loops are completed |
Format Value
formatValue()
用于格式化动画值.
Update
update()
在实例播放时,会在每一帧上调用.
Begin
begin()
在延迟结束后调用一次.
Check if the animation has begun with myAnimation.began
, return true
or false
.
Run
run()
在延迟结束后的每一帧调用.
Complete
complete()
在动画完成后调用一次.