@playful/playkit
Interfaces
- AnimationControls
- AppearEffect
- Arrow
- Attribution
- Audio
- BackdropBlurEffect
- BlendModeEffect
- BlurEffect
- BrightnessEffect
- Button
- Canvas
- Checkbox
- Component
- Confetti
- Container
- ContrastEffect
- DraggableEffect
- Drawing
- Effect
- Element
- Ellipse
- EventHandlersEventMap
- FlyingEmojis
- FlyingEmojisHtml
- FollowEffect
- GlowEffect
- GrayscaleEffect
- HTML
- Heart
- HueRotateEffect
- Image
- Input
- InvertEffect
- LetterSpacingEffect
- Line
- Location
- LookAtEffect
- OscillateEffect
- Page
- PhysicsEffect
- PointerPosition
- Polygon
- Project
- ProjectInfo
- Rectangle
- SVG
- SaturationEffect
- Scrollable
- Section
- Select
- SepiaEffect
- Shader
- ShadowEffect
- Slider
- Slideshow
- SpinEffect
- Star
- Switch
- Text
- TextOutlineEffect
- Textarea
- Timer
- TransformEffect
- Video
- View
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
Ƭ LinkRelType: "alternate" | "author" | "bookmark" | "external" | "help" | "license" | "next" | "nofollow" | "noreferrer" | "noopener" | "prev" | "search" | "tag"
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 | 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
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
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
submit
▸ submit(serviceId, data): Promise (opens in a new tab)<void>
Submit data to a project service
Parameters
| Name | Type |
|---|---|
serviceId | string |
data | Record (opens in a new tab)<string, string | number | boolean | Date (opens in a new tab)> |
Returns
Promise (opens in a new tab)<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.');