How to animate a polygon? (Read: Animate the contour to change shape)

Question

Greetings!

I am currently working on a Silverlight project and I would like to animate a simple polygon shape (a trapezoid actually). Specifically, I woudld like to move two of the four points dynamically after some event happened. I need / want to resize and move one of the parallel sides to another position.

I admit I am rather new to Silverlight and have not found a source that could tell me wether it is even possible, not to mention how it can be done.

I have used animations before, so the general concept of storyboards and animations is not new to me. But how can I move the points of a polygon in an animation? Are there alternatives that have a similar optical effect (e.g. animating a path)?
Is there a PropertyPath I can use, similar to

P3AnimBack.SetValue(Storyboard.TargetPropertyProperty, 
    new PropertyPath("(Path.Data).
        (PathGeometry.Figures)[0].(PathFigure.Segments)[0].
        (BezierSegment.Point3)"));

, as found in a Point Animation in Silverlight 3 tutorial?

Thank you all in advance. :)

Answer 1

i don't know anything about Silverlight, or animations in .NET in general, but Charles Petzold did something similar:

• Squaring the Circle (view animation in browser)
• Animating Points and PointCollections in Silverlight (view in browser)
• Animated Polyline Interpolations in Silverlight

Answer 2

As requested in a comment, I explain what I finally used to make my animation:

I follwed up on Animated Polyline Interpolations in Silverlight and more or less directly used this code - "stealing" the PointCollectionInterpolator.cs class.

Then I had my method to create the polygons I need and prepare animations:

private void CreatePolygon(TextBox txtbx, string prop, Color curcol)
    {
        PointCollectionInterpolator pci = new PointCollectionInterpolator();
        pci.Points1 = new PointCollection() // Start Points
            {
                new Point(...),
                new Point(...),
                new Point(...),
                new Point(...),
            };

        pci.Points2 = new PointCollection() // End Points
            {
                new Point(...),
                new Point(...),
                new Point(...),
                new Point(...),
            };

        Polygon tmpply = new Polygon();
        LayoutRoot.Children.Add(tmpply);

        tmpply.Points = pci.InterpolatedPoints;

        DoubleAnimation animpci = new DoubleAnimation();
        animpci.Duration = someDuration;
        animpci.From = 0.0;
        animpci.To = 1.0;
        Storyboard.SetTarget(animpci, pci);
        Storyboard.SetTargetProperty(animpci, new PropertyPath("(Progress)"));
        myStoryBoard.Children.Add(animpci);
    }

And then in some random event handler, I start the animation. Additionally, so I can reuse the method, I moved the end points collection into the start points collection and update the interpolator with new end points. (Remember setting the progress to 0.0 ...) So each time the handler fires, the polygon seamlessly morphs into a new one.

private void SomeEventHandler(object sender, RoutedEventArgs e) 
{
    PointCollectionInterpolator polygonPCI = 
            this.referenceToPointCollectionInterpolator;
    polygonPCI.Points1 = polygonPCI.Points2;
    polygonPCI.Progress = 0.0;
    polygonPCI.Points2 = getNewEndPoints();
    myStoryBoard.Begin();
}

In retrospect, i would change the names from Points1 and Points2 to StartPoints and EndPoints resp. Hope this helped. :)