Drawing a line in Animation

I have an invisible Polyline containing a lot of points in a canvas.

    <Polyline x:Name="plinePath" Stroke="#00000000" StrokeThickness="3">
            <Polyline.Points>
            <Point X="0" Y="0" />
            <Point X="10" Y="10" />
            <开发者_开发问答Point X="10" Y="20" />
            <Point X="20" Y="20" />
            ...
              ...
               ... 
        </Polyline.Points>
    </Polyline>

Now I need to render the line in runtime like someone was drawing it in red. I'd like to do that in a Storyboard if I can.

Any hints on how I could do that?

If the polyline were always heading in one general direction you could just animate a clipping rectangle attached to your plinePath to expose it smoothly.

The problem you have with other methods of "drawing" it is that the individual line segments need to be resized individually along the length of their extent. That is non-trivial, but possible. There are issues over constant speed of drawing vs. interpolating X & Y that need to be calculated for each segment. Basically take the line length (of each segment) then linearly interpolate the end-x and end-y to their final position in a time determined by the line length.

OK,

what I finally did is create my own customcontrol that has a Canvas and a Polyline in it. My control has two main public properties :

• PathPoints (List<Points>) : List of all points in the path

• CurrentPoint (int) : Show all the points in the PathPoints that are less or equal to that number.

Now I can use a Storyboard with a DoubleAnimation based on the "CurrentPoint" property to animate my path.