Animation along path (link)

GoXam
1

Hello, is it possible to animate an UI-element along an existing link between two nodes? I found a appropriate sample in GoDiagram samples (AnimatedBasicApp), but how can I achieve something similar with GoXam? I couldn’t find any approach for this in GoXam samples. Any idea?

Thanks,
Georg

2

You can establish an animation that moves a FrameworkElement along the Points of a Link.Route. That’s basically what the GoDiagram AnimatedBasicApp does. Maybe I can create a sample for you tomorrow.

3

Hello Walter, a little sample would be great.
Thanks.

4

I didn’t have time to implement a completely general animation along a link, but the following works for the simplest case where the link is routed as a single segment, going directly between two nodes without any FromSpot or ToSpot.

To your Link’s DataTemplate, add your desired FrameworkElement to the go:LinkPanel. Here I’ll just use a red circle:

    <go:LinkPanel>
        <go:LinkShape . . . />
        . . . maybe arrowhead or other labels too . . .
        <Ellipse x:Name="MARKER" Width="10" Height="10" Fill="Red"
                 Visibility="Collapsed" go:LinkPanel.Index="0" />
    </go:LinkPanel>

Then you can call this function to perform a one-time animation for this link:

    public void AnimateLink(Link link, int milliseconds) {
      if (link == null) return;
      var marker = link.FindNamedDescendant("MARKER");
      if (marker == null) return;
      marker.Visibility = System.Windows.Visibility.Visible;
      var story = new Storyboard();
      var anim = new DoubleAnimation();
      anim.From = 0;
      anim.To = 1;
      anim.Duration = new Duration(new TimeSpan(0, 0, 0, 0, milliseconds));
      Storyboard.SetTarget(anim, marker);
      Storyboard.SetTargetProperty(anim, new PropertyPath(LinkPanel.FractionProperty));
      story.Children.Add(anim);
      story.Completed += (snd, evt) => {
        story.Stop();
        story.Remove();
        marker.Visibility = System.Windows.Visibility.Collapsed;
      };
      story.FillBehavior = FillBehavior.Stop;
      story.Begin();
    }

Note that if you want to animate a bunch of links at the same time, it would be more efficient to share the same Storyboard object with multiple Animations.

There are other customizations you could do with the animation, of course, but this should get you started.

5

Hello Walter,
thank you, I will try it and start with your code snippet.
Georg