github or npm. Same functionality, new packaging, better events and easier cleanup.
This library is deprecated. Try its replacement pixi-ease onanimate.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
- angle
animate object's {x, y} using an angle
- face
Rotates an object to face the target
- movie
animate a movie of textures
- shake
shakes an object or list of objects
- target
move an object to a target's location
- tint
changes the tint of an object
- to
animate any numeric parameter of an object or array of objects
- wait
base 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