Class: Animation

PSV~Animation

new Animation (options)

Interpolation helper for animations

Implements the Promise API with an additional "cancel" and "finally" methods. The promise is resolved when the animation is complete and rejected if the animation is cancelled.

Name Type Description
options Object
Name Type Default Description
properties Object.<string, Object>
properties[].start number
properties[].end number
duration number
delay number 0 optional
easing string 'linear' optional
onTick PSV.Animation.OnTick

called on each frame

Example
new Animation({
    properties: {
        width: {start: 100, end: 200}
    },
    duration: 5000,
    onTick: (properties) => element.style.width = `${properties.width}px`;
})

Methods

PSV.Animation.resolve ()PSV.Animation static

Returns a resolved animation promise

Returns:
Type Description
PSV.Animation

cancel ()

Cancels the animation

catch (onRejected)PSV.Animation

Alias to .then(null, onRejected)

Name Type Description
onRejected function

Called when the animation has been cancelled

Returns:
Type Description
PSV.Animation

finally (onFinally)PSV.Animation

Alias to .then(onFinally, onFinally)

Name Type Description
onFinally function

Called when the animation is either complete or cancelled

Returns:
Type Description
PSV.Animation

then (onFulfilled, onRejected)PSV.Animation

Animation chaining

Name Type Default Description
onFulfilled function null optional

Called when the animation is complete, can return a new animation

onRejected function null optional

Called when the animation is cancelled

Returns:
Type Description
PSV.Animation

Type Definitions

PSV.Animation.OnTick (properties, progress)

Function called for each animation frame with computed properties

Name Type Description
properties Object.<string, number>

current values

progress float

0 to 1