This library is deprecated. Try its replacement pixi-ease on github or npm. Same functionality, new packaging, better events and easier cleanup.
animate.js
yet another javascript animation library (designed specifically for games and PIXI.js)
Live Example
https://davidfig.github.io/animate/
Installation
npm install yy-animate
API Reference
Classes
angleanimate object's {x, y} using an angle
faceRotates an object to face the target
movieanimate a movie of textures
shakeshakes an object or list of objects
targetmove an object to a target's location
tintchanges the tint of an object
toanimate any numeric parameter of an object or array of objects
waitbase class for all animations
Functions
load(object(s), load, [options])restart an animation = require(a saved state
angle
animate object's {x, y} using an angle
new angle(object, angle, speed, [duration], [options])
| Param | Type | Default | Description |
|---|---|---|---|
| object | object |
to animate | |
| angle | number |
in radians | |
| speed | number |
in pixels/millisecond | |
| [duration] | number |
0 |
in milliseconds; if 0, then continues forever |
| [options] | object |
@see Wait |
face
Rotates an object to face the target
new face(object, target, speed, [options])
| Param | Type | Description |
|---|---|---|
| object | object |
|
| target | Point |
|
| speed | number |
in radians/millisecond |
| [options] | object |
@see Wait |
| [options.keepAlive] | boolean |
don't stop animation when complete |
movie
animate a movie of textures
Kind: global class
Examples: // animate sprite to (20, 20) over 1s using easeInOuTsine, and then reverse the animation
new Animate.movie(sprite, [texture1, texture2, texture3], 500);
new movie(object, textures, [duration], [options])
| Param | Type | Default | Description |
|---|---|---|---|
| object | object |
to animate | |
| textures | array |
parameters to animate, e.g.: {alpha: 5, scale: {x, 5} rotation: Math.PI} | |
| [duration] | number |
0 |
time to run (use 0 for infinite duration--should only be used with customized easing functions) |
| [options] | object |
||
| [options.wait] | number |
0 |
n milliseconds before starting animation (can also be used to pause animation for a length of time) |
| [options.pause] | boolean |
start the animation paused | |
| [options.repeat] | boolean | number |
true: repeat animation forever; n: repeat animation n times | |
| [options.reverse] | boolean | number |
true: reverse animation (if combined with repeat, then pulse); n: reverse animation n times | |
| [options.continue] | boolean | number |
true: continue animation with new starting values; n: continue animation n times | |
| [options.load] | function |
loads an animation using a .save() object; note the * parameters below cannot be loaded and must be re-set | |
| [options.ease] | function |
function from easing.js (see http://easings.net for examples)* | |
| [options.renderer] | Renderer |
sets Renderer.dirty for each loop* | |
| [options.onDone] | function |
function pointer for when the animation expires* | |
| [options.onCancel] | function |
function pointer called after cancelled* | |
| [options.onWait] | function |
function pointer for wait* | |
| [options.onFirst] | function |
function pointer for first time update is called (does not include pause or wait time)* | |
| [options.onEach] | function |
function pointer called after each update* | |
| [options.onLoop] | function |
function pointer called after a revere, repeat, or continue* |
shake
shakes an object or list of objects
new shake(object, amount, duration, options)
| Param | Type | Description |
|---|---|---|
| object | object | array |
or list of objects to shake |
| amount | number |
to shake |
| duration | number |
(in milliseconds) to shake |
| options | object |
(see Animate.wait) |
target
move an object to a target's location
new target(object, target, speed, [options])
move to a target
| Param | Type | Description |
|---|---|---|
| object | object |
object to animate |
| target | object |
object needs to contain {x: x, y: y} |
| speed | number |
number of pixels to move per millisecond |
| [options] | object |
@see Wait |
| [options.keepAlive] | boolean |
don't cancel the animation when target is reached |
tint
changes the tint of an object
new tint(object, tint, [duration], [options])
| Param | Type | Default | Description |
|---|---|---|---|
| object | PIXI.DisplayObject | Array.<PIXI.DisplayObject> |
||
| tint | number |
||
| [duration] | number |
0 |
in milliseconds, if 0, repeat forever |
| [options] | object |
@see Wait |
to
animate any numeric parameter of an object or array of objects
Kind: global class
Examples: // animate sprite to (20, 20) over 1s using easeInOuTsine, and then reverse the animation
new Animate.to(sprite, {x: 20, y: 20}, 1000, {reverse: true, ease: Easing.easeInOutSine});
// animate list of sprites to a scale over 10s after waiting 1s
new Animate.to([sprite1, sprite2, sprite3], {scale: {x: 0.25, y: 0.25}}, 10000, {wait: 1000});
new to(object, goto, [duration], [options])
| Param | Type | Default | Description |
|---|---|---|---|
| object | object |
to animate | |
| goto | object |
parameters to animate, e.g.: {alpha: 5, scale: {x, 5} rotation: Math.PI} | |
| [duration] | number |
0 |
time to run (use 0 for infinite duration--should only be used with customized easing functions) |
| [options] | object |
||
| [options.wait] | number |
0 |
n milliseconds before starting animation (can also be used to pause animation for a length of time) |
| [options.pause] | boolean |
start the animation paused | |
| [options.repeat] | boolean | number |
true: repeat animation forever; n: repeat animation n times | |
| [options.reverse] | boolean | number |
true: reverse animation (if combined with repeat, then pulse); n: reverse animation n times | |
| [options.continue] | boolean | number |
true: continue animation with new starting values; n: continue animation n times | |
| [options.orphan] | boolean |
delete animation if .parent of object (or first object in list) is null | |
| [options.load] | function |
loads an animation using an .save() object; note the * parameters below cannot be loaded and must be re-set | |
| [options.ease] | function |
function from easing.js (see http://easings.net for examples)* | |
| [options.renderer] | Renderer |
sets Renderer.dirty for each loop* | |
| [options.onDone] | function |
function pointer for when the animation expires* | |
| [options.onCancel] | function |
function pointer called after cancelled* | |
| [options.onWait] | function |
function pointer for wait* | |
| [options.onFirst] | function |
function pointer for first time update is called (does not include pause or wait time)* | |
| [options.onEach] | function |
function pointer called after each update* | |
| [options.onLoop] | function |
function pointer called after a revere, repeat, or continue* |
wait
base class for all animations
new wait(object, [options])
| Param | Type | Default | Description |
|---|---|---|---|
| object | object |
to animate | |
| [options] | object |
||
| [options.wait] | number |
0 |
n milliseconds before starting animation (can also be used to pause animation for a length of time) |
| [options.pause] | boolean |
start the animation paused | |
| [options.repeat] | boolean | number |
true: repeat animation forever; n: repeat animation n times | |
| [options.reverse] | boolean | number |
true: reverse animation (if combined with repeat, then pulse); n: reverse animation n times | |
| [options.continue] | boolean | number |
true: continue animation with new starting values; n: continue animation n times | |
| [options.id] | number |
user-generated id (e.g., I use it to properly load animations when an object has multiple animations running) | |
| [options.orphan] | boolean |
delete animation if .parent of object (or first object in list) is null | |
| [options.load] | function |
loads an animation using an .save() object; note the * parameters below cannot be loaded and must be re-set | |
| [options.ease] | function | string |
function (or penner function name) from easing.js (see http://easings.net for examples)* | |
| [options.renderer] | Renderer |
sets Renderer.dirty for each loop* | |
| [options.onDone] | function |
function pointer for when the animation expires* | |
| [options.onCancel] | function |
function pointer called after cancelled* | |
| [options.onWait] | function |
function pointer for wait* | |
| [options.onFirst] | function |
function pointer for first time update is called (does not include pause or wait time)* | |
| [options.onEach] | function |
function pointer called after each update* | |
| [options.onLoop] | function |
function pointer called after a revere, repeat, or continue* |
load(object(s), load, [options])
restart an animation = require(a saved state
Kind: global function
| Param | Type | Description |
|---|---|---|
| object(s) | object |
to animate (cannot be saved) |
| load | object |
object = require(.save() |
| [options] | object |
include any additional options that cannot be saved (e.g., onDone function pointer) |
Copyright (c) 2016 YOPEY YOPEY LLC - MIT License - Documented by jsdoc-to-markdown