@playful/playkit

Interfaces

Type Aliases

AnimationFrameEvent

Ƭ AnimationFrameEvent: Object

Type declaration

Name	Type
`detail`	{ `elapsed`: `number` ; `timeDelta`: `number` }
`detail.elapsed`	`number`
`detail.timeDelta`	`number`

AnimationOptions

Ƭ AnimationOptions: KeyframeOptions & PlaybackOptions

EasingOptions

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

EventType

Ƭ EventType: keyof EventHandlersEventMap | string

Supported event types.

KeyframeOptions

Ƭ KeyframeOptions: Object

Type declaration

Name	Type
`duration?`	`number`
`easing?`	`EasingOptions`

KeyframesDefinition

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

LinkRelType

ObjectOrSelector

Ƭ ObjectOrSelector: Component | string

PhysicsContactEvent

Ƭ PhysicsContactEvent: Object

Type declaration

Name	Type
`detail`	{ `object`: `Component` }
`detail.object`	`Component`

PlayState

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

PlaybackOptions

Ƭ PlaybackOptions: Object

Type declaration

Name	Type
`delay?`	`number`
`direction?`	`PlaybackDirection`
`repeat?`	`number`

ProgressFunction

Ƭ ProgressFunction: (progress: number) => void

Type declaration

▸ (progress): void

Parameters

Name	Type
`progress`	`number`

Returns

void

PropertyChangeEvent

Ƭ PropertyChangeEvent: Object

Type declaration

Name	Type
`detail`	{ `changed`: `Record` (opens in a new tab)<`string`, `boolean`> }
`detail.changed`	`Record` (opens in a new tab)<`string`, `boolean`>

Stroke

Ƭ Stroke: Object

Type declaration

Name	Type
`color?`	`string`
`outlineColor?`	`string`
`outlineWidth?`	`number`
`points`	`StrokePoint`[]
`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

Name	Type
`objectOrSelector`	`ObjectOrSelector`
`keyframes`	`KeyframesDefinition`
`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

Name	Type
`progressFn`	`ProgressFunction`
`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

Name	Type
`typeOrProperties`	`string` \| { `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

Name	Type	Description
`identifier`	`string` \| `number`	The 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.

getResourceUrl

▸ getResourceUrl(key): void

Return a URL to a resource key

Parameters

Name	Type
`key`	`string`

Returns

void

gotoFirstPage

▸ gotoFirstPage(history?): void

Parameters

Name	Type
`history?`	`boolean`

Returns

void

gotoLastPage

▸ gotoLastPage(history?): void

Parameters

Name	Type
`history?`	`boolean`

Returns

void

gotoNextPage

▸ gotoNextPage(history?): void

Parameters

Name	Type
`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

Name	Type	Description
`pageName`	`string`	The name of the page to navigate to.
`history?`	`boolean`	-

Returns

void

gotoPreviousPage

▸ gotoPreviousPage(history?): void

Parameters

Name	Type
`history?`	`boolean`

Returns

void

log

▸ log(...data): void

Log a string to the browser console.

Parameters

Name	Type	Description
`...data`	`any`[]	Anything to log.

Returns

void

rotateBy

▸ rotateBy(component, degrees, options?): void

Adjust a component's rotation by a relative amount.

Parameters

Name	Type
`component`	`Component`
`degrees`	`number`
`options?`	`KeyframeOptions`

Returns

void

scaleBy

▸ scaleBy(component, scale, options?): void

Adjust a component's scale by a relative amount.

Parameters

Name	Type
`component`	`Component`
`scale`	`number`
`options?`	`KeyframeOptions`

Returns

void

translateBy

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

Relatively adjust a component's position

Parameters

Name	Type
`component`	`Component`
`towards`	`Object`
`towards.x`	`number`
`towards.y`	`number`
`distance`	`number`
`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

Name	Type	Description
`seconds`	`number`	The 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.');

Introduction Animationcontrols