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 AnimationOptions:

C#

node.Animate(
    new PathAnimation(
        new List<Point>
        {
            new Point(30, 30),
            new Point(50, 30),
            new Point(75, 66),
            new Point(125, 88)
        },
        new AnimationOptions
        {
            KeepLastValue = true
        }));

Other AnimationOptions properties include Duration, Repeat, RepeatCount, From / To values, animation curve and easing options:

C#

node.Animate(
    new OpacityAnimation(
        new AnimationOptions
        {
            FromValue = 1,
            ToValue = 0.5,
            Duration = 222,
            Repeat = true,
            RepeatCount = 4,
            Reverse = true,
            AnimationType = 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.

C#

diagramView.Animate(
    new ScrollAnimation(
        new AnimationOptions
        {
            FromValue = new Point(0, 0),
            ToValue = new Point(100, 60),
            AnimationType = AnimationType.Power,
            EasingType = 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 of the AnimationOptions class. If RepeatCount is not set, the animation repeats indefinitely, and can be stopped by calling its Stop method.

C#

// Set this property to repeat the animation until stopped.
animationOptions.Repeat = true;
// Set this property to reverse the to and from values.
animationOptions.Reverse = true;

// At a later point, call Stop 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 UpdateCallback:

C#

using MindFusion.Animations;
using MindFusion.Diagramming;

public void Pulse(Animation animation, double animationDelta)
{
    var node = animation.Item as DiagramNode;
    var delta = (double)animationDelta;
    var bounds = node.Bounds;
    var to = (double)animation.Options.ToValue;
    bounds = bounds.Inflate(to * delta, to * delta);
    node.SetBounds(bounds, true, true);
    diagram.Invalidate();
}

// ...

var animationOptions = new AnimationOptions();
animationOptions.FromValue = -0.15;
animationOptions.ToValue = 0.15;
animationOptions.Duration = 550;
animationOptions.Repeat = true;
animationOptions.Reverse = true;

var animation = new Animation(node, animationOptions, Pulse);
animation.Start();

Alternatively, a class derived from Animation could override the virtual UpdateAnimation 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 AnimationOptions' 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 AnimationOptions' 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 AnimationOptions' 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 AnimationOptions' 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.

C#

using MindFusion.Animations;

public double Custom(double progress, double? param)
{
    return Math.Pow(Math.E, 1 - (1 / Math.Pow(progress, param.Value)));
}

// ...

var animationOptions = new AnimationOptions();
animationOptions.FromValue = 5.0;
animationOptions.ToValue = 100.0;
animationOptions.Duration = 500;
animationOptions.Param = 5d;
animationOptions.AnimationType = AnimationType.Custom;

var animation = new Animation(node, animationOptions, null, Custom);
animation.Start();