AnimationAPI#

Interface AnimationAPI

The AnimationAPI provides basic functionalities to define keyframe-based animation sequences. An animation sequence defines a gradual change from one node state to another, whereby a single state is defined by an AnimationFrame which includes different properties to specify the transformation and appearance of a node at that point in time. An animation sequence is independent of a specific node and can be applied to multiple nodes with different AnimationOptions.

Example

// Get an instance of the ContextAPI
const myContext : ContextAPI = webvis.getContext( "example" )

// Create a simple animation sequence which does a full rotation around the Y-axis
myContext.createAnimationFrames( "rotate" , [
 { rotation: [ 0, 0,   0 ] },
 { rotation: [ 0, 180, 0 ] },
 { rotation: [ 0, 360, 0 ] }
]);

// Apply the animation sequence to an InstanceGraph node with a total duration of 1000ms
myContext.setProperty( 1, "animation", {
   name     : "rotate",
   duration : 1000,
});

Restrictions

Animation sequences that include transformations and are applied to a leaf node cannot yet be visualized by the viewer.

Hierarchy

Methods

createAnimationFrames removeAnimationFrames

Methods

createAnimationFrames

  • Creates a new keyframe-based animation sequence.

    Parameters

    • name: string

      The name of the animation sequence.

    • frames: AnimationFrame[]

      The keyframes of the animation sequence.

    Returns void

removeAnimationFrames

  • Removes an existing animation sequence.

    Parameters

    • name: string

      Specifies the name of the animation frames.

    Returns void