https://github.com/soixantecircuits/vue-sprite-animator
vue.js component for animating spritesheets
https://github.com/soixantecircuits/vue-sprite-animator
Last synced: about 2 months ago
JSON representation
vue.js component for animating spritesheets
- Host: GitHub
- URL: https://github.com/soixantecircuits/vue-sprite-animator
- Owner: soixantecircuits
- Created: 2018-01-23T10:10:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-23T14:35:54.000Z (over 7 years ago)
- Last Synced: 2025-03-24T08:18:28.925Z (3 months ago)
- Language: Vue
- Size: 937 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-sprite-animator
## Install
Install with npm or yarn:
```sh
$ npm install --save vue-sprite-animator
# or
$ yarn add vue-sprite-animator
```
## Example
> Use [spritesheet.js](https://github.com/krzysztof-o/spritesheet.js/) to generate spritesheet with the `jsonarray` format.
#### Install the plugin
```js
import Vue from 'vue'
import App from './App'
import VueSpriteAnimator from 'vue-sprite-animator'
Vue.use(VueSpriteAnimator)
new Vue({
components: { App },
template: ''
}).$mount('#app')
```
#### Use it
```vue
play
stop
export default {
methods: {
play () {
this.$refs.sprite.play()
},
stop () {
this.$refs.sprite.stop()
}
}
}
```
## Available props
* `spritesheet` *(required)*: path to the spritesheet image
* `json` *(required)*: path to the spritesheet json descriptor (use [spritesheet.js](https://github.com/krzysztof-o/spritesheet.js/))
* `fps`: default is `30`
* `autoplay`: default is `true`
* `yoyo`: default is `false`
* `id`: default is `vue-sprite`