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