Silverlight StoryBorad-動畫基礎概述

在 Silverlight 中，動畫可以通過添加移動和互動性來增強圖形的建立效果,當然這也是本着Silverlight的設計的初衷而來的.動畫本身就是快速播放一系列圖像. Silverlight 中，通過對對象的個别屬性應用動畫，可以對對象進行動畫處理. 例如上例中右邊對圖檔Image漸變屬性Opacity簡單動畫效果. 來快速實作一下:

<1>:建立StoryBorad:

<Grid x:Name="LayoutRoot" Background="White">  

         <Grid.Resources>  

             <Storyboard x:Name="myfirststory" BeginTime="0:0:2" >  

                 <!--對左邊圖檔透明度進行縮放-->  

                 <DoubleAnimation From="1.0"  To="0" Storyboard.TargetName="leilei" Storyboard.TargetProperty="Opacity" x:Name="firtaum"   

                                      Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever" >  

                 </DoubleAnimation>        

             </Storyboard>  

         </Grid.Resources>  

  </Grid> 

 為什麼要用DoubleAnimation ? 在Silverlight中動畫對屬性值的動畫控制分為幾個類型. 其中對值類型為Double屬性進行簡單動畫處理需要DoubleAnimation  例如圖檔Image透明度屬性Opacity.

From="1.0"  To="0" 

Storyboard.TargetName="leilei" Storyboard.TargetProperty="Opacity" 

利用StroyBorad.TargetName屬性綁定具體動畫控制對象. TargetProperty則綁定控制對象具體控制屬性.

Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever" 

Duration屬性擷取或設定此時間線播放的時間長度，而不是計數重複, 時間長度格式同 "小時:分鐘:秒數", 如上Duration="0:0:4"動畫時間為4秒鐘時間.

AutoReverse屬性訓示時間線在完成向前疊代後是否按相反的順序播放, 簡單的說就是控制動畫是否循環播放.

如上既是定義一個簡單的DoubleAnimation 控制Double值StoryBoard. 在StoryBorad可以控制UIElelment屬性還有ColorAnimation和PointAnimation. 四者之間關系如下圖:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/161113720.png"></a>

&lt;2&gt;StoryBorad動起來.

建立完成StoryBorad動畫後 可以通過事件進行關聯.讓動畫動起來. Button按鈕背景事件中:

myfirststory.Begin();//啟動動畫 

相關關于StoryBorad暫停,停止,繼續播放調用分别對應如下:

myfirststory.Pause();//暫停  

myfirststory.Stop();//停止  

processborad.Resume();//動畫繼續 

這樣就能簡單控制動畫整個流程.

&lt;3&gt;StoryBorad控制動畫運動時間

在控制StoryBorad控制時間前先看一個關于一個簡單DoubleAnimation 控制三條Line執行個體:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/161118468.jpg"></a>

頁面建立不同顔色的線: 紅,藍,黑 三條. 利用DoubleAnmation控制它與Canvas.Top距離來實作動态三個不同方位動态移動.實作頁面Xaml:

      &lt;Border BorderThickness="1" BorderBrush="Red"&gt;  

        &lt;Canvas VerticalAlignment="Center" HorizontalAlignment="Center"&gt;  

            &lt;Canvas.Triggers&gt;  

                &lt;EventTrigger RoutedEvent="Canvas.Loaded" &gt;  

                    &lt;EventTrigger.Actions&gt;  

                        &lt;BeginStoryboard&gt;  

                            &lt;Storyboard x:Name="animation" Storyboard.TargetName="Horizontal1" Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever"&gt;  

                                &lt;DoubleAnimation To="100" Duration="0:0:10" /&gt;  

                                &lt;DoubleAnimation Storyboard.TargetName="Horizontal2" Storyboard.TargetProperty="(Canvas.Top)" To="99" Duration="0:0:10" /&gt;  

                                &lt;DoubleAnimation Storyboard.TargetName="Vertical" To="299" Duration="0:0:10" /&gt;  

                            &lt;/Storyboard&gt;  

                        &lt;/BeginStoryboard&gt;  

                    &lt;/EventTrigger.Actions&gt;  

                &lt;/EventTrigger&gt;  

            &lt;/Canvas.Triggers&gt;  

            &lt;!--定義三條線來控制--&gt;  

            &lt;Line x:Name="Horizontal1" X1="1" Y1="1" X2="300" Y2="1" Stroke="#000000" StrokeThickness="1"/&gt;  

            &lt;Line x:Name="Horizontal2" X1="1" Y1="1" X2="300" Y2="1" Stroke="#CC0000" StrokeThickness="1"/&gt;  

            &lt;Line x:Name="Vertical" X1="1" Y1="1" X2="1" Y2="100" Stroke="#0000CC" StrokeThickness="1"/&gt;  

        &lt;/Canvas&gt;  

      &lt;/Border&gt;  

    &lt;/Grid&gt; 

如果我現在改變需求,定義三條線運動時間順序, 紅線先走, 黑線次之, 藍線最後. 如何定義？ 這就涉及到動畫運動時間定義.這就讓我想起了TimeLine中BegainTime屬性來控制.而StoryBorad中三個常用動畫控制Double/Color/Point都繼承于TimeLine, 這就為動畫運動時間控制創造可能.可以設定:

&lt;Storyboard BeginTime="0:0:2"&gt;&lt;/Storyboard&gt; 

設定StoryBorad是對整個動畫開始時間進行延緩 如上延緩為2秒鐘. 值得注意的是動畫控制時間格式為"0:0:2", 對應為"小時:分鐘:秒數". 現在控制三條線運動順序.為了明顯看出效果設定間隔事件為3秒. 設定如下:

&lt;DoubleAnimation To="100" Duration="0:0:10" BeginTime="0:0:3" /&gt;  

&lt;DoubleAnimation Storyboard.TargetName="Horizontal2" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:10" To="99"  BeginTime="0:0:3" /&gt;  

&lt;DoubleAnimation Storyboard.TargetName="Vertical" To="299" Duration="0:0:10" BeginTime="0:0:3" /&gt; 

運作效果:

紅線在程式開始後第5秒開始向下滾動. 其中StoryBorad包含兩秒延緩時間

藍線在第8秒開始向右滾動.

紅線在第11秒開始向左滾動.

&lt;4&gt;StoryBorad顯示方位控制[silverlight 3D效果]

 有時需要對動畫頁面中對應的UIElement方位進行一定變動. 其實這就涉及到Silverlight 支援的3D效果.3D 支援已經Silverlight 4中得到極大改觀. 目前也出了不少基于Silverlight 3D 一些XGA LineGame等等.  利用Silverlight 對一個Image實作3D控制:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/161124773.jpg"></a>

 頁面XAML:

         &lt;Grid.RowDefinitions&gt;  

             &lt;RowDefinition Height="Auto"&gt;&lt;/RowDefinition&gt;  

             &lt;RowDefinition Height="198*" /&gt;  

         &lt;/Grid.RowDefinitions&gt;  

         &lt;Grid.ColumnDefinitions&gt;  

             &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;  

             &lt;ColumnDefinition Width="498*" /&gt;  

         &lt;/Grid.ColumnDefinitions&gt;  

         &lt;Border Grid.Row="0" Grid.Column="0"  BorderThickness="1" BorderBrush="Red" VerticalAlignment="Stretch" HorizontalAlignment="Left"&gt;  

             &lt;Image Source="/TestSilverlightStoryBoradDemo;component/Image/leiqueen.jpg" Width="500" Height="400" &gt;  

                 &lt;Image.Projection&gt;  

                     &lt;PlaneProjection x:Name="imgplane" RotationX="-45" RotationY="45" RotationZ="45" &gt;&lt;/PlaneProjection&gt;  

                 &lt;/Image.Projection&gt;  

             &lt;/Image&gt;  

         &lt;/Border&gt;  

         &lt;Canvas Grid.Row="0" Grid.Column="1"&gt;  

              &lt;TextBlock Text="Relation-Z:" Canvas.Top="25" Canvas.Left="20"  /&gt;  

              &lt;Slider Width="302" x:Name="firstlid" Canvas.Left="85" Maximum="1000" Minimum="-1000" Canvas.Top="25" ValueChanged="firstlid_ValueChanged" /&gt;  

             &lt;TextBlock x:Name="firtlibtxt"  Canvas.Top="25" Canvas.Left="425"&gt;&lt;/TextBlock&gt;  

             &lt;TextBlock Text="Relation-X:" Canvas.Top="70" Canvas.Left="20"&gt;&lt;/TextBlock&gt;  

             &lt;Slider Width="302" Canvas.Left="85" x:Name="secondlib" Maximum="1000" Minimum="-1000" Canvas.Top="70" ValueChanged="secondlib_ValueChanged" /&gt;  

             &lt;TextBlock x:Name="secondlibtxt"  Canvas.Top="75" Canvas.Left="425"&gt;&lt;/TextBlock&gt;  

             &lt;TextBlock Text="Relation-Y:" Canvas.Top="110" Canvas.Left="20"&gt;&lt;/TextBlock&gt;  

             &lt;Slider Width="302" Canvas.Left="85" x:Name="threelib" Maximum="1000" Minimum="-1000" Canvas.Top="110" ValueChanged="threelib_ValueChanged" /&gt;  

             &lt;TextBlock x:Name="threelibtxt"  Canvas.Top="110" Canvas.Left="425"&gt;&lt;/TextBlock&gt;  

             &lt;TextBlock Text="CenterOfRotation-X:" Canvas.Top="140" Canvas.Left="0"  Visibility="Collapsed"&gt;&lt;/TextBlock&gt;  

             &lt;Slider Width="302" x:Name="centerRotx" Maximum="1000" Minimum="-1000" Visibility="Collapsed" Canvas.Top="140" Canvas.Left="110" ValueChanged="centerRotx_ValueChanged" /&gt;  

             &lt;TextBlock x:Name="centerRotxtxt"  Canvas.Top="140" Canvas.Left="425" Visibility="Collapsed"&gt;&lt;/TextBlock&gt;  

         &lt;/Canvas&gt;  

     &lt;/Grid&gt; 

<a target="_blank" href="http://blog.51cto.com/attachment/201201/161133833.jpg"></a>

UIElement中LocalOffSet- X/Y/Z屬性擷取或設定沿對象平面的 X /Y/Z軸平移對象的距離, 【注意:對象是平面, 位移方式: 平移】

Globalset-X/Y/Z屬性擷取或設定沿螢幕的 X/Y/Z 軸平移對象的距離 【注意: 針對的是螢幕的平移】

CenterRelation-X/Y/Z屬性擷取或設定所旋轉對象的旋轉中心 X 坐标 【針對的是旋轉中心控制.】 

本篇都是一些非常基礎的涉及到Silverlight StoryBorad應用. 主要針對初學者 高手飄過.如有任何疑問 請在留言中回複我.

Silverlight StoryBorad Dome源碼下載下傳

本文轉自chenkaiunion 51CTO部落格，原文連結:http://blog.51cto.com/chenkai/764822