Animations

yFiles for HTML offers specialized animations and visual effects for graph elements, more precisely their visual representations. Predefined animations are, for example:

• transformations of node layouts, i.e., moving and resizing of nodes
• transformations of edge paths, i.e., moving ports and bends

These animations build upon the general yFiles animation framework found which enables processing of animations.

The typical way of applying an automatic layout to your diagram already includes suitable animations for many use cases. You typically don’t need to set an animation by yourself in this case.

Predefined Animations

Predefined animations for model items in an IGraph are provided by the following factory methods on IAnimation:

Predefined animations for graph elements

createEdgeSegmentAnimation

Animates transformations of an edge layout, i.e., changes of the locations of ports and bends.

createNodeAnimation

Animates transformations of a node layout, i.e., changes of the location and the dimensions.

createPathAnimation

Animates a mutable point along a path.

createPortAnimation

Animates transformations of a port location.

createLabelAnimation

Animates transformations of a label layout.

createGraphAnimation

Animates transformations of all nodes, edges, ports and labels of a graph.

createLayoutAnimation

Creates an IAnimation which animates transformations of the layout of model items in a graph.

Further predefined animations that render arbitrary graphical objects are available:

Class ViewportAnimation animates changing the viewport bounds and the zoom factor.

Animation Framework

The classes IAnimation and Animator constitute a general animation framework.

The Animator class is the central instance that governs an animation process. At creation time, it is associated with the CanvasComponent that contains the actual elements involved with an animation.

The animation itself, respectively the compound of animations that is to be presented in the component, is encapsulated in a so-called animation object, an implementation of interface IAnimation.

Effectively, an animation object provides a sequence of so-called frames that represent the animation’s state as it evolves over time. Animator progresses the overall animation process by continuously triggering the given animation object to calculate a single new frame that corresponds to the supplied (strictly monotonic) increasing time value.

Whenever a new frame has been calculated, the animator initiates an update in the given control so that the new frame is displayed.

Animator also triggers initialization of an IAnimation object before the animation process and any necessary cleanup thereafter by calling appropriate methods.

Setup for processing a given animation object and having the progress of the (compound) animation displayed in a control is demonstrated in Playing a (compound) animation..

/**
 * @param {!GraphComponent} graphComponent
 * @param {!IAnimation} animation
 */
function startAnimation(/** GraphComponent */ graphComponent, /** IAnimation */ animation) {
  // Create a new Animator for the given component that processes the given
  // animation.
  const animator = new Animator(graphComponent)
  // Play the given animation.
  animator.animate(animation)
}function startAnimation(
  /** GraphComponent */ graphComponent: GraphComponent,
  /** IAnimation */ animation: IAnimation
): void {
  // Create a new Animator for the given component that processes the given
  // animation.
  const animator = new Animator(graphComponent)
  // Play the given animation.
  animator.animate(animation)
}

Implementations of interface IAnimation are the actual provider of an animation. Their task is to generate a sequence of frames that represent the animation’s state as it evolves over time. An animation’s time is defined to run in the range 0.0 to 1.0 from animation start to animation end.

IAnimation provides a set of convenience methods to create IAnimation instances for the most common use-cases:

To achieve concurrent processing of a set of animations, method createParallelAnimation creates an IAnimation implementation that provides the necessary methods to add single animations to form compound animations. Correspondingly, a set of animations which are applied one after another can be created using method createSequentialAnimation.

createEasedAnimation creates another implementation of interface IAnimation which provides ease in and ease out effects and can be used as a decorator for other animations. An ease in effect applies a configurable acceleration at the beginning of a given animation, likewise, an ease out effect applies a configurable deceleration at the end.