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: ƒ ()

Properties

Name	Type	Example	Description
onAirRefId	String	"56344bcd-9b83-43e2-863b-a5e5fde60c4f"	The ID of the sub-composition that contains the widget.

Methods

animate()

Animates a composition instance using the event object(t) produced by an onAnimation callback.

destroy()

Destroys a composition instance.

// The code below destroys a composition instance

// check if composition instance exists
if (compInstance!= null) {
  compInstance.destroy();
  compInstance= null;
}

Return

none

getDuration()

Returns 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);

Return

object: JSON object

animationDuration = {
  In: 1.3,
  Out: 0.5
}

is2Timeline()

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);

Return

boolean : false , has single timeline; true, has two timelines

has2Timelines = true

jumpTo()

Jumps to a specified animation state.

Parameter

Name	Type	Description
toState	String	In: jump to "In" state Out: jump to "Out" state

const toState = "In";
compInstance.jumpTo(toState);

playTo()

Plays the animation to the specified state.

Parameter

Name	Type	Description
toState	String	In: jump to "In" state Out: jump to "Out" state

const toState = "In";
compInstance.playTo(toState);

resize()

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);
        }
    }
});

Return

none

seek()

Seeks the timeline to the specified time in [s].

Parameter

Name	Type	Description
t	Number	Time in [s].

const t = 1.5; // 1.5 [s]
compInstance.seek(t);

Return

none

setControlNode()

Sets the content of control nodes defined in a composition instance.

Users can manually define control nodes in widget compositions.

Parameter

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);

Return

none

setWidgetNode()

Sets the content of widget nodes defined in a composition instance.

Widget nodes are created programmatically and managed by the widget dynamically.

Parameter

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);

Return

none

stop()

Stops a widget animation.