Animations

Animating Diagram Items

To animate a DiagramItem, instantiate a new Animation object specifying it's properties and call the start method to begin the animation. The following example will animate a node along it's Y-axis from 5 to 100 Y-coordinate, using the Power animation function and the EaseOut easing function:

JavaScript Copy Code

var Animation = MindFusion.Animations.Animation;
var AnimationType = MindFusion.Animations.AnimationType;
var EasingType = MindFusion.Animations.EasingType;

var options =
    {
        duration: 500,
        fromValue: 5,
        toValue: 100,
        animationType: AnimationType.Power,
        param: 2,
        easingType: EasingType.EaseOut
    };
var animation = new Animation(node, options);
animation.start();

JavaScript Copy Code
var Animation = MindFusion.Animations.Animation; var AnimationType = MindFusion.Animations.AnimationType; var EasingType = MindFusion.Animations.EasingType; var options = { duration: 500, fromValue: 5, toValue: 100, animationType: AnimationType.Power, param: 2, easingType: EasingType.EaseOut }; var animation = new Animation(node, options); animation.start();

Animate

Example 1

Looping Animations

To create looping animations, use the repeat and reverse properties. To stop an animation, call its stop method.

JavaScript Copy Code
// Use this property to repeat the animation until stopped. animation.repeat = true; // Use this property to reverse the to and from values. animation.reverse = true; // Use the stop method to complete the animation. animation.stop();

Animate

Example 2

OnUpdate Callback

In order to specify which property will be animated, when instantiating an Animation instance, pass an onUpdateCallback function as a parameter to the object's constructor. This callback function can be used to specify which property of the animated item will be animated. The callback signature should contain two arguments - the animation object instance and a value representing the animated property delta. This callback is called at every animation timer "tick". The following example creates a pulse-like effect, using an onUpdateCallback:

JavaScript Copy Code

var Animation = MindFusion.Animations.Animation;
var Utils = MindFusion.Diagramming.Utils;

var options =
    {
        duration: 550,
        fromValue: -0.15,
        toValue: 0.15,
        repeat: true,
        reverse: true
    };

/**
* @param [Animation] animation The animation object instance.
* @param [Number] animationDelta A number representing the percentage of displacement
* of the animated property's value in the [fromValue, toValue] range.
*/
function pulse(animation, animationDelta)
{
    var bounds = animation.item.bounds.clone();
    var to = animation.toValue;
    bounds = Utils.inflate(bounds, to * animationDelta, to * animationDelta);
    animation.item.setBounds(bounds, true);
}

var animation = new Animation(node, options, pulse);
animation.start();

JavaScript Copy Code
var Animation = MindFusion.Animations.Animation; var Utils = MindFusion.Diagramming.Utils; var options = { duration: 550, fromValue: -0.15, toValue: 0.15, repeat: true, reverse: true }; /** * @param [Animation] animation The animation object instance. * @param [Number] animationDelta A number representing the percentage of displacement * of the animated property's value in the [fromValue, toValue] range. / function pulse(animation, animationDelta) { var bounds = animation.item.bounds.clone(); var to = animation.toValue; bounds = Utils.inflate(bounds, to animationDelta, to * animationDelta); animation.item.setBounds(bounds, true); } var animation = new Animation(node, options, pulse); animation.start();

Animate

Example 3

Default Animation and Easing Functions

The following example demonstrates the built-in animation and easing functions that the Animation class provides:

EaseIn EaseOut EaseInOut EaseOutIn

Example 4

Custom Animation Functions

In addition to the provided default animation functions, it is also possible to define custom animation effects. Set the animationType to Custom and pass a custom animation function callback to the Animation constructor. The callback signature should contain two arguments - the time progressed as a percentage from the start of the animation and the user-set parameter, used in the animation function. The following example uses a custom function where x is a value between 0 and 1 and y is a parameter, passed as an argument to the Animation constructor.

JavaScript Copy Code

var Animation = MindFusion.Animations.Animation;
var AnimationType = MindFusion.Animations.AnimationType;

var options =
    {
        duration: 500,
        fromValue: 5,
        toValue: 100,
        param: 5,
        animationType: AnimationType.Custom
    };

/**
* @param [Number] progress The time progress in the animation loop. A value between 0 and 1.
* @param [Object] param The user-set value, used to parameterize the animation function.
*/
function custom(progress, param)
{
    return Math.pow(Math.E, 1 - (1 / Math.pow(progress, param)));
}

var animation = new Animation(node, options, null, custom);
animation.start();

JavaScript Copy Code
var Animation = MindFusion.Animations.Animation; var AnimationType = MindFusion.Animations.AnimationType; var options = { duration: 500, fromValue: 5, toValue: 100, param: 5, animationType: AnimationType.Custom }; /** * @param [Number] progress The time progress in the animation loop. A value between 0 and 1. * @param [Object] param The user-set value, used to parameterize the animation function. */ function custom(progress, param) { return Math.pow(Math.E, 1 - (1 / Math.pow(progress, param))); } var animation = new Animation(node, options, null, custom); animation.start();

Animate

Example 5