locked
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

Answers

  • 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">
            <Canvas.Resources>
                <Storyboard x:Name="myStoryboard">
                    <PointAnimationUsingKeyFrames x:Name="myAnim" Storyboard.TargetName="myEllipse" Storyboard.TargetProperty="Center" />
                </Storyboard>
            </Canvas.Resources>

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

    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[] {
                    5,
                    7,
                    8,
                    11,
                    12
                };

            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
                    
                    myAnim.KeyFrames.Add(frame);
                }

                // begin animation
                myStoryboard.Begin();
            }

    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