Animations

Item Animations

The animate method of DiagramItem can run following animations:

• FillColorAnimation animates the fill color of nodes or link arrowheads.
• StrokeColorAnimation animates the color of node borders or link segments.
• OpacityAnimation animates items' opacity for fade-in and fade-out effects.

The following animations can be applied to DiagramNodes:

• BounceAnimation animates vertical position of nodes.
• ShakeAnimation animates horizontal position of nodes.
• PulseAnimation animates node's local scale factor.
• PathAnimation moves nodes along specified path.

Item's animated values are considered transient and do not change actual property values. If you want to assign last value from animation to actual property such as bounds or opacity, set the keepLastValue flag in animation parameters:

JavaScript

node.animate(
    new PathAnimation(
        [
            new Point(30, 30),
            new Point(50, 30),
            new Point(75, 66),
            new Point(125, 88)
        ],
        {
            keepLastValue: true
        }));

Other animation parameters include duration, repeat, repeatCount, from / to values, animation curve and easing options:

JavaScript

node.animate(
    new OpacityAnimation(
        {
            fromValue: 1,
            toValue: 0.5,
            duration: 250,
            repeat: true,
            repeatCount: 4,
            reverse: true,
            animationType: Animations.AnimationType.BackBow
        }));

Item and view animations that affect different properties can run simultaneously.

View Animations

The animate method of DiagramView can run following animations:

• ScrollAnimation animates the scroll position of a view.
• ZoomAnimation animates the zoom factor of a view.

JavaScript

diagramView.animate(
        new ScrollAnimation(
        {
            fromValue: new Point(0, 0),
            toValue: new Point(100, 60),
            animationType: Animations.AnimationType.Power,
            easingType: Animations.EasingType.EaseInOut
        }));

View animations are not transient and always set the scroll* or zoomFactor properties.

Looping Animations

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

JavaScript

// 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();

Custom Animations

To animate arbitrary attributes of any type, an Animation instance can receive an updateCallback function as a parameter to the constructor. This callback function can be used to set item coordinates or property values of the object being 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 update callback:

JavaScript

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();

Alternatively, a class derived from Animation could override the virtual onUpdate method.

Default Animation and Easing Functions

There are seven default animation type functions that can be used to animate items, designated by respective elements of AnimationType enumeration:

• Linear: represents an animation that accelerates / decelerates using a linear function.
• Power: represents an animation that accelerates / decelerates through exponentiation formula - x^n where n can be set through the animation's param property. The default exponent value is 2.
• Exponential: represents an animation that accelerates / decelerates using an exponential function. The exponent can be set through the animation's param property. The default exponent value is 10.
• Circular: represents an animation that accelerates / decelerates using a circular function.
• BackBow: represents an effect that simulates a retraction in the motion of the animation. The amplitude of the retraction can be controlled through the animation's param property. The default param value is 1.5.
• Bounce: represents a bouncing effect animation.
• Elastic: represents an oscillating effect animation. The oscillation frequency can be controlled through the animation's param property. The default param value is 0.5.

The default animations can be additionally customized by an easing function, specified via EasingType enumeration:

• EaseIn: follows the animation function associated with the Animation.
• EaseOut: inverses the animation function associated with the Animation.
• EaseInOut: uses EaseIn for the first half of the Animation's duration and EaseOut for the second half.
• EaseOutIn: uses EaseOut for the first half of the Animation's duration and EaseIn for the second half.

Custom Animation Functions

In addition to the provided default animation functions, it is also possible to define custom animation effects. Set the animationType property 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

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();