Javascript API
Overview

@playful/playkit

Interfaces

Type Aliases

AnimationFrameEvent

Ƭ AnimationFrameEvent: Object

Type declaration

NameType
detail{ elapsed: number ; timeDelta: number }
detail.elapsednumber
detail.timeDeltanumber

AnimationOptions

Ƭ AnimationOptions: KeyframeOptions & PlaybackOptions


EasingOptions

Ƭ EasingOptions: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"


EventType

Ƭ EventType: keyof EventHandlersEventMap

Supported event types.


KeyframeOptions

Ƭ KeyframeOptions: Object

Type declaration

NameType
duration?number
easing?EasingOptions

KeyframesDefinition

Ƭ KeyframesDefinition: Record (opens in a new tab)<string, any | any[]>


ObjectOrSelector

Ƭ ObjectOrSelector: Component | string


PhysicsContactEvent

Ƭ PhysicsContactEvent: Object

Type declaration

NameType
detail{ object: Component }
detail.objectComponent

PlayState

Ƭ PlayState: "idle" | "running" | "paused" | "finished"


PlaybackOptions

Ƭ PlaybackOptions: Object

Type declaration

NameType
delay?number
direction?PlaybackDirection
repeat?number

ProgressFunction

Ƭ ProgressFunction: (progress: number) => void

Type declaration

▸ (progress): void

Parameters
NameType
progressnumber
Returns

void


PropertyChangeEvent

Ƭ PropertyChangeEvent: Object

Type declaration

NameType
detail{ changed: Record (opens in a new tab)<string, boolean> }
detail.changedRecord (opens in a new tab)<string, boolean>

Stroke

Ƭ Stroke: Object

Type declaration

NameType
color?string
outlineColor?string
outlineWidth?number
pointsStrokePoint[]
size?number
taper?number
thinning?number

StrokePoint

Ƭ StrokePoint: [number, number, number]

Variables

project

Const project: Project

Always available in the global scope.

Functions

animate

animate(objectOrSelector, keyframes, options?): AnimationControls

Animate properties of an object.

Parameters

NameType
objectOrSelectorObjectOrSelector
keyframesKeyframesDefinition
options?AnimationOptions

Returns

AnimationControls

Example

animate(view, { x: 100 }, { duration: 0.5, direction: 'alternate', repeat: 1, easing: 'ease' });

animate(progressFn, options?): AnimationControls

Animate a single value from 0 to 1 calling a progress function every time step.

Parameters

NameType
progressFnProgressFunction
options?AnimationOptions

Returns

AnimationControls

Example

animate((t) => log(t), { duration: 0.5, direction: 'alternate', repeat: 1, easing: 'ease' });

createComponent

createComponent(typeOrProperties): Component | undefined

Create an instance of a particular component type.

Parameters

NameType
typeOrPropertiesstring | { componentType: string } & Record (opens in a new tab)<string, any>

Returns

Component | undefined

Example

const component = createComponent({ componentType: 'Rectangle', x: 20, y: 10, width: 200, height: 100, color: 'yellow' });
page.appendChild(component);

get

get(identifier): View | undefined

Get a View by its name or id.

Parameters

NameTypeDescription
identifierstring | numberThe name or id of the desired View.

Returns

View | undefined

The View with the given name or id. Returns undefined if the view does not exist.


gotoFirstPage

gotoFirstPage(history?): void

Parameters

NameType
history?boolean

Returns

void


gotoLastPage

gotoLastPage(history?): void

Parameters

NameType
history?boolean

Returns

void


gotoNextPage

gotoNextPage(history?): void

Parameters

NameType
history?boolean

Returns

void


gotoPage

gotoPage(pageName, history?): void

Navigate to a specified page.

The optional history parameter can be set to false to prevent the navigation from being added to the browser history.

Use the special page names "@first", "@last", "@next", and "@previous" to navigate to the first, last, next, or previous page.

NOTE: It is preferable, when possible, to use "add a link" in the Designer on components when click-to-navigate behavior is desired. "add a link" is recognized by the brower and provides a better user experience, especially for people using assistive technologies.

Parameters

NameTypeDescription
pageNamestringThe name of the page to navigate to.
history?boolean-

Returns

void


gotoPreviousPage

gotoPreviousPage(history?): void

Parameters

NameType
history?boolean

Returns

void


log

log(...data): void

Log a string to the browser console.

Parameters

NameTypeDescription
...dataany[]Anything to log.

Returns

void


rotateBy

rotateBy(component, degrees, options?): void

Adjust a component's rotation by a relative amount.

Parameters

NameType
componentComponent
degreesnumber
options?KeyframeOptions

Returns

void


scaleBy

scaleBy(component, scale, options?): void

Adjust a component's scale by a relative amount.

Parameters

NameType
componentComponent
scalenumber
options?KeyframeOptions

Returns

void


translateBy

translateBy(component, towards, distance, options?): void

Relatively adjust a component's position

Parameters

NameType
componentComponent
towardsObject
towards.xnumber
towards.ynumber
distancenumber
options?KeyframeOptions

Returns

void


wait

wait(seconds): Promise (opens in a new tab)<void>

Wait for a given number of seconds.

This is useful for delaying the execution of code. Must use await or .then() with this function.

Parameters

NameTypeDescription
secondsnumberThe number of seconds to wait.

Returns

Promise (opens in a new tab)<void>

A Promise that resolves after the given number of seconds.

await wait(0.5); // Wait for half a second.
log('Half a second has passed.');
wait(1).then(() => {
  log('One second has passed.');
});
log('This will log immediately, before one second has passed.');