Class: Ease

Ease

Manages a group of eases

new Ease (options)

Name Type Default Description
options object optional
Name Type Default Description
duration number 1000 optional default duration if not set
ease string | function Penner.easeInOutSine optional default ease function if not set (see https://www.npmjs.com/package/penner for names of easing functions)
option.useRAF boolean true optional attach to a requestAnimationFrame listener
options.ticker PIXI.Ticker optional attach to a PIXI.Ticker instead of RAF
options.maxFrame number 1000/60 optional maximum frame time (set to Infinity to ignore); only used if useTicker = true
Fires:
Example
import * as PIXI from 'pixi.js'
import { Ease, ease } from 'pixi-ease'

const app = new PIXI.Application()
const test = app.stage.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))

const move = ease.add(test, { x: 20, y: 15, alpha: 0.25 }, { reverse: true })
move.once('complete', () => console.log('move ease complete.'))

test.generic = 25
const generic = ease.add(test, { generic: 0 }, { duration: 1500, ease: 'easeOutQuad' })
generic.on('each', () => console.log(test.generic))

const secondEase = new Ease({ duration: 3000, ease: 'easeInBack' })
const test2 = app.stage.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
test2.tint = 0x0000ff
secondEase.add(test2, { blend: [0xff0000, 0x00ff00], scale: 2 })

Extends

Classes

Ease

Members

count number

number of easings

duration number

default duration for eases.add() (only applies to newly added eases)

ease string | function

default ease for eases.add() (only applies to newly added eases)

Methods

add (element, params, options)Easing

add ease(s) to a PIXI.DisplayObject element
Name Type Description
element PIXI.DisplayObject | Array.<PIXI.DisplayObject>
params object
Name Type Description
x number optional
y number optional
position PIXI.DisplayObject | PIXI.Point optional changes both x and y
width number optional
height number optional
scale number optional changes both scale.x and scale.y
scaleX number optional
scaleY number optional
alpha number optional
rotation number optional
face PIXI.DisplayObject | PIXI.Point optional rotate the element to face a DisplayObject using the closest angle
skew number optional changes both skew.x and skew.y
skewX number optional
skewY number optional
tint number | Array.<number> optional cycle through colors - if number is provided then it cycles between current tint and number; if number[] is provided is cycles only between tints in the number[]
blend number | Array.<number> optional blend between colors - if number is provided then it blends current tint to number; if number[] is provided then it blends between the tints in the number[]
shake number optional shakes the object by this number (randomly placing the element +/-shake pixels away from starting point)
* number optional generic number parameter
options object optional
Name Type Description
duration number optional
ease string | function optional
repeat boolean | number optional
reverse boolean optional
wait number optional wait this number of milliseconds before ease starts
Returns:
Type Description
Easing

countRunning ()number

number of active easings across all elements
Returns:
Type Description
number

destroy ()

removes all eases and tickers

emit (event)Boolean inherited overrides

Calls each of the listeners registered for a given event.
Name Type Description
event String | Symbol The event name.
Returns:
Type Description
Boolean `true` if the event had listeners, else `false`.

eventNames ()Array inherited overrides

Return an array listing the events for which the emitter has registered listeners.
Returns:
Type Description
Array

face (element, target, speed, options)Easing

helper function to add an ease that changes rotation to face the element at the desired target using the speed NOTE: under the hood this calls add(element {x, y }, { duration: })
Name Type Description
element PIXI.DisplayObject
target PIXI.DisplayObject | PIXI.Point
speed number in radians / ms
options object optional
Name Type Description
ease string | function optional
repeat boolean | number optional
reverse boolean optional
wait number optional wait this number of milliseconds before ease starts
Returns:
Type Description
Easing

listenerCount (event)Number inherited overrides

Return the number of listeners listening to a given event.
Name Type Description
event String | Symbol The event name.
Returns:
Type Description
Number The number of listeners.

listeners (event)Array inherited overrides

Return the listeners registered for a given event.
Name Type Description
event String | Symbol The event name.
Returns:
Type Description
Array The registered listeners.

once (event, fn, context)EventEmitter inherited overrides

Add a one-time listener for a given event.
Name Type Default Description
event String | Symbol The event name.
fn function The listener function.
context * this optional The context to invoke the listener with.
Returns:
Type Description
EventEmitter `this`.

on (event, fn, context)EventEmitter inherited overrides

Add a listener for a given event.
Name Type Default Description
event String | Symbol The event name.
fn function The listener function.
context * this optional The context to invoke the listener with.
Returns:
Type Description
EventEmitter `this`.

removeAll ()

remove all easings WARNING: 'complete' events will not fire for these removals

removeAllListeners (event)EventEmitter inherited overrides

Remove all listeners, or those of the specified event.
Name Type Description
event String | Symbol optional The event name.
Returns:
Type Description
EventEmitter `this`.

removeEase (element, param)

removes one or more eases from a DisplayObject WARNING: 'complete' events will not fire for these removals
Name Type Description
element PIXI.DisplayObject
param string | Array.<string> optional omit to remove all easings for an element

removeListener (event, fn, context, once)EventEmitter inherited overrides

Remove the listeners of a given event.
Name Type Description
event String | Symbol The event name.
fn function Only remove the listeners that match this function.
context * Only remove the listeners that have this context.
once Boolean Only remove one-time listeners.
Returns:
Type Description
EventEmitter `this`.

target (element, target, speed, options)Easing

create an ease that changes position (x, y) of the element by moving to the target at the speed NOTE: under the hood this calls add(element, { x, y }, { duration: })
Name Type Description
element PIXI.DisplayObject
target PIXI.DisplayObject | PIXI.Point
speed number in pixels / ms
options object optional
Name Type Description
ease string | function optional
repeat boolean | number optional
reverse boolean optional
wait number optional wait this number of milliseconds before ease starts
removeExisting boolean optional removes existing eases on the element of the same type (including x,y/position, skewX,skewY/skew, scaleX,scaleY/scale)
Returns:
Type Description
Easing

update (elapsed)

update frame; this is called automatically if options.useTicker !== false
Name Type Description
elapsed number time in ms since last frame

Events

complete

fires when there are no more eases
Type:
fires on each loop when there are eases running
Type: