Skip to content

Latest commit

 

History

History
134 lines (115 loc) · 4.26 KB

README.md

File metadata and controls

134 lines (115 loc) · 4.26 KB

Phantascope

A jQuery plugin for animating sprites.

Usage

  1. 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>
  1. Download and include Phantascope in your document as well:
<script src="jquery.phantascope.js"></script>
  1. Call the Phantascope function in your document ready function, parsing in the required options for your animation
$(document).ready(function() {
  $('.sprite').phantascope({
    optionName: value
  });
});
  1. Enjoy super sweet frame based animations on you webpage!

Options

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.

Methods

Method can be called using the following syntax: $('.sprite').spritely("methodName", params). An example of this would be: $('.sprite').spritely("play", {fps: 30, animationPoints: [[6,1],[1,1]]});

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

Bugs

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!