Silverlight & Blend動畫設計系列一：偏移動畫（TranslateTransform）
用戶界面組件、圖像元素和多媒體功能可以讓我們的界面生動活潑，除此之外，Silverlight還具備動畫功能，它可以讓應用程序“動起來”。實際上，英文中Animation這個單詞的意思是給某物帶來生命。在界面中添加動畫效果，給人以印象深刻可視化提示，可以讓用戶的註意力集中到我們想讓他們關註的地方。
動畫主要是通過計時器來完成，在Silverlight中開發動畫程序通常是使用微軟主推的設計工具Microsoft Expression Blend，Silverlight中提供了優秀的動畫系統，我們可以通過Microsoft Expression Blend 快速的完成動畫元素的設計制作，然後通過Visual Studio作為編碼環境進行後面的管理動畫定時器和刷新用戶界面的工作。當使用Microsoft Expression Blend 時，可以用拖拽的方式在時間線中進行動畫的定義，這樣可以很容易快速定義負責的動畫,因為 Microsoft Expression Blend 將自動生成對應的XAML代碼。
Silverlight中的偏移動畫和Flash中的補間動畫基本一樣，其實很好理解，也就是一個動畫元素（組件）從一個位置移動到另一個位置，這個過著中有三個關鍵點：動畫起點、動畫終點和動畫時間。這三點可以理解為一個動畫元素從始點坐標向終點坐標偏移的緩沖時間是多少。
當我們定義好了動畫元素後，可以直接通過Blend中的對象和時間線面板來為動畫元素添加動畫容器時間線（Storyboard），如下圖所示：
當動畫容器時間線創建好後，只需要選中需要進行創建動畫的元素，然後再屬性面板下進行可視化屬性設置就可以完成動畫的創建，如下圖示為創建元素darkMoon的偏移動畫。
通過上面的一系列操作設置後切換到XAML視圖，可以發現在XAML編碼文件裏Blend自動生成了如下代碼片段，其作用就是為名為“darkMoon”的動畫元素創建兩個方向（X,Y）的偏移動畫。
<Storyboard x:Name="Storyboard1"><DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="darkMoon"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="280"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="darkMoon"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="-245"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
上圖為動畫執行過程截圖，在某些情況下要實現一些動畫效果是不能預先確定的，這就需要在程序編碼中去動態的創建動畫效果。使用Blend進行動畫設計是非常簡單的，尤其是對Adobe Flash熟悉的人員，其實在程序編碼中使用程序創建動畫也一樣的簡單，相比之下只是需要人為的去編寫很多的程序代碼，另外就是通過程序代碼動態的創建動畫效果需要開發人員對Silverlight的動畫框架非常熟悉，只有在熟練應用Silverlight動畫框架所提供的動畫接口的情況下才能夠和使用Blend設計動畫一樣隨心應手實現各種不同的動畫效果。
編寫程序代碼創建動畫其實也是非常簡單的，只要理清了思路和熟練應用Silverlight的動畫框架提供的編程
接口就可以完成動畫的開發。首先需要弄清楚動畫容器時間線、動畫動作、動畫類型、動畫效果等基本概念。就以本篇的示例來分析，通過程序動態的創建動畫效果的代碼如下：
/// <summary>/// 創建動畫
/// </summary>
private void CreateStoryboard()
{
//元素當前所在的坐標點
Point currentPoint = new Point(Canvas.GetLeft(darkMoon), Canvas.GetTop(darkMoon));
//目標點坐int標
Point point = new Point(280, -245);
//創建動畫容器時間線
Storyboard storyboard = new Storyboard();
DoubleAnimation doubleAnimation = new DoubleAnimation();
//創建X軸方向動畫
doubleAnimation.From = currentPoint.X;
doubleAnimation.To = point.X;
doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 1));
Storyboard.SetTarget(doubleAnimation, darkMoon);
Storyboard.SetTargetProperty(doubleAnimation,
new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));
storyboard.Children.Add(doubleAnimation);
//創建Y軸方向動畫
doubleAnimation = new DoubleAnimation();
doubleAnimation.SetValue(DoubleAnimation.FromProperty, currentPoint.Y);
doubleAnimation.SetValue(DoubleAnimation.ToProperty, point.Y);
doubleAnimation.SetValue(DoubleAnimation.DurationProperty, new Duration(new TimeSpan(0, 0, 1)));
Storyboard.SetTarget(doubleAnimation, darkMoon);
Storyboard.SetTargetProperty(doubleAnimation,
new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
Silverlight & Blend動畫設計系列一：偏移動畫（TranslateTransform）