Rekapi

rekapi. Rekapi

If this is a rendered animation, the appropriate renderer is accessible as this.renderer. If provided, a reference to context is accessible as this.context.

Constructor

new Rekapi(contextopt)

Source:
Parameters:
Name Type Attributes Default Description
context Object | CanvasRenderingContext2D | HTMLElement <optional>
 {}

Sets rekapi.Rekapi#context. This determines how to render the animation. rekapi.Rekapi will also automatically set up all necessary rekapi.Rekapi#renderers based on this value:

Members

context :Object|CanvasRenderingContext2D|HTMLElement

The rendering context for an animation.

Default Value:
  • {}
Source:
Type:
  • Object | CanvasRenderingContext2D | HTMLElement

renderers :Array.<rekapi.renderer>

Instances of rekapi.renderer classes, as inferred by the context parameter provided to the rekapi.Rekapi constructor. You can add more renderers to this list manually; see the Multiple Renderers tutorial for an example.

Source:
Type:

sort :rekapi.actorSortFunction|null

Optional function for sorting the render order of rekapi.Actors. If set, this is called each frame before the rekapi.Actors are rendered. If not set, rekapi.Actors will render in the order they were added via rekapi.Rekapi#addActor.

The following example assumes that all rekapi.Actors are circles that have a radius rekapi.KeyframeProperty. The circles will be rendered in order of the value of their radius, from smallest to largest. This has the effect of layering larger circles on top of smaller circles, thus giving a sense of perspective.

const rekapi = new Rekapi();
rekapi.sort = actor => actor.get().radius;
Default Value:
  • null
Source:
Type:

Methods

addActor(actoropt) → {rekapi.Actor}

Add a rekapi.Actor to the animation. Decorates the added rekapi.Actor with a reference to this rekapi.Rekapi instance as rekapi.Actor#rekapi.

Source:
Parameters:
Name Type Attributes Default Description
actor rekapi.Actor | Object <optional>
 {}

If this is an Object, it is used to as the constructor parameters for a new rekapi.Actor instance that is created by this method.
Fires:
Returns:
Type:
rekapi.Actor

The rekapi.Actor that was added.

exportTimeline(configopt) → {rekapi.timelineData}

Export the timeline to a JSON.stringify-friendly Object.

Source:
Parameters:
Name Type Attributes Description
config Object <optional>
Name Type Attributes Default Description
withId boolean <optional>
 false

If true, include internal id values in exported data.
Returns:
Type:
rekapi.timelineData

This data can later be consumed by rekapi.Rekapi#importTimeline.

getActor(actorId) → {rekapi.Actor}

Source:
Parameters:
Name Type Description
actorId number
Returns:
Type:
rekapi.Actor

A reference to an actor from the animation by its id. You can use rekapi.Rekapi#getActorIds to get a list of IDs for all actors in the animation.

getActorCount() → {number}

Source:
Returns:
Type:
number

The number of rekapi.Actors in the animation.

getActorIds() → {Array.<number>}

Source:
Returns:
Type:
Array.<number>

The ids of all rekapi.Actor`s in the animation.

getAllActors() → {Array.<rekapi.Actor>}

Source:
Returns:
Type:
Array.<rekapi.Actor>

All rekapi.Actors in the animation.

getAnimationLength() → {number}

Source:
Returns:
Type:
number

The length of the animation timeline, in milliseconds.

getEventNames() → {Array.<string>}

Source:
Returns:
Type:
Array.<string>

The list of event names that this Rekapi instance supports.

getLastMillisecondUpdated() → {number}

Source:
Returns:
Type:
number

The millisecond that was last rendered.

getLastPositionUpdated() → {number}

Source:
Returns:
Type:
number

The normalized timeline position (between 0 and 1) that was last rendered.

getRendererInstance(rendererConstructor) → {rekapi.renderer|undefined}

Get a reference to a rekapi.renderer that was initialized for this animation.

Source:
Parameters:
Name Type Description
rendererConstructor rekapi.renderer

The type of rekapi.renderer subclass (such as rekapi.CanvasRenderer or rekapi.DOMRenderer) to look up an instance of.
Returns:
Type:
rekapi.renderer | undefined

The matching rekapi.renderer, if any.

importTimeline(rekapiData)

Import data that was created by rekapi.Rekapi#exportTimeline. This sets up all actors, keyframes, and custom easing curves specified in the rekapiData parameter. These two methods collectively allow you serialize an animation (for sending to a server for persistence, for example) and later recreating an identical animation.

Source:
Parameters:
Name Type Description
rekapiData rekapi.timelineData

Any object that has the same data format as the object generated from rekapi.Rekapi#exportTimeline.

isPaused() → {boolean}

Source:
Returns:
Type:
boolean

Whether or not the animation is paused (meaning not playing or stopped).

isPlaying() → {boolean}

Source:
Returns:
Type:
boolean

Whether or not the animation is playing (meaning not paused or stopped).

isStopped() → {boolean}

Source:
Returns:
Type:
boolean

Whether or not the animation is stopped (meaning not playing or paused).

moveActorToPosition(actor, layer) → {rekapi.Rekapi}

Move a rekapi.Actor around within the internal render order list. By default, a rekapi.Actor is rendered in the order it was added with rekapi.Rekapi#addActor.

This method has no effect if rekapi.Rekapi#sort is set.

Source:
Parameters:
Name Type Description
actor rekapi.Actor
layer number

This should be within 0 and the total number of rekapi.Actors in the animation. That number can be found with rekapi.Rekapi#getActorCount.
Returns:
Type:
rekapi.Rekapi

off(eventName, handleropt) → {rekapi.Rekapi}

Unbind one or more handlers from a Rekapi event.

Source:
Parameters:
Name Type Attributes Description
eventName string

Valid values correspond to the list under rekapi.Rekapi#on.
handler rekapi.eventHandler <optional>

A reference to the rekapi.eventHandler to unbind. If omitted, all rekapi.eventHandlers bound to eventName are unbound.
Returns:
Type:
rekapi.Rekapi

on(eventName, handler) → {rekapi.Rekapi}

Bind a rekapi.eventHandler function to a Rekapi event.

Source:
Parameters:
Name Type Description
eventName string
handler rekapi.eventHandler

The event handler function.
Returns:
Type:
rekapi.Rekapi

pause() → {rekapi.Rekapi}

Pause the animation. A "paused" animation can be resumed from where it left off with rekapi.Rekapi#play.

Source:
Fires:
Returns:
Type:
rekapi.Rekapi

play(iterationsopt) → {rekapi.Rekapi}

Play the animation.

Source:
Parameters:
Name Type Attributes Default Description
iterations number <optional>
 -1

If omitted, the animation will loop endlessly.
Fires:
Returns:
Type:
rekapi.Rekapi

playFrom(millisecond, iterationsopt) → {rekapi.Rekapi}

Move to a specific millisecond on the timeline and play from there.

Source:
Parameters:
Name Type Attributes Description
millisecond number
iterations number <optional>

Works as it does in rekapi.Rekapi#play.
Returns:
Type:
rekapi.Rekapi

playFromCurrent(iterationsopt) → {rekapi.Rekapi}

Play from the last frame that was rendered with rekapi.Rekapi#update.

Source:
Parameters:
Name Type Attributes Description
iterations number <optional>

Works as it does in rekapi.Rekapi#play.
Returns:
Type:
rekapi.Rekapi

removeActor(actor) → {rekapi.Actor}

Remove an actor from the animation. This does not destroy the actor, it only removes the link between it and this rekapi.Rekapi instance. This method calls the actor's rekapi.Actor#teardown method, if defined.

Source:
Parameters:
Name Type Description
actor rekapi.Actor
Fires:
Returns:
Type:
rekapi.Actor

The rekapi.Actor that was removed.

removeAllActors() → {Array.<rekapi.Actor>}

Remove all rekapi.Actors from the animation.

Source:
Returns:
Type:
Array.<rekapi.Actor>

The rekapi.Actors that were removed.

stop() → {rekapi.Rekapi}

Stop the animation. A "stopped" animation will start from the beginning if rekapi.Rekapi#play is called.

Source:
Fires:
Returns:
Type:
rekapi.Rekapi

trigger(eventName, dataopt) → {rekapi.Rekapi}

Manually fire a Rekapi event, thereby calling all rekapi.eventHandlers bound to that event.

Source:
Parameters:
Name Type Attributes Description
eventName string

The name of the event to trigger.
data any <optional>

Optional data to provide to the eventName rekapi.eventHandlers.
Fires:
  • event:*
Returns:
Type:
rekapi.Rekapi

update(millisecondopt, doResetLaterFnKeyframesopt) → {rekapi.Rekapi}

Render an animation frame at a specific point in the timeline.

Source:
Parameters:
Name Type Attributes Default Description
millisecond number <optional>
 this._lastUpdatedMillisecond

The point in the timeline at which to render. If omitted, this renders the last millisecond that was rendered (it's a re-render).
doResetLaterFnKeyframes boolean <optional>
 false

If true, allow all rekapi.keyframeFunctions later in the timeline to be run again. This is a low-level feature, it should not be true (or even provided) for most use cases.
Fires:
Returns:
Type:
rekapi.Rekapi