Yy-animate NPM

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

Functions

angle

animate object's {x, y} using an angle

Kind: global class

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

Kind: global class

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

Kind: global class

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

Kind: global class

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

Kind: global class

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

Kind: global class

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)