sprite-animation
A Vue component for sprite-based animations
Installation
yarn add @twoavy/sprite-animation import SpriteAnimation from '@twoavy/sprite-animation'Usage
<sprite-animation ref="anim" :width="500" :height="500" :frames="30"
:duration="5" :sprite="require('@/assets/sprite.png')" />Props
| Name | Type | Default | Note |
|---|---|---|---|
| width | string | required | frame width |
| height | string | required | frame height |
| frames | number | required | number of frames |
| duration | number | required | duration of the animation in secs |
| sprite | string | required | path to the sprite image |
| loop | boolean | true | loop the animation (plays once otherwise) |
| autoplay | boolean | true | automatically start playing |
Methods
play()
// start animation if autoplay is set to false
this.$refs.anim.play()Events
- @start - animation started
- @loop - called on each animation iteration (if loop is set to true)
- @end - animation ended
- @cancel - animation was cancelled