Customizing Graph Animations

The class GraphMorpher

The class com.yworks.graph.anim.GraphMorpher creates animations that morph a graph. These animations can include changes in the layout of graph elements, changes in the view rectangle or both.

GraphMorpher, GraphCanvasComponent.morphGraph() and RoundtripHandler

If the animate property of a GraphCanvasComponent is set to true the component's morphGraph() method delegates to a GraphMorpher to apply the changes in the graph in an animation.

Analogously, the RoundtripHandler's run() method delegates to the GraphCanvasComponent's morphGraph() method to update the graph after a roundtrip.

Besides the animate property which enables/disables the animation, both, the GraphCanvasComponent and the RoundtripHandler don't provide any properties or methods to customize the animation. Thus, it's not very straightforward to customize the animation, e.g. changing the duration. However, it's possible:

Accessing the current GraphMorpher

To customize the animation one has to retrieve the current GraphMorpher instance before the animation starts. This can be done in a listener to a GraphMorphEvent.MORPH_START which has to be added to the GraphCanvasComponent. The morpher instance can be retrieved from the morpher property of the event. The morpher's properties can be changed to adjust the animation.

// add the listener for the morph start
graphCanvas.addEventListener(GraphMorphEvent.MORPH_START, onMorphStart);

// listener function: customize the morpher            
private function onMorphStart(event:GraphMorphEvent):void {
  // retrieve the morpher instance from the event
  var morpher:GraphMorpher = event.morpher;
  // customize the morpher here
}

Customizing the Animation

Changing the Duration

The duration can be changed by setting the duration to the animation time in milliseconds.

Also, an easing function can be used to customize the interpolation between the animation steps. An easing function has the signature function(currentTime:Number, initialValue:Number, endingValue:Number, duration:Number):Number and returns the interpolation between initialValue and endingValue at the time currentTime where the time starts at 0 and ends at duration. Flex provides set of predefined easing functions in the package mx.effects.easing.

``` private function onMorphStart(event:GraphMorphEvent):void { var morpher:GraphMorpher = event.morpher; morpher.duration = 1000; // 1 second morpher.easingFunction = mx.effects.easing.Bounce.easeInOut; }

<h3>Changing the View Port and Zoom</h3>
<p>
The <code>morphGraph</code> method configures its morpher in a way that the view fits the graph at the end of the animations. If one wants to change this behavior he can change the morpher's <api-link ref-type="yfiles_flex_api" type="com.yworks.graph.anim.GraphMorpher" member="newViewPoint">newViewPoint</api-link> and <api-link ref-type="yfiles_flex_api" type="com.yworks.graph.anim.GraphMorpher" member="newZoom">newZoom</api-link> properties. The following code demonstrates how to center the view at given coordinates and force the zoom to be 1:1.
</p>

private function onMorphStart(event:GraphMorphEvent):void { var morpher:GraphMorpher = event.morpher; // center the view at centerX, centerY // note that the viewPoint is not the center // but the upper left corner of the view var x:Number = centerX - graphCanvas.width/2; var y:Number = centerY - graphCanvas.height/2; morpher.newViewPoint = new Point(x,y); morpher.newZoom = 1; } ```