Animating diagram

[Frederic Mory]

Do you have any plan or tricks for current version to animate Wpf Diagrams.

i.e : i made a diagram representing a synoptic of an energy chain for a datacenter. Now, i want to show whats happening in case of failure of a portion of the chain. A cool feature would be to animate the diagram to show energy flow crossing some of my nodes and connectors.

[Nikhil A]

Hi,

We can perform all kinds of animations on nodes by applying the storyboard. For the case you have mentioned, in order to show a flow of energy between nodes, you can specify intermediate transparent nodes (dummy nodes) at the desired places where energy flow occurs. Then a double animation can be applied changing the opacity of the nodes from 1 to 0 and 0 to 1 continuously so that the intermediate dummy nodes appear and get hidden in a smooth manner.


Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:10" AutoReverse="False" RepeatBehavior="Forever" />


Then put all your dummy nodes in a temporary collection and apply the animation to those nodes.
ObservableCollection nodes = new ObservableCollection();
nodes.Add(dummynode1);
nodes.Add(dummynode2);
nodes.Add(dummynode3);


int x=0;
private void Button_Click_1(object sender, RoutedEventArgs e)
{
foreach (Node n in nodes)
{
Storyboard story = this.Resources["myStoryboard1"] as Storyboard;
story.BeginTime = new TimeSpan(0, 0, 0, x+=2, 0);
n.BeginStoryboard(story);
}
}

The above mentioned process is just an example for applying animations to node. The storyboard can be written according to one's needs so that the appropriate animation can be achieved. In a similar way node rotation and translation animations can be achieved.

Sample code for translating node:

DoubleAnimation nodeanimation = new DoubleAnimation();
nodeanimation.From =500;
nodeanimation.To = 0;
nodeanimation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 500));
nodeanimation.RepeatBehavior = new RepeatBehavior(1);

TranslateTransform rt = new TranslateTransform();

nodeObj.RenderTransform = rt;
rt.BeginAnimation(TranslateTransform.XProperty, nodeanimation);

Sample code for rotating node:

DoubleAnimation nodeanimation = new DoubleAnimation();
nodeanimation.From = 0;
nodeanimation.To = 360;
nodeanimation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 500));
nodeanimation.RepeatBehavior = new RepeatBehavior(15);

RotateTransform rt = new RotateTransform();

nodeObj.RenderTransform = rt;
nodeObj.RenderTransformOrigin = new Point(.5, .5);
rt.BeginAnimation(RotateTransform.AngleProperty, nodeanimation);

Hope this helps in solving your problem.

Thanks for your interest in Syncfusion products.

Regards,
Nikhil

[Frederic Mory]

Its all so simple, thats a great idea, thank you !