https://github.com/leocardoso94/animated-number-vue
Super easy way to animate numbers.
https://github.com/leocardoso94/animated-number-vue
animation anime numeric-animation vue
Last synced: 3 months ago
JSON representation
Super easy way to animate numbers.
- Host: GitHub
- URL: https://github.com/leocardoso94/animated-number-vue
- Owner: Leocardoso94
- License: mit
- Created: 2018-04-06T17:11:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T19:12:55.000Z (over 2 years ago)
- Last Synced: 2025-03-28T17:09:19.619Z (3 months ago)
- Topics: animation, anime, numeric-animation, vue
- Language: JavaScript
- Homepage: https://codesandbox.io/s/v68x95mo30
- Size: 762 KB
- Stars: 212
- Watchers: 4
- Forks: 30
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# animated-number-vue
 [](https://travis-ci.org/Leocardoso94/animated-number-vue) [](https://www.jsdelivr.com/package/npm/animated-number-vue)
> A simple vue animated number for Vue2, using [anime](https://github.com/juliangarnier/anime).
> Live demo [here](https://codesandbox.io/s/v68x95mo30)
## Usage
```bash
$ npm install animated-number-vue
# OR
$ yarn add animated-number-vue
```
```vue
import AnimatedNumber from "animated-number-vue";
export default {
components: {
AnimatedNumber
},
data() {
return {
value: 1000
};
},
methods: {
formatToPrice(value) {
return `R$ ${value.toFixed(2)}`;
}
}
};
```
[View demo here](https://codesandbox.io/s/v68x95mo30)
[](https://codesandbox.io/s/v68x95mo30)
## Props
Following `props` are used while initialization
> Note : Only `value` is a required prop. Others are optional
| Prop Name | Type | Description |
| --------------------- | ----------------- | ---------------------------------------------------------------------------------------------- |
| value `(required)` | [ Number, String] | number that will be animated |
| duration `(optional)` | Number | the duration of animation |
| round `(optional)` | Number | remove decimals by rounding the value |
| delay `(optional)` | Number | the delay of animation |
| easing `(optional)` | String | you can found all valid values [here](https://github.com/juliangarnier/anime/tree/v2.2.0#easing-functions) |
#### Callbacks props
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()` is used to format the animatedValue.
### Update
`update()` is called on every frame while the instance is playing.
### Begin
`begin()` is called once after the delay is finished.
Check if the animation has begun with `myAnimation.began`, return `true` or `false`.
### Run
`run()` is called every frame after the delay is finished.
### Complete
`complete()` is called once after the animation is finished.