Silverlight & Blend Animation Design Series 11: Animating along paths

Silverlight provides a good animation base, but lacks a convenient way to animate along arbitrary geometric path objects. Animate classes Doubleanimationusingpath and Pointanimationusingpath are available in Windows Presentation Foundation, and these classes can be easily implemented Animating along a geometric path, this article provides an equivalent animated class based on Silverlight, and I suspect that Silverlight will provide the implementation of that functionality in future versions.

　

Currently, Silverlight does not provide an animation implementation class along any geometric path object. However, Silverlight provides a key-frame animation (Key-frame animations) class that uses only the animation start and end coordinates, and then the animation class uses interpolation to compute the path value between these two points, and finally gets a keyframe set that describes the animation path, which Animate path description data within the collection to achieve animation effect.

To programmatically describe a set of keyframe animation paths, you need to provide a method for flattening the geometry paths. The so-called flattening geometry path is actually a geometric path composed of countless segments, once we have a flattened path, then we can easily generate the storyboard of that keyframe. The following illustration shows the flattening scheme described in the above implementation.

However, the majority of animation classes provided in Silverlight are sealed types and cannot be extended as easily as the WPF animation class, so extending the Silverlight animation class can only be considered in the way that dependent attributes (DependencyObject) are used. To achieve this we do not have to rack our brains to find a way or to develop experiments, Charles Petzold has developed a method component for flattening paths and published in its blog posts, and given the right to reuse. However, this method component was developed based on WPF, and there was a lack of functional methods for the matrix classes to migrate to Silverlight, and the vector class was not available in Silverlight, where it was necessary to develop a vector class for itself:

Namespace Matrixmathhelpers
{

public struct Vector
{
Point _point;
Public Vector (double x, double y)
{
_point = new Point (x, y);
}
Public double Length
{
get {return (math.sqrt Math.pow (_point). X, 2.0) + Math.pow (_point.　Y, 2.0)); }
}
public void normalize ()
{
if (Length = = 0)
throw new System.InvalidOperationException ("Vector Length is zero, can not normalize");
Double L = Length;
_point. X/= L;
_point. Y/= L;
}
Public double X
{
get {return _point.　X }
set {_point.　X = value; }
}
Public double Y
{
get {return _point.　Y }
set {_point.　Y = value; }
}
public static Vector operator-(vector vector1, vector vector2)
{
return new Vector (Vector1. X-vector2. X, Vector1. Y-vector2. Y);
}
public static vector operator-(vector vector)
{
return new Vector (-vector. X,-vector. Y);
}

public static vector operator * (double scalar, vector vector)
{
return new vector (vector. X * scalar, vector. Y * scalar);
}
public static vector operator * (vector vector, double scalar)
{
return new vector (vector. X * scalar, vector. Y * scalar);
}

public static double operator * (vector vector1, vector vector2)
{
Return (Vector1. X * Vector2. X) + (Vector1. Y * Vector2. Y);
}

public static vector operator + (vector vector1, vector vector2)
{
Return (new Vector (Vector2). X + Vector1. X, Vector2. Y + Vector1. Y));
}
public static point operator + (point Point,vector Vector)
{
Return to new point. X + vector. X, point. Y + vector. Y);
}
}
}

In addition, there is no related built-in functionality to convert the geometric path parameter value to PathGeometry in Silverlight, where we need to implement a transformation tool class (available in CodePlex) for the transformation of arbitrarily complex geometric paths. Its use is also very simple, the following code block:

//构造Path路径参数
string　path　=　"M50,100　C120,361　230.5,276.5　230.5,276.5　 L305.98807,182.3422　C305.98807,182.3422　419.5";
path　+=　",179.5002　367.5,265.49993　315.5,351.49966　238.50028,399.49924　 238.50028,399.49924　L61.500017,420.49911";
//将路径转化为几何对象
StringToPathGeometryConverter　converter　=　new　 StringToPathGeometryConverter();
Geometry　geo　=　converter.Convert(path);

The use of extended Doubleanimationusingpath is the same as using ordinary doubleanimation, which is not covered here. This article is only through an English article simple translation, detailed you can view the original text (http://www.codeproject.com/KB/silverlight/PathAnimation.aspx).