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.
Quick Start
Example: create a simple animation sequence which does a full rotation around the Y-axis and apply it to a node.
constcontext = webvis.getContext();// Create a simple animation sequence which does a full rotation around the Y-axiscontext.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 1000mscontext.setProperty( 1, webvis.Property.ANIMATION, {name :"rotate",duration :1000,});
Events
The following events are associated with the AnimationAPI:
The AnimationAPI
Overview
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.
Quick Start
Example: create a simple animation sequence which does a full rotation around the Y-axis and apply it to a node.
Events
The following events are associated with the AnimationAPI:
Restrictions
Animation sequences that include transformations and are applied to a leaf node cannot yet be visualized by the viewer.