Silverlight & Blend動畫設計系列文章

　　使用者介面組件、映像元素和多媒體功能可以讓我們的介面生動活潑，除此之外，Silverlight還具備動畫功能，它可以讓應用程式“動起來”。實際上，英文中Animation這個單詞的意思是給某物帶來生命。在介面中添加動畫效果，給人以印象深刻可視化提示，可以讓使用者的注意力集中到我們想讓他們關注的地方。

 

　　動畫主要是通過計時器來完成，在Silverlight中開發動畫程式通常是使用微軟主推的設計工具Microsoft Expression Blend，Silverlight中提供了優秀的動畫系統，我們可以通過Microsoft Expression Blend 快速的完成動畫元素的設計製作，然後通過Visual Studio作為編碼環境進行後面的管理動畫定時器和重新整理使用者介面的工作。當使用Microsoft Expression Blend 時，可以用拖拽的方式在時間軸中進行動畫的定義，這樣可以很容易快速定義負責的動畫,因為 Microsoft Expression Blend 將自動產生對應的XAML代碼。

Silverlight & Blend動畫設計系列文章將一一揭曉Silverlight & Blend動畫設計的各方面的常用設計方法和技巧，文章目錄如下：

 

Silverlight & Blend動畫設計系列一：位移動畫（TranslateTransform）

       使用者介面組件、映像元素和多媒體功能可以讓我們的介面生動活潑，除此之外，Silverlight還具備動畫功能，它可以讓應用程式“動起來”。實際上，英文中Animation這個單詞的意思是給某物帶來生命。在介面中添加動畫效果，給人以印象深刻可視化提示，可以讓使用者的注意力集中到我們想讓他們關注的地方。

 

Silverlight & Blend動畫設計系列二：旋轉動畫（RotateTransform）

　　Silverlight的基礎動畫包括位移、旋轉、縮放、傾斜和翻轉動畫，這些基礎動畫毫無疑問是在Silverlight中使用得最多的動畫效果，其使用也是非常簡單的。相信看過上一篇《位移動畫（TranslateTransform）》文章的朋友大多數對Silverlight & Blend動畫設計已經產生了莫大的興趣，本篇將繼續介紹Silverlight中的基礎動畫之旋轉動畫（RotateTransform）。

 

Silverlight & Blend動畫設計系列三：縮放動畫（ScaleTransform）

　　在Silverlight的動畫架構中，ScaleTransform類提供了在二維空間中的座標內進行縮放操作，通過ScaleTransform可以在水平或垂直方向的縮放和展開對象，以實現一個簡單的縮放動畫效果，故此我將其稱為縮放動畫（ScaleTransform）。使用ScaleTransform需要特別關注的有兩點：中心點座標和X、Y軸方向的縮放比例，比例值越小則對象元素就越小（既收縮），比例值越大則對象元素就越大（既呈現為放大效果）。

 

Silverlight & Blend動畫設計系列四：傾斜動畫（SkewTransform）

　　Silverlight中的傾斜變化動畫（SkewTransform）能夠實現對象元素的水平、垂直方向的傾斜變化動畫效果。我們現實生活中的傾斜變化效果是非常常見的，比如翻書的紙張效果，關門開門的時候門映射在牆上的影子也是在不斷的傾斜變換。在Silverlight中實現一個傾斜變化的動畫效果是非常簡單的，如果利用Blend這種強大的設計工具來實現那更是錦上添花。

 

Silverlight & Blend動畫設計系列五：故事板(StoryBoards)和動畫(Animations)

　　正如你所看到的，Blend是一個非常強大的節約時間的設計工具，在Blend下能夠設計出很多滿意的動畫作品，或許他具體是怎麼實現的，通過什麼方式實現的我們還是一無所知。本篇將續前面幾篇基礎動畫之上，詳細介紹Silverlight裡提供故事板（StoryBorards）的屬性和各種不同類型的動畫（Animations）的詳細知識點，揭曉在Blend下設計動畫的內幕故事。

 

Silverlight & Blend動畫設計系列六：動畫技巧（Animation Techniques）之對象與路徑轉化、波感特效

　　當我們在進行Silverlight & Blend進行動畫設計的過程中，可能需要設計出很多效果不一的圖形映像出來作為動畫的基本組成元素。然而在設計過程中可能會出現許多的問題，比如當前繪製了一個橢圓，但是在動畫中僅僅只需要橢圓的一半或是更多更少的部分用作與動畫元素，這時候就需要對橢圓對象進行相應的處理才能滿足我們的需求，那到底該怎麼做才能實現最終想要的效果呢？本篇將介紹在在Blend中進行對象與路徑轉化和波感特效的動畫設計實現。

 

 Silverlight & Blend動畫設計系列七：模糊效果（BlurEffect）與陰影製作效果（DropShadowEffect）

      模糊效果（BlurEffect）與陰影製作效果（DropShadowEffect）是兩個非常實用和常用的兩個特效，比如在開發相簿中，可以對照片的縮圖添加模糊效果，在放大照片的過程中動態改變照片的大小和模糊的透明度來達到一個放大透明的效果。本篇主要介紹如何在Blend中為對象設計模糊效果（BlurEffect）與陰影製作效果（DropShadowEffect）的具體實現。

 

 Silverlight & Blend動畫設計系列八：拖放(Drag-Drop)操作與拖允許存取為(DragBehavior)

　　Silverlight中自身並沒有提供拖放功能的相關實現，要實現拖放功能得藉助其事件支援（MouseLeftButtonDown、MouseLeftButtonUp和MouseMove）來完成，實際應用中我們可以通過行為（Behavior）特性將拖放操作封裝為行為，這樣可達到代碼複用的效果。而在Blend中則直接提供了拖放操作行為，它位於Microsoft.Expression.Interactions.dll的Microsoft.Expression.Interactivity.Layout名稱空間下。

 

Silverlight & Blend動畫設計系列九：動畫（Animation）與檢視狀態管理(Visual State Manager)

　　Silverlight中的動畫（Animation）與檢視狀態管理(Visual State Manager) 結合使用是非常常見的，動畫用於管理對象在某段事件段內執行的動畫動作，檢視狀態管理則用於控制對象在多個不同的視覺狀態之間切換、導航。本篇主要介紹動畫（Animation）與檢視狀態管理(Visual State Manager)的結合應用，關於檢視狀態管理的詳細內容請大家查看相關資料。

 

Silverlight & Blend動畫設計系列十：Silverlight中的座標系統（Coordinate System）與向量（Vector）運動

      Silverlight中的座標系統和Flash中的座標系統是完全一樣的，都是採用笛卡爾座標系統，分為四象限。簡單的說就是以X軸表示水平方向並向東方無限延伸，Y軸表示垂直方向並向著南方無限延伸，X和Y軸相交點表示座標系源點，其X,Y座標值為0,0，所以在Silverlight中的座標系範圍就是以座標源點為起點，無限向東南方向延伸，也就是笛卡爾座標系中的四象限。

 

Silverlight & Blend動畫設計系列十一：沿路徑動畫（Animation Along a Path）

　　Silverlight 提供一個好的動畫基礎，但缺少一種方便的方法沿任意幾何路徑對象進行動畫處理。在Windows Presentation Foundation中提供了動畫處理類DoubleAnimationUsingPath和PointAnimationUsingPath，使用這些類就可以非常容器的實現沿幾何路徑的動畫處理，本文提供了基於Silverlight的等效動畫類，我猜想在以後的版本中Silverlight將會提供該功能的實現。  

 

Silverlight & Blend動畫設計系列十二：三角函數（Trigonometry）動畫之自由旋轉（Free-form rotation）

　　說道對象的旋轉，或許就會聯想到對象角度的概念。對象的旋轉實現實際上就是利用對象的角度改變來實現的位置變換，在《Silverlight & Blend動畫設計系列二：旋轉動畫（RotateTransform）》一文中有對對象的不同角度變換的實現介紹，本篇要介紹的自由旋轉（Free-form rotation）將藉助《Function Silverlight 3 Animation》一書中的樣本項目介紹，詳細敬請閱讀本文。

 

 Silverlight & Blend動畫設計系列十三：三角函數（Trigonometry）動畫之飄落的雪花（Falling Snow）

　　平時我們所看到的雪花（Falling Snow）飄飄的效果實際上也是一個動畫，是由許多的動畫對象共同完成的一個介面效果。對於不同大小的雪片可以通過縮放變換（ScaleTransform）功能特性確定，雪片飄落是存在於一個空間之中，通過不同的透明度值可使雪花看上去具有一定的空間視覺，雪花的飄落過程是由三角函數的原理實現的左右滑落效果。

 

 

更多博文待寫作，敬請關注......

 

 

著作權說明

  本文屬原創文章，歡迎轉載且註明文章出處，其著作權歸作者和部落格園共有。  

  作      者：Beniao

 文章出處：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/