Animation via waypoints or coordinates RRS feed

  • Question

  • I have an array of (X,Y) coordinates and another array of times. I would like to setup an animation that progresses to each waypoint given by the coordinates in the times specified. Is there a way to do this with a storyboard? Thanks.

    Monday, November 10, 2008 1:44 AM


  • Hi chillax:

    Yes, you can do it with a storyboard by using PointAnimationUsingKeyFrames and dynamically creating the key frames using your array of (X,Y) coordinates and array of times using code behind.  Below is sample code:

    In XAML

        <Canvas x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
                <Storyboard x:Name="myStoryboard">
                    <PointAnimationUsingKeyFrames x:Name="myAnim" Storyboard.TargetName="myEllipse" Storyboard.TargetProperty="Center" />

            <Path Fill="Blue">
                    <EllipseGeometry x:Name="myEllipse" Center="5,5" RadiusX="2" RadiusY="2" />

    In C# code behind

            private Point[] _points =
                new Point[] {
                    new Point(40, 40),
                    new Point(10, 50),
                    new Point(30, 70),
                    new Point(40, 80),
                    new Point(10, 80)

            private int[] _seconds =
                new int[] {

            private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
                // create key frames using _points and _seconds array
                for (int f = 0; f < _points.Length; f++)
                    LinearPointKeyFrame frame = new LinearPointKeyFrame();
                    frame.Value = _points[f];  // point coordinate
                    frame.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, _seconds[f])); // duration: current frame key time - last frame key time

                // begin animation

    If you need references on how to create animations dynamically, please refer to: http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx

    For more on key frames animation: http://msdn.microsoft.com/en-us/library/cc189038(VS.95).aspx

    I hope that helps,

    Sherwin Chu

    Monday, November 10, 2008 2:43 AM