Animations

yFiles for HTML offers specialized animations and visual effects for graph elements, specifically their visual representations. Predefined animations include:

• Transformations of node layouts, such as moving and resizing nodes.
• Transformations of edge paths, such as moving ports and bends.

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

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

Predefined Animations

The following factory methods on IAnimation provide predefined animations for model items in an IGraph:

Predefined animations for graph elements

createEdgeSegmentAnimation

Animates transformations of an edge’s layout, such as changes to the locations of its ports and bends.

createNodeAnimation

Animates transformations of a node’s layout, such as changes to its location and dimensions.

createPathAnimation

Animates a mutable point along a path.

createPortAnimation

Animates transformations of a port’s location.

createLabelAnimation

Animates transformations of a label’s layout.

createGraphAnimation

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

createLayoutAnimation

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

The following predefined animations that render arbitrary graphical objects are also 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 manages an animation process. When creating an instance of this class, you associate it with the CanvasComponent that contains the elements involved in the animation.

The animation itself, or the combination of animations that you want to present in the component, is encapsulated in an animation object, which implements the interface IAnimation.

Essentially, an animation object provides a sequence of frames that represent the animation’s state as it changes over time. The Animator advances the overall animation process by continuously prompting the animation object to calculate a new frame. This frame corresponds to an increasing time value.

When a new frame is calculated, the animator updates the control to display the new frame.

The Animator also initializes an IAnimation object before the animation process and performs any necessary cleanup afterward by calling the appropriate methods.

The following example demonstrates how to set up an animation object and display the animation’s progress in a control, see Playing an 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 the interface IAnimation provide the actual animation. They generate a sequence of frames representing the animation’s state as it evolves. The animation’s time is defined to run from 0.0 to 1.0, from the start to the end of the animation.

IAnimation provides convenience methods to creat IAnimation instances for common use cases:

To process a set of animations concurrently, use the method createParallelAnimation. This creates an IAnimation implementation that provides the necessary methods to add individual animations to create compound animations. You can create a set of animations that are applied sequentially using the method createSequentialAnimation.

createEasedAnimation creates another implementation of the interface IAnimation, which provides "ease-in" and "ease-out" effects. You can use it as a decorator for other animations. An "ease-in" effect applies a configurable acceleration at the beginning of the animation, while an "ease-out" effect applies a configurable deceleration at the end.