Silverlight學(xué)習(xí)之動(dòng)畫

1、在Silverlight中，動(dòng)畫可以通過添加移動(dòng)和交互性來增加圖形的創(chuàng)建效果。通過對(duì)背景色進(jìn)行動(dòng)畫處理或應(yīng)用動(dòng)畫Transform,我們可以創(chuàng)造出生動(dòng)的屏幕過渡效果或提供有幫助的視覺提示。l 動(dòng)畫簡(jiǎn)介：動(dòng)畫是快速播放一系列圖像(其中每個(gè)圖像與下一個(gè)圖像略微不同)給人造成的一種幻覺。大腦感覺這組圖像是一個(gè)變化的場(chǎng)景。在電影中，攝像機(jī)每秒鐘拍攝許多照片(幀) ），便可使人形成這種幻覺。用投影儀播放這些幀時(shí)，觀眾便可以看電影了。在 Silverlight 中，通過對(duì)對(duì)象的個(gè)別屬性應(yīng)用動(dòng)畫，可以對(duì)對(duì)象進(jìn)行動(dòng)畫處理。例如，若要使 UIElement 增大，需對(duì)其 Width 和 Height 屬性進(jìn)行動(dòng)

2、畫處理。若要使 UIElement 逐漸從視野中消失，可以對(duì)其 Opacity 屬性進(jìn)行動(dòng)畫處理。可以對(duì) Silverlight 中許多對(duì)象的屬性進(jìn)行動(dòng)畫處理。注意：在Silverlight中,我們只能對(duì)值類型為Double、Color或Point的屬性執(zhí)行簡(jiǎn)單的動(dòng)畫處理。此外，還可以使用 ObjectAnimationUsingKeyFrames 對(duì)其他類型的屬性進(jìn)行動(dòng)畫處理，但是這需要使用離散內(nèi)插（從一個(gè)值跳到另一個(gè)值），而多數(shù)人認(rèn)為這不是真正的動(dòng)畫。l 使UIElement逐漸進(jìn)入視野并從視野中逐漸消失：來演示一個(gè)示例。這個(gè)例子演示如何使用 Silverlight 動(dòng)畫通過對(duì)屬性值進(jìn)行動(dòng)

3、畫處理，使 Rectangle 逐漸進(jìn)入視野并從視野中逐漸消失。本示例使用 DoubleAnimation（一種生成 Double 值的動(dòng)畫類型）對(duì) Rectangle 的 Opacity 屬性進(jìn)行動(dòng)畫處理。因此，Rectangle 將逐漸進(jìn)入視野并逐漸從視野中消失。示例第一部分在StackPanel中創(chuàng)建一個(gè)Rectangle元素。 <StackPanel> <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="1

4、00" Height="100" Fill="Blue" /> </StackPanel>如果要?jiǎng)?chuàng)建動(dòng)畫并將其應(yīng)用于矩形的Opacity屬性，請(qǐng)執(zhí)行以下操作：· 創(chuàng)建 DoubleAnimation· 創(chuàng)建 Storyboard· 開始 Storyboard 以響應(yīng)事件1.創(chuàng)建DoubleAnimation由于 Opacity 屬性的類型是 Double，因此需要一個(gè)生成 Double 值的動(dòng)畫。DoubleAnimation 就是這樣一種動(dòng)畫；它可以創(chuàng)建兩個(gè) Double 值之間的過渡。若要指定

5、 DoubleAnimation 的起始值，可設(shè)置其 From 屬性。若要指定其終止值，可設(shè)置其 To 屬性。1. 不透明度值 1.0 使對(duì)象完全不透明，不透明度值 0.0 使對(duì)象完全不可見。若要使動(dòng)畫的不透明度值從 1.0 過渡為 0.0，可以將其 From 屬性設(shè)置為 1.0，將其 To 屬性設(shè)置為 0.0。<DoubleAnimation From=”1.0” To=”0.0”/>2. 為該動(dòng)畫指定 Duration。動(dòng)畫的 Duration 屬性指定了從其起始值過渡為目標(biāo)值所需的時(shí)間。下面的示例將動(dòng)畫的持續(xù)時(shí)間設(shè)置為一秒鐘。<DoubleAnimation From=

6、"1.0" To="0.0" Duration="0:0:1" />3. 上面的示例創(chuàng)建了不透明度值從 1.0 向 0.0 過渡的動(dòng)畫，此過渡使目標(biāo)元素從完全不透明逐漸轉(zhuǎn)變?yōu)橥耆豢梢?。若要使元素在消失后再逐漸回到視野中，請(qǐng)將 AutoReverse 屬性設(shè)置為 true。若要使動(dòng)畫無限期地重復(fù)，請(qǐng)將其 RepeatBehavior 屬性設(shè)置為 Forever。<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1"

7、; AutoReverse="True" RepeatBehavior="Forever"/>2.創(chuàng)建Storyboard若要向?qū)ο髴?yīng)用動(dòng)畫，請(qǐng)創(chuàng)建 Storyboard 對(duì)象并使用 TargetName 和 TargetProperty 附加屬性指定要進(jìn)行動(dòng)畫處理的對(duì)象和屬性。1. 創(chuàng)建 Storyboard 并將動(dòng)畫添加為其子項(xiàng)。<Storyboard> <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" Aut

8、oReverse="True" RepeatBehavior="Forever" /></Storyboard>這里 Storyboard 僅包含一個(gè)動(dòng)畫，不過可以添加多個(gè)動(dòng)畫。2. 使用 TargetName 附加屬性指定要進(jìn)行動(dòng)畫處理的對(duì)象。在下面的代碼中，為 DoubleAnimation 指定了一個(gè)目標(biāo)名稱 myAnimatedRectangle，這是要進(jìn)行動(dòng)畫處理的對(duì)象的名稱。<Storyboard> <DoubleAnimation Storyboard.TargetName="MyAnimate

9、dRectangle" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /></Storyboard>3. 使用 TargetProperty 附加屬性指定要進(jìn)行動(dòng)畫處理的屬性。在下面的代碼中，動(dòng)畫被配置為面向 Rectangle 的 Opacity 屬性。<Storyboard> <DoubleAnimation Storyboard.

10、TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /></Storyboard> 3.將Storyboard與事件相關(guān)聯(lián)：我們?cè)谏厦嬉呀?jīng)指定了動(dòng)畫的目標(biāo)對(duì)象以及動(dòng)畫的行為方式；接下來我們需要指

11、定何時(shí)開始播放動(dòng)畫。可以使用事件執(zhí)行此操作。1. 將演示圖板(Storyboard)作為一種資源。將 Storyboard 放入一個(gè)資源塊內(nèi)，以便能夠輕松地自代碼引用該 Storyboard，以執(zhí)行開始、停止、暫停和繼續(xù)等操作。下面的標(biāo)記顯示 StackPanel 對(duì)象資源塊中聲明的 Storyboard。請(qǐng)注意，你可以在任意資源塊中聲明 Storyboard，只要該資源塊與你希望進(jìn)行動(dòng)畫處理的對(duì)象位于同一個(gè)作用域中。<StackPanel> <StackPanel.Resources> <!- Animates the rectangle's opaci

12、ty. -> <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Fo

13、rever" /> </Storyboard> </StackPanel.Resources> <Rectangle x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /></StackPanel>2. 將事件附加到某一元素。我們可以使用多種事件來啟動(dòng)動(dòng)畫，包括鼠標(biāo)相關(guān)事件，如在用戶單擊某一對(duì)象時(shí)引發(fā)的 MouseLeftButtonDown，或是在首次加載對(duì)象時(shí)引發(fā)的

14、Loaded 事件。在這里我們使用MouseLeftButtonDown 事件附加到 Rectangle，這樣用戶單擊矩形時(shí)將引發(fā)該事件。<Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" />3.從事件處理程序控制動(dòng)畫。Storyboard 提供多種方法，這些方法允許我們控制 Storyboard 動(dòng)畫的播放，

15、包括 Begin、Stop、Pause 和 Resume。本示例使用 Begin 方法，該方法在用戶單擊矩形并引發(fā) MouseLeftButtonDown 事件時(shí)啟動(dòng)動(dòng)畫。private void Mouse_Clicked(object sender, MouseEventArgs e) myStoryboard.Begin();開始、停止、暫停和繼續(xù)動(dòng)畫播放:上面的示例演示如何使用 Begin 方法啟動(dòng)動(dòng)畫；不過，Storyboard 還提供 Stop、Pause 和 Resume 方法，這些方法可用于控制動(dòng)畫。下面的示例提供一系列按鈕，這些按鈕允許用戶控制 Ellipse 在整個(gè)屏幕中的

16、動(dòng)畫播放。<UserControl x:Class="interactive_animation.Page" Width="400" Height="300"> <StackPanel> <TextBlock Margin="10" TextWrapping="Wrap">This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.</TextBl

17、ock> <Canvas> <Canvas.Resources> <Storyboard x:Name="myStoryboard"> <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:5" From="20,200" To="400,100" Rep

18、eatBehavior="Forever" /> </Storyboard> </Canvas.Resources> <Path Fill="Blue"> <Path.Data> <!- Describes an ellipse. -> <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="20,20" RadiusX="15" RadiusY="1

19、5" /> </Path.Data> </Path> <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265"> <!- Button that begins animation. -> <Button Click="Animation_Begin" Width="65" Height="30" Margin="2

20、" Content="Begin" /> <!- Button that pauses Animation. -> <Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" /> <!- Button that resumes Animation. -> <Button Click="Animation_

21、Resume" Width="65" Height="30" Margin="2" Content="Resume" /> <!- Button that stops Animation. Stopping the animation returns the ellipse to its original location. -> <Button Click="Animation_Stop" Width="65" Height="3

22、0" Margin="2" Content="Stop" /> </StackPanel> </Canvas> </StackPanel></UserControl>C#代碼： private void Animation_Begin(object sender, RoutedEventArgs e) myStoryboard.Begin(); private void Animation_Pause(object sender, RoutedEventArgs e) myStoryboar

23、d.Pause(); private void Animation_Resume(object sender, RoutedEventArgs e) myStoryboard.Resume(); private void Animation_Stop(object sender, RoutedEventArgs e) myStoryboard.Stop(); 控制動(dòng)畫的開始時(shí)間:Storyboard 以及所有其他動(dòng)畫對(duì)象（DoubleAnimation、DoubleAnimationUsingKeyFrames、ColorAnimation 等）從 Timeline 類繼承。Timeline

24、類授予很多有用的屬性給這些動(dòng)畫對(duì)象，其中包括 BeginTime 屬性。顧名思義，使用 BeginTime 屬性可以指定動(dòng)畫對(duì)象活動(dòng)開始點(diǎn)的時(shí)間。例如，可以對(duì) Storyboard 的 BeginTime 指定兩秒時(shí)間。當(dāng)使用 Begin 方法開始 Storyboard 時(shí)，Storyboard 將等待兩秒鐘，然后再開始。此外，可以指定 Storyboard 內(nèi)的動(dòng)畫對(duì)象的 BeginTime。例如，如果我們有一個(gè) BeginTime 為兩秒鐘的 Storyboard，此 Storyboard 包含兩個(gè) DoubleAnimation 對(duì)象（一個(gè)未指定 BeginTime，另一個(gè)的 Begin

25、Time 為三秒鐘），則第一個(gè) DoubleAnimation 將在對(duì) Storyboard 調(diào)用 Begin 方法之后的兩秒鐘啟動(dòng)，第二個(gè) DoubleAnimation 將在調(diào)用該方法之后的五秒鐘啟動(dòng)（Storyboard 的兩秒鐘延遲加上 DoubleAnimation 的三秒鐘延遲）。下面的示例顯示如何執(zhí)行此項(xiàng)操作。 <StackPanel> <StackPanel.Resources> <Storyboard BeginTime="0:0:2" x:Name="myStoryboard"> <Doubl

26、eAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Width" To="300" Duration="0:0:1" /> <DoubleAnimation BeginTime="0:0:3" Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opaci

27、ty" To="0" Duration="0:0:1" /> </Storyboard> </StackPanel.Resources> <Rectangle x:Name="MyAnimatedRectangle" Loaded="Start_Animation" Width="100" Height="100" Fill="Blue" /> </StackPanel> </Stack

28、Panel>C#: private void Start_Animation(object sender, EventArgs e) myStoryboard.Begin(); 可以考慮將 Storyboard 作為其他動(dòng)畫對(duì)象（例如 DoubleAnimation）以及其他 Storyboard 對(duì)象的容器。即可以在 Storyboard 對(duì)象中嵌套該對(duì)象并分別為每個(gè) Storyboard 指定 BeginTime 值。使用嵌套的演示圖板可幫助我們安排精心設(shè)計(jì)的動(dòng)畫序列。每個(gè)子 Storyboard 都會(huì)在其父 Storyboard 開始前等待，然后在再次開始前開始倒計(jì)時(shí)。在程序代碼中

29、創(chuàng)建動(dòng)畫除了使用 XAML，也可以完全在程序代碼（如 C# 或 Visual Basic）中創(chuàng)建動(dòng)畫。下面的示例演示如何創(chuàng)建一個(gè)動(dòng)畫，在其中用動(dòng)畫播放 Rectangle 的 Canvas.:.Top 和 Canvas.:.Left 附加屬性。 private void Create_And_Run_Animation(object sender, EventArgs e) Rectangle myRectangle = new Rectangle(); myRectangle.Width = 200; myRectangle.Height = 200; Color myColor = Col

30、or.FromArgb(255, 255, 0, 0); SolidColorBrush myBrush = new SolidColorBrush(); myBrush.Color = myColor; myRectangle.Fill = myBrush; Duration duration = new Duration(TimeSpan.FromSeconds(2); DoubleAnimation myDoubleAnimation1 = new DoubleAnimation(); DoubleAnimation myDoubleAnimation2 = new DoubleAnim

31、ation(); myDoubleAnimation1.Duration = duration; myDoubleAnimation2.Duration = duration; Storyboard sb = new Storyboard(); sb.Duration = duration; Storyboard.SetTarget(myDoubleAnimation1, myRectangle); Storyboard.SetTarget(myDoubleAnimation2, myRectangle); Storyboard.SetTargetProperty(myDoubleAnimat

32、ion1, new PropertyPath("(Canvas.Left)"); Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"); myDoubleAnimation1.To = 200; myDoubleAnimation2.To = 200;"unique_id", sb); sb.Begin(); 注意：不要在頁(yè)面的構(gòu)造函數(shù)中調(diào)用 Storyboard 方法，如 Begin。這將導(dǎo)致動(dòng)畫失敗，且無任何提示。來說一說

33、動(dòng)畫類型：除了我們上面使用的DoubleAnimation類型，Silverlight 還提供其他幾種動(dòng)畫對(duì)象。由于動(dòng)畫生成屬性值，因此對(duì)于不同的屬性類型，會(huì)有不同的動(dòng)畫類型。若要對(duì)采用 Double 值的屬性（例如元素的 Width 屬性）進(jìn)行動(dòng)畫處理，請(qǐng)使用生成 Double 值（DoubleAnimation）的動(dòng)畫。若要對(duì)采用 Point 值的屬性進(jìn)行動(dòng)畫處理，請(qǐng)使用生成 Point 值（如 PointAnimation 等）的動(dòng)畫。Silverlight提供兩大類動(dòng)畫類型，F(xiàn)rom/To/By 動(dòng)畫和關(guān)鍵幀動(dòng)畫。類別說明命名約定From/To/By 動(dòng)畫在起始值和結(jié)束值之間進(jìn)行動(dòng)畫處

34、理：u 若要指定起始值，請(qǐng)?jiān)O(shè)置動(dòng)畫的 From 屬性。u 若要指定結(jié)束值，請(qǐng)?jiān)O(shè)置動(dòng)畫的 To 屬性。u 若要指定相對(duì)于起始值的結(jié)束值，請(qǐng)?jiān)O(shè)置動(dòng)畫的 By 屬性（而不是 To 屬性）。上面的例子中使用這些動(dòng)畫，因?yàn)檫@些動(dòng)畫最容易實(shí)現(xiàn)。typeAnimation關(guān)鍵幀動(dòng)畫在使用關(guān)鍵幀對(duì)象指定的一系列值之間播放動(dòng)畫。關(guān)鍵幀動(dòng)畫的功能比 From/To/By 動(dòng)畫的功能更強(qiáng)大，因?yàn)槲覀兛梢灾付ㄈ我舛鄠€(gè)目標(biāo)值，甚至可以控制它們的插值方法。typeAnimationUsingKeyFrames列出一些常用動(dòng)畫類型以及這些類型一直使用的一些屬性。屬性類型對(duì)應(yīng)的基本 (From/To/By) 動(dòng)畫對(duì)應(yīng)的關(guān)鍵幀

35、動(dòng)畫用法示例ColorColorAnimationColorAnimationUsingKeyFrames對(duì) SolidColorBrush 或 GradientStop 的 Color 進(jìn)行動(dòng)畫處理。DoubleDoubleAnimationDoubleAnimationUsingKeyFrames對(duì) Rectangle 的 Width 或 Ellipse 的 Height（或任意 FrameworkElement）進(jìn)行動(dòng)畫處理。PointPointAnimationPointAnimationUsingKeyFrames對(duì) EllipseGeometry 的 Center 位置進(jìn)行動(dòng)畫處理

36、。Object無ObjectAnimationUsingKeyFrames對(duì) Fill 屬性進(jìn)行動(dòng)畫處理，使其在不同的 GradientBrush 之間進(jìn)行轉(zhuǎn)換。動(dòng)畫是時(shí)間線：所有動(dòng)畫均繼承自Timeline對(duì)象，因此所有動(dòng)畫都是專用類型的時(shí)間線。Timeline 定義時(shí)間段。我們可以指定時(shí)間線的以下"計(jì)時(shí)行為"：其 Duration 和重復(fù)次數(shù)，甚至可以為時(shí)間線指定時(shí)間走得多快。因?yàn)閯?dòng)畫是 Timeline，所以它還表示一個(gè)時(shí)間段。在動(dòng)畫的指定時(shí)間段（即 Duration）內(nèi)運(yùn)行動(dòng)畫時(shí)，動(dòng)畫會(huì)計(jì)算輸出值。在運(yùn)行或"播放"動(dòng)畫時(shí)，動(dòng)畫將更新與其關(guān)聯(lián)的屬性

37、。Duration、AutoReverse 和 RepeatBehavior 是三個(gè)常用的計(jì)時(shí)屬性。Duration 屬性時(shí)間線（以及繼承自時(shí)間線的動(dòng)畫）表示一個(gè)時(shí)間段。該時(shí)間段的長(zhǎng)度由時(shí)間線的 Duration 屬性（通常用 TimeSpan 值指定）來決定。當(dāng)時(shí)間線達(dá)到其持續(xù)時(shí)間的終點(diǎn)時(shí)，表示時(shí)間線完成了一次重復(fù)。動(dòng)畫使用其 Duration 屬性來確定其當(dāng)前值。如果沒有為動(dòng)畫指定 Duration 值，它將使用默認(rèn)值（1 秒）。下面的語(yǔ)法顯示了 Duration 屬性 (Property) 的 XAML 屬性 (Attribute) 語(yǔ)法的簡(jiǎn)化版本。小時(shí) : 分鐘 : 秒下表顯示了一些

38、Duration 設(shè)置及其結(jié)果值。設(shè)置所得值0:0:5.55.5 秒。0:30:5.530 分 5.5 秒。1:30:5.51 小時(shí) 30 分 5.5 秒。AutoReverse 屬性AutoReverse 屬性指定時(shí)間線在到達(dá)其 Duration 的終點(diǎn)后是否倒退。如果將此動(dòng)畫屬性設(shè)置為 true，則動(dòng)畫在到達(dá)其 Duration 的終點(diǎn)后將倒退，即從其終止值向其起始值反向播放。默認(rèn)情況下，該屬性為 false。RepeatBehavior 屬性RepeatBehavior 屬性指定時(shí)間線的播放次數(shù)。默認(rèn)情況下，時(shí)間線的重復(fù)次數(shù)為 1.0，即播放一次時(shí)間線，不進(jìn)行重復(fù)。對(duì)屬性應(yīng)用動(dòng)畫:Sto

39、ryboard 對(duì)象提供了對(duì)屬性應(yīng)用動(dòng)畫的一種方法。Storyboard 是一個(gè)為其所包含的動(dòng)畫提供目標(biāo)信息的容器時(shí)間線。Storyboard 類提供 TargetName 和 TargetProperty 附加屬性。通過在動(dòng)畫上設(shè)置這些屬性，我們將告訴動(dòng)畫對(duì)哪些內(nèi)容進(jìn)行動(dòng)畫處理。不過，在動(dòng)畫以對(duì)象作為處理目標(biāo)之前，必須使用 x:Name 屬性為該對(duì)象提供一個(gè)名稱，否則必須間接以屬性作為目標(biāo)。下面的示例演示如何間接以屬性作為目標(biāo)。 <StackPanel x:Name="myStackPanel" Background="Red" Loaded="Start_Animation"> <StackPanel.Resources> <Storyboard x:Name="colorStoryboard"> <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="myStackPanel" St