https://github.com/positlabs/sprite-player

Web component for controlling sprite sheet animations.
https://github.com/positlabs/sprite-player

Last synced: about 1 month ago
JSON representation

Web component for controlling sprite sheet animations.

• Host: GitHub
• URL: https://github.com/positlabs/sprite-player
• Owner: positlabs
• License: mit
• Created: 2017-04-18T23:49:57.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-27T22:57:06.000Z (about 8 years ago)
• Last Synced: 2025-04-09T23:51:26.325Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://positlabs.github.io/sprite-player/examples/
• Size: 228 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# <sprite-player>

Web component for controlling sprite sheet animations.

[![npm version](https://badge.fury.io/js/sprite-player.svg)](https://www.npmjs.com/package/sprite-player)

	npm install --save sprite-player

## Demo

https://positlabs.github.io/sprite-player/examples/

![run animation](https://media.giphy.com/media/xUPGcttIpo6nPrNgpG/giphy.gif)

## Quickstart

	

	

	

	

	

	

	

## Documentation

### Attributes

**src**: (`string`) Path to sprite image. Required.

**rows**: (`int`) Number of rows in the sprite. Required.

**cols**: (`int`) Number of columns in the sprite. Required.

**frames**: (`int`) Number of frames in the animation. Defaults to `rows * cols`.

**fps**: (`Number`) Frames per second. Defaults to 30.

**autoplay**: (`Boolean`) Automatically play the animation as soon as the `src` is loaded. Defaults to `false`.

**loop**: (`Boolean`) Automatically replay the animation when it ends. Defaults to `false`.

### Properties

Note: All attributes are accessible as properties.

**paused**: (`Boolean`) State of the animation.

**duration**: (`Number`) Duration of animation in seconds.

### Methods

**play**: Plays the animation. Sets `paused` to `false`.

**pause**: Pauses the animation. Sets `paused` to `true`.

**reset**: Resets the animation to the first frame.

### Events

**play**: Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.

**playing**: Sent when the media begins to play (either for the first time, after having been paused, or after ending and then *restarting*).

**pause**: Sent when playback is paused.

**ended**: Sent when playback completes.

**loadstart**: Sent when loading of the media begins.

**load**: Sent when media is loaded.

**error**: Sent when media failed to load