Silverlight & blend animation design series 11: animation along the path (animation along a path)

Silverlight provides a good animation foundation, but it lacks a convenient way to perform animation processing along any geometric path object. In the Windows Presentation Foundation, the animation processing classes doubleanimationusingpath and pointanimationusingpath are provided. These classes can be used to easily implement animation processing along the geometric path. This article provides Silverlight-based equivalent animation classes, I guess Silverlight will provide implementation of this function in future versions.

 

Currently, Silverlight does not provide an animation implementation class for objects along any geometric path. However, Silverlight provides the key-frame animation class. To use this class, you only need to provide the animation start and end coordinate points, and then the animation class uses interpolation to calculate the path values between the two points, finally, a key frame set describing the animation path is obtained. The animation effect is achieved by describing the data in the animation path in the set.

 

To describe a set of key frame animation paths programmatically, you must provide a method for splicing geometric paths. The so-called splicing geometric path is actually a geometric path composed of countless line segments. Once we have a flattened path, we can easily generate the synopsis of the key frame. As shown in the following figure.

 

However, too many animation classes provided by Silverlight are sealed and cannot be extended as easily as those provided by the WPF animation class. Therefore, to expand the Silverlight animation class, you can only consider using the dependency attribute (dependencyobject). To achieve this step, we don't have to worry about how to find a way or conduct development experiments. Charles Petzold once developed a method component for splicing paths and published it on his blog.Article. However, this method component is developed based on WPF. To be transplanted to Silverlight, some functional methods of matrix classes are missing, and the Vector class is not provided in Silverlight. Therefore, you need to develop a Vector class by yourself:

Namespace Matrixmathhelpers
{

Public   Struct Vector
{
Point _ point;

PublicVector (DoubleX,DoubleY)
{
_ Point= NewPoint (x, y );
}

Public DoubleLength
{
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
{< br> Get { return _ point. X ;}< br> set {_ point. x = value ;}
}

Public double Y
{< br> Get { return _ point. Y ;}< br> set {_ point. Y = value ;}
}

Public static vector operator - (vector vector1, vector vector2)

{
Return NewVector (vector1.x-Vector2.x, vector1.y-Vector2.y );
}

Public   Static Vector Operator   - (Vector)
{
Return   New Vector ( - Vector. X, - Vector. y );
}

Public   Static Vector Operator   * ( Double Scalar, vector)
{
Return   New Vector (vector. x * Scalar, vector. Y * Scalar );
}

Public   Static Vector Operator   * (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, vector vector)
{< br> return New point (point. x + vector. x, point. Y + vector. y);
}

}
}

 

In addition, Silverlight does not provide built-in functions for converting the value of the path parameter to pathgeometry. Therefore, we need to implement such a conversion tool class (open-source in codeplex) by ourselves ), it is used to convert any complex geometric path. It is also very simple to use, as shown below:CodeBlock:

 

// Construct path parameters
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 " ;

//Convert a path to a geometric object
Stringtopathgeometryconverter Converter= NewStringtopathgeometryconverter ();
Geometry GEO=Converter. Convert (PATH );

 

 

Extended doubleanimationusingpathIs the same as using a normal doubleanimation. This article is just through a simple English article translation, detailed you can view the original (http://www.codeproject.com/KB/silverlight/PathAnimation.aspx ).

 

Recommended resources:

Msdn: http://msdn.microsoft.com/en-us/library/cc189038 (vs.95). aspx

Address: http://www.codeproject.com/KB/silverlight/PathAnimation.aspx

Geometric path conversion component: http://stringtopathgeometry.codeplex.com/

 

Description

This article is intended to learn and communicate with people with lofty ideals. You are welcome to repost this article, but mark the original article connection in a prominent position.

Author: beniao

Article Source: http://beniao.cnblogs.com/or http://www.cnblogs.com/