原文:
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>
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="-245"/>
</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)));
new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));
storyboard.Begin();
}
相關推薦資源：
MSDN:
http://msdn.microsoft.com/zh-cn/library/cc189090(VS.95).aspxSilverlight動畫介紹：
http://www.cnblogs.com/skysing/archive/2009/05/15/1457718.html《Function Silverlight 3 Animation》----本篇中使用的示例素材選自此書
版權說明
本文屬原創文章，歡迎轉載且注明文章出處，其版權歸作者和部落格園共有。
作 者：Beniao
文章出處：
http://beniao.cnblogs.com/或
http://www.cnblogs.com/