-
Notifications
You must be signed in to change notification settings - Fork 105
Visual controls animation
< Back to contents >
Last checked against version: 2.1.8
Visual control move animation is played when visual graph is being rebuild and XY coordinates already has been set before (like GraphArea.RelayoutGraph() operation). To enable vertex control animation you need to specify GraphArea.MoveAnimation property using built-in animations or any external animation created by using MoveAnimationBase base class. You can get built-in animations with the help of AnimationFactory static class and then assign it to MoveAnimation property.
For example:
gg_Area.MoveAnimation =
AnimationFactory.CreateMoveAnimation(MoveAnimation.Move, TimeSpan.FromSeconds(1));
Move animation uses batch-execute logic to process all visuals at once that saves some performance.
Visual control delete animation is played when visual is being removed from GraphArea visual tree (currently by calling GraphArea.RemoveVertex() or GraphArea.RemoveEdge()). To enable this type of animation you need to specify GraphArea.DeleteAnimation property using pre-built animations from AnimationFactory or any external animation derived from IOneWayControlAnimation.
For example:
gg_Area.DeleteAnimation =
AnimationFactory.CreateDeleteAnimation(DeleteAnimation.Fade, .3);
Visual control MouseOver animation is played when MouseEnter or MouseLeave visual events are fired. To enable this type of animation you need to specify GraphArea.MouseOverAnimation property using pre-built animations from AnimationFactory or any external animation derived from IBidirectionalControlAnimation.
Please note that you can use GraphArea.SideExpansionSize property to set free space for each GraphArea edge. This helps scale animation to not being cut by area borders.
For example:
gg_Area.MouseOverAnimation =
AnimationFactory.CreateMouseOverAnimation(MouseOverAnimation.Scale, .3);
Take a look on the GraphArea.X/Y/FinalX/FinalY properties when using custom animation algorithms. In that case X and Y attached properties represents current visual object position and can be used in animation procedures. FinalX and FinalY attached props represents final coordinates, in that case the resullting position when animation ends (true object position). By default when you use SetX or SetY methods FinalX and FinalY coordinates are set along with the X and Y. To set only X and Y props use optional param alsoSetFinal:
public static void SetX(DependencyObject obj, double value, bool alsoSetFinal = true); GraphArea.SetX(vertexControl, 0.0, false); GraphArea.SetY(vertexControl, 0.0, false);
All edge routing procedures except realtime path update uses Final coordinates. Realtime path update is performed using PrepareEdgePath method where usage of current (X and Y) attached props are specified through additional param.
When making custom delete animation please notice that you ALWAYS need to implement correct Completed event fire. All delete procedures will start only when animation is finished and Completed event is fired. If you want to skip vertex or edge delete animation don't forget to write Completed event trigger into the empty method.
Edge and vertex animations are handled separatly using different methods. That makes any of them optional in the means of animation and allows different animations for different kind of visuals to be played.
public class ExampleDeleteAnimation : IOneWayControlAnimation
{
public double Duration { get; set; }
public ExampleDeleteAnimation (double duration = .3)
{
Duration = duration;
}
public void AnimateVertex(VertexControl target)
{
//Create and run vertex animation here. Can be optional.
var story = new Storyboard();
var animation = new DoubleAnimation(1, 0, new Duration(TimeSpan.FromSeconds(Duration)), FillBehavior.Stop);
animation.Completed += (sender, e) => { OnCompleted(target); };
story.Children.Add(animation);
Storyboard.SetTarget(animation, target as FrameworkElement);
Storyboard.SetTargetProperty(animation, new PropertyPath(UIElement.OpacityProperty));
story.Begin(target as FrameworkElement);
}
public void AnimateEdge(EdgeControl target)
{
//Create and run edge animation here. Can be optional.
OnCompleted(target);
}
public event RemoveControlEventHandler Completed;
public void OnCompleted(IGraphControl target)
{
if (Completed != null)
Completed(this, new ControlEventArgs(target));
}
}
To correctly implement custom move animation you need to override RunVertexAnimation() and RunEdgeAnimation() methods from the base class. This methods are used to create and run animations for vertex and edge visuals correspondently.
When coding overridden methods note that you are already have VertexStorage and EdgeStorage lists automatically filled by GraphArea that contains all available visuals.
If your logic needs some cleaning to avoid memory leaks please override Cleanup() method from the base class. This method will be called after all animations are complete.
Also note that you need to handle Completed event manually if you want it to be accessible by GraphArea event.
Example animation case:
public class ExampleMoveAnimation: MoveAnimationBase
{
public ExampleMoveAnimation()
{
//set animation duration
Duration = TimeSpan.FromSeconds(1);
}
public override void Cleanup()
{
//cleanup something
}
public override void RunVertexAnimation()
{
//do some vertex animation. Can be optional.
//you need to call this manually at the animation end (vertex and edge! track it manually!)
//if you want corresponding event fired on complete
OnCompleted();
}
public override void RunEdgeAnimation()
{
//do some edge animation. Can be optional.
}
}