Composition instance
compInstance: {onAirRefId: '56344bcd-9b83-43e2-863b-a5e5fde60c4f', getDuration: ƒ, is2Timeline: ƒ, …}
> animate: ƒ (t)
> destroy: ƒ ()
> getDuration: ƒ ()
> is2Timeline: ƒ ()
> jumpTo: ƒ (t)
> onAirRefId: "56344bcd-9b83-43e2-863b-a5e5fde60c4f"
> playTo: ƒ (t,i)
> resize: ƒ (t,e)
> seek: ƒ (t,i)
> setControlNode: ƒ (t)
> setWidgetNode: ƒ (t)
> stop: ƒ ()
Name | Type | Example | Description |
|---|---|---|---|
onAirRefId | String | "56344bcd-9b83-43e2-863b-a5e5fde60c4f" | The ID of the sub-composition that contains the widget. |
Destroys a composition instance.
// The code below destroys a composition instance
// check if composition instance exists
if (compInstance!= null) {
compInstance.destroy();
compInstance= null;
}
noneReturns the duration of the In and Out animation timelines.
// The code below prints the animation durations to the console
const animDuration = compInstance.getDuration();
console.log("animDuration =", animDuration);
object: JSON object animationDuration = {
In: 1.3,
Out: 0.5
}
Returns if a composition instance has one or two timelines.
// The code below prints the return value
const has2Timelines = compInstance.is2Timeline();
console.log("has2Timelines =", has2Timelines);
boolean : false , has single timeline; true, has two timelineshas2Timelines = true
Jumps to a specified animation state.
Name | Type | Description |
|---|---|---|
toState | String | In: jump to "In" state
Out: jump to "Out" state |
const toState = "In";
compInstance.jumpTo(toState);
Plays the animation to the specified state.
Name | Type | Description |
|---|---|---|
toState | String | In: jump to "In" state
Out: jump to "Out" state |
const toState = "In";
compInstance.playTo(toState);
Resizes a composition instance when a window size changes.
/**
* addEventListener for window resizing
*/
window.addEventListener("resize", function() {
if (windowWidth != window.innerWidth || windowHeight != window.innerHeight) {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
if (compInstance) {
compInstance.resize(windowWidth, windowHeight);
}
}
});
noneSeeks the timeline to the specified time in [s].
Name | Type | Description |
|---|---|---|
t | Number | Time in [s]. |
const t = 1.5; // 1.5 [s]
compInstance.seek(t);
noneSets the content of control nodes defined in a composition instance.
Users can manually define control nodes in widget compositions.
Name | Type | Description |
|---|---|---|
payload | JSON | A payload that contains control node content. |
// The code below sets content of the control nodes "Pos", "Name", and "Age" in the composition instance.
const payload = {
"Pos": 1,
"Name": "John Doe",
"Age": "32"
};
compInstance.setControlNode(payload);
noneSets the content of widget nodes defined in a composition instance.
Widget nodes are created programmatically and managed by the widget dynamically.
Name | Type | Description |
|---|---|---|
payload | JSON | A payload containing widget node content. |
// The code below sets content of the widget nodes "id", "longitude", "latitude", and "temperature" in the composition instance.
const payload = {
"id": 1001,
"longitude": 45.67,
"latitude": 18.97,
"temperature": "25°C"
};
compInstance.setWidgetNode(payload);
noneStops a widget animation.
Last modified 8mo ago