Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: 26 days ago
JSON representation

Super easy way to animate numbers.

Lists

README 

        
# animated-number-vue



![npm](https://img.shields.io/npm/dt/animated-number-vue.svg) [![Build Status](https://travis-ci.org/Leocardoso94/animated-number-vue.svg?branch=master)](https://travis-ci.org/Leocardoso94/animated-number-vue) [![](https://data.jsdelivr.com/v1/package/npm/animated-number-vue/badge)](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)



![](https://media.giphy.com/media/iMQAMgUSFrh7X2xBCZ/giphy.gif)



## 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)

[![Edit animated-number-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](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.