A jQuery plugin for animating sprites.
- Phantascope has only dependancy; jQuery. You can download your own copy of jQuery at http://jquery.com or link to the Google hosted script:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>- Download and include Phantascope in your document as well:
<script src="jquery.phantascope.js"></script>- Call the Phantascope function in your document ready function, parsing in the required options for your animation
$(document).ready(function() {
$('.sprite').phantascope({
optionName: value
});
});- Enjoy super sweet frame based animations on you webpage!
| Option | Type | Default | Description |
|---|---|---|---|
| fps | Int | 24 | The number of frames per second the animation should run at. |
| layout | Array | [6] | An array containing the number of frames on each row of the sprite. The default describes a sprite containing one row of six frames. For example, a sprite sheet consisting of three rows, the first two containing six frames and the last row containing four frames would be described as: [6,6,4] |
| animationPoints | Array | [ [1,1], [1,6] ] |
The points through which the animation will play. Each point is an array, the first value refering to the column, the second to the row. This default value will play from the first frame to last frame (based upon the default layout of six frames on one row). You can use as many points as you want, and the animation can play either forward or backwards. For example, to update the current animation to reverse and play back to the start you would parse these settings: [[1,1], [1,6], [1,1]]. |
| loop | Int/String | 1 | Number of times the animation should loop. For an infinite loop use the string "*". |
| autoStart | Boolean | false | Whether to play the animation upon initialisation. |
| resetAtEnd | Boolean | false | When complete reset the sprite to the starting frame. |
| onComplete | Function | null | Callback fired when the animation is complete. |
Method can be called using the following syntax:
| Method | Parameters | Description |
|---|---|---|
| play | options (object) | Start playing the animation from it's current point. You can also update any of the settings of that animation with the options above. |
| update | options (object) | Update any of the settings of that animation with the options above. |
| gotoFrame | point (array) | Move to the specified frame |
| pause | none | Pause the animation |
| stop | none | Stop the animation |
| destroy | none | Remove all plugin functionality from the element |
This project is still in beta so please inform me of any bugs you find here: [email protected]
I hope you enjoy using this plugin!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent