1、Animation簡介
動畫是快速播放一系列圖像（其中每個(gè)圖像與下一個(gè)圖像略微不同）給人造成的一種幻覺。大腦感覺這組圖像是一個(gè)變化的場景。在電影中，攝像機(jī)每秒鐘拍攝許多照片（幀），便可使人形成這種幻覺。用投影儀播放這些幀時(shí)，觀眾便可以看電影了。在 Silverlight 中，通過對對象的個(gè)別屬性應(yīng)用動畫，可以對對象進(jìn)行動畫處理。例如，若要使 UIElement 增大，需對其 Width 和 Height 屬性進(jìn)行動畫處理。若要使 UIElement 逐漸從視野中消失，可以對其 Opacity 屬性進(jìn)行動畫處理。可以對 Silverlight 中許多對象的屬性進(jìn)行動畫處理。

說明：在 Silverlight 中，您只能對值類型為 Double、Color或 Point 的屬性執(zhí)行簡單的動畫處理。此外，還可以使用 ObjectAnimationUsingKeyFrames 對其他類型的屬性進(jìn)行動畫處理，但是這需要使用離散內(nèi)插（從一個(gè)值跳到另一個(gè)值），而多數(shù)人認(rèn)為這不是真正的動畫。

---

2、Animation示例：頁面內(nèi)物件淡入淡出效果
本示例使用 DoubleAnimation（一種生成 Double 值的動畫類型）對 Rectangle 的 Opacity 屬性進(jìn)行動畫處理。因此，Rectangle 將逐漸進(jìn)入視野并逐漸從視野中消失。
【1】創(chuàng)建一個(gè) Rectangle 元素：
<StackPanel> <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> </StackPanel>
【2】創(chuàng)建 DoubleAnimation：
由于 Opacity 屬性的類型是 Double，因此需要一個(gè)生成 Double 值的動畫。DoubleAnimation 就是這樣一種動畫；它可以創(chuàng)建兩個(gè) Double 值之間的過渡。若要指定 DoubleAnimation 的起始值，可設(shè)置其 From 屬性。若要指定其終止值，可設(shè)置其 To 屬性。
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"/>其中，Duration是指從其起始值過渡為目標(biāo)值所需的時(shí)間。AutoReverse說明動畫會重復(fù)運(yùn)行，而RepeatBehavior則指明了這個(gè)動畫會無限期的重復(fù)下去。

【3】創(chuàng)建 Storyboard 對象：
<Storyboard> <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard>上面的代碼創(chuàng)建了一個(gè)Storyboard并把動畫放置入內(nèi)。而后要使用 TargetName 附加屬性指定要進(jìn)行動畫處理的對象。在下面的代碼中，為 DoubleAnimation 指定了一個(gè)目標(biāo)名稱 myAnimatedRectangle，這是要進(jìn)行動畫處理的對象的名稱。
<Storyboard> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard>最后使用 TargetProperty 附加屬性指定要進(jìn)行動畫處理的屬性。在下面的代碼中，動畫被配置為面向 Rectangle 的 Opacity 屬性。
<Storyboard> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard>
【4】將Storyboard與事件相關(guān)聯(lián)
接下來您需要指定何時(shí)開始播放動畫。可以使用事件執(zhí)行此操作。
1.將演示圖板作為一種資源。將 Storyboard 放入一個(gè)資源塊內(nèi)，以便您能夠輕松地自代碼引用該 Storyboard，以執(zhí)行開始、停止、暫停和繼續(xù)等操作。下面的標(biāo)記顯示 StackPanel 對象資源塊中聲明的 Storyboard。請注意，您可以在任意資源塊中聲明 Storyboard，只要該資源塊與您希望進(jìn)行動畫處理的對象位于同一個(gè)作用域中。如下面的代碼：
<StackPanel> <StackPanel.Resources> <!-- Animates the rectangle's opacity. --> <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </StackPanel.Resources> <Rectangle x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> </StackPanel>2.將事件附加到某一元素。您可以使用多種事件來啟動動畫，包括鼠標(biāo)相關(guān)事件，如在用戶單擊某一對象時(shí)引發(fā)的 MouseLeftButtonDown，或是在首次加載對象時(shí)引發(fā)的 Loaded 事件。有關(guān)事件的更多信息，請參見 Silverlight 的事件概述。在本示例中，MouseLeftButtonDown 事件附加到 Rectangle，這樣用戶單擊矩形時(shí)將引發(fā)該事件。
<Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" />3.從事件處理程序控制動畫。 Storyboard 提供多種方法，這些方法允許您控制 Storyboard 動畫的播放，包括 Begin、Stop、Pause 和 Resume。本示例使用 Begin 方法，該方法在用戶單擊矩形并引發(fā) MouseLeftButtonDown 事件時(shí)啟動動畫。
// When the user clicks the Rectangle, the animation begins. private void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); }
【5】最后是完整的運(yùn)行代碼：
<UserControl x:Class="animation_ovw_intro.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <StackPanel> <StackPanel.Resources> <!-- Animates the rectangle's opacity. --> <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </StackPanel.Resources> <TextBlock Margin="10">Click on the rectangle to start the animation.</TextBlock> <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> </StackPanel> </UserControl> //后臺代碼 private void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); }

參考資料：MSDN

轉(zhuǎn)載于:https://www.cnblogs.com/wpdev/archive/2011/03/27/1997257.html

總結(jié)

以上是生活随笔為你收集整理的一步一步学动画[1]：Silverlight中Animation的应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。