Animations for Graph Elements

yFiles for Silverlight supports high-quality animations and visual effects for graph elements, more precisely their visual representations. Predefined animations are, for example:

These animations build upon the general animation framework found in namespace yWorks.Canvas.Animation which enables processing of animations.

Animation Framework

The classes in namespace yWorks.Canvas.Animation constitute a general animation framework. Class Animator is the central instance that governs an animation process. At creation time, it is associated with the CanvasControl that contains the actual elements involved with an animation. The animation itself, respectively the compound of animations that is to be presented in the control, 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. Figure 4.41, “Animation framework central types” shows the role of class Animator.

Figure 4.41. Animation framework central types

Animation framework central types.

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

Example 4.51. Playing a (compound) animation

public void StartAnimation(CanvasControl control, IAnimation animation) {
  // Create a new Animator for the given control that processes the given 
  // (compound) animation.
  Animator animator = new Animator(control);
  // Play the given (compound) 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.

To achieve concurrent processing of a set of animations, class CompositeAnimation is an IAnimation implementation that provides the necessary methods to add single animations to form compound animations.

Another implementation of interface IAnimation, class EasedAnimation, 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. Example 4.52, “Layout morphing using ease in and ease out effects” shows how both ease in and ease out effects can be used to smooth the morphing between two graph layouts.

Example 4.52. Layout morphing using ease in and ease out effects

public void EasedGraphLayoutAnimation(GraphControl control, IGraphLayout layout, 
                                      TimeSpan duration) {
  // Decorate a layout morpher
  EasedAnimation graphAnimation = 
      new EasedAnimation(new LayoutMorpherWrapper(control.Graph, layout, 
  Animator animator = new Animator(control);


Predefined animations for model items in an IGraph are provided by the types listed in Table 4.33, “Predefined animations for graph elements”. They enable transformations of INode and IEdge layouts.

Table 4.33. Predefined animations for graph elements

Type Name Description
EdgeAnimation Animates transformations of an IEdge layout, i.e., changes of the locations of ports and bends.
NodeAnimation Animates transformations of an INode layout, i.e., changes of the location and the dimensions.
LayoutMorpher Animates transformations of the layout of model items in an IGraph. Uses classes EdgeAnimation and NodeAnimation.

Table 4.34, “Predefined animations” lists further predefined animations that can be used in the context of a CanvasControl that renders arbitrary graphical objects.

Table 4.34. Predefined animations

Type Name Description
GeneralPathAnimation Animates a mutable point along a GeneralPath.
ViewportAnimation Animates changing the viewport bounds and the zoom factor for a CanvasControl.

Tutorial Demo Code

Tutorial demo application IncrementalHierarchicLayouterDemo shows how to perform an animation after a new graph layout has been calculated.