Item Animations
The Animate method of DiagramItem can run following animations:
The following animations can be applied to DiagramNodes:
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#
Copy Code
|
---|
node.Animate( new PathAnimation( new List<PointF> { new PointF(30, 30), new PointF(50, 30), new PointF(75, 66), new PointF(125, 88) }, new AnimationOptions { KeepLastValue = true })); |
Other AnimationOptions properties include Duration, Repeat, RepeatCount, From / To values, animation curve and easing options:
C#
Copy Code
|
---|
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:
C#
Copy Code
|
---|
diagramView.Animate( new ScrollAnimation( new AnimationOptions { FromValue = new PointF(0, 0), ToValue = new PointF(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#
Copy Code
|
---|
// 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#
Copy Code
|
---|
using MindFusion.Animations; using MindFusion.Diagramming;
public void Pulse(Animation animation, double animationDelta) { var node = animation.Item as DiagramNode; var delta = (float)animationDelta; var bounds = node.Bounds; var to = (float)animation.Options.ToValue; bounds = RectangleF.Inflate(bounds, to * delta, to * delta); node.SetBounds(bounds, true, true); diagram.Invalidate(); }
// ...
var animationOptions = new AnimationOptions(); animationOptions.FromValue = -0.15f; animationOptions.ToValue = 0.15f; 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#
Copy Code
|
---|
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 = 5f; animationOptions.ToValue = 100f; animationOptions.Duration = 500; animationOptions.Param = 5d; animationOptions.AnimationType = AnimationType.Custom;
var animation = new Animation(node, animationOptions, null, Custom); animation.Start();
|