Silverlight & Blend動畫設計系列十一：沿路徑動畫（Animation Along a Path）
Silverlight 提供一個好的動畫基礎，但缺少一種方便的方法沿任意幾何路徑對象進行動畫處理。在Windows Presentation Foundation中提供了動畫處理類DoubleAnimationUsingPath和PointAnimationUsingPath，使用這些類就可以非常容易的實現沿幾何路徑的動畫處理，本文提供了基於Silverlight的等效動畫類，我猜想在以後的版本中Silverlight將會提供該功能的實現。
目前，Silverlight不提供沿任意幾何路徑對象動畫處理實現類。但是Silverlight提供了關鍵幀動畫（Key-Frame Animations）類，使用該類只需要提供動畫開始和結束坐標點，然後動畫類使用插值計算這兩點之間的路徑值，最終得到一個描述動畫路徑的關鍵幀集合，通過集合內的動畫路徑描述數據實現動畫效果。
若要以編程的方式去描述一組關鍵幀動畫路徑，就需要提供一個用於拼合幾何路徑的方法。所謂的拼合幾何路徑實際上就是將一個幾何路徑由無數條線段組成，一旦我們有平面化的路徑，然後我們可以輕松地生成該關鍵幀的情節提要。如下圖展示了以上實現所介紹的拼合方案。
然而在Silverlight提供的太多數動畫類都是密封類型，不能像WPF動畫類那樣易於擴展，因此要對Silverlight的動畫類進行擴展只可以考慮使用依賴屬性（DependencyObject）的方式去實現。要實現這一步我們不用自己絞盡腦汁的去想辦法或進行開發試驗，Charles Petzold曾經開發了一個用於拼合路徑的方法組件並發表在其博客文章中，並給予了重復使用的權限。但是此方法組件是基於WPF開發的，要移植到Silverlight中卻缺少一些Matrix類的功能方法，並且Silverlight中沒有提供Vector類，於此需要自己開發一個Vector類：
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 new Point(point.X + vector.X, point.Y + vector.Y);
}
}
}
另外在Silverlight中也沒有提供將幾何路徑（Path）參數值轉化為PathGeometry的相關內置功能，於此我們需要自己實現這樣一個轉換工具類（CodePlex中中開源提供），用於實現任意復雜的幾何路徑的轉換，其使用也非常簡單，如下代碼塊：
//構造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);
通過擴展的DoubleAnimationUsingPath的使用和使用普通的DoubleAnimation是一樣的，這裏就不介紹了。本文只是通過一篇英文文章簡單翻譯過來，詳細大家可查看原文（http://www.codeproject.com/KB/silverlight/PathAnimation.aspx）。
推薦資源：
MSDN:http://msdn.microsoft.com/en-us/library/cc189038(VS.95).aspx
原文地址：http://www.codeproject.com/KB/silverlight/PathAnimation.aspx
幾何路徑轉換組件：http://stringtopathgeometry.codeplex.com/
Silverlight & Blend動畫設計系列十一：沿路徑動畫（Animation Along a Path）