使用silverlight中的Storyboard實現動畫效果

在silverlight中，可使用StoryBoard（故事板）不實現相似於動畫的效果，本文就是藉助該
對象來實現一個相冊顯示的例子，其運行效果以下圖所示（鼠標放在中間圖片上，而後離開）：
 
     在正文開始以後，先介紹一下Storyboard, 其定義以下:
     Controls animations with a timeline, and provides object and property targeting
information for its child animations.

     由於它用時間線（timeline）來控制，並提供了要綁定的對象和目標屬性信息。其在XAML中的
格式以下：

< Storyboard    >
    oneOrMoreChildTimelines
</ Storyboard >

  
    其中的oneOrMoreChildTimelines能夠是以下任一或多個對象元素：
   
    Storyboard, ColorAnimation, ColorAnimationUsingKeyFrames, DoubleAnimation,
    DoubleAnimationUsingKeyFrames, PointAnimation, PointAnimationUsingKeyFrames
   
    下面就其中幾個主要的元素做以下演示說明，首先請看「DoubleAnimation」：
   
    DoubleAnimation：當動畫值的變化（FROM ...TO...）類型是 Double型時使用。
   
    下面演示的就是矩形（MyAnimatedRectangle）的「Opacity」（透明度）屬性在一秒內從1到0
的動畫（參數說明見註釋）。
   

< StackPanel >
        < StackPanel.Resources >
       <!-- 將Storyboard 放入Resources中是爲了更方便的在代碼中引用 Storyboard 以及進行互操做，如
start, stop, pause,和恢復Storyboard.  -->
            < 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 >
        <!-- 參數說明：
           Storyboard.TargetName:附加屬性操做到指定的對象上;
           Storyboard.TargetProperty:要操做指定對象的屬性;
           From..To :上述屬性值的起始範圍;
           Duration: 在多少時間內完成上述屬性值的變化;
           AutoReverse:是否在vanishes 以後 fade back 到初始狀態;
           RepeatBehavior:指示當前animation 不斷反覆
        -->

        < Rectangle  MouseLeftButtonDown ="Mouse_Clicked"
   x:Name ="MyAnimatedRectangle"
   Width ="100"  Height ="100"  Fill ="Blue"   />
</ StackPanel >

    ColorAnimation：當動畫值的變化（FROM ...TO...）類型是 Color型時使用。
   
    下面演示的是myStackPanel背景色在4秒內從紅到綠的動畫。

< StackPanel  x:Name ="myStackPanel"  Background ="Red"  Grid.Row ="0"
        Loaded ="Start_Animation" >
     < TextBlock  Foreground ="White" > 使用層級方式綁定TargetProperty： </ TextBlock >
     < StackPanel.Resources >
         < Storyboard  x:Name ="colorStoryboard" >
             < ColorAnimation  BeginTime ="00:00:00"  Storyboard.TargetName ="myStackPanel"
        Storyboard.TargetProperty ="(Panel.Background).(SolidColorBrush.Color)"
        From ="Red"  To ="Green"  Duration ="0:0:4"   />
         </ Storyboard >
     </ StackPanel.Resources >
</ StackPanel >

       
    下面XAML代碼與上面所示的實現效果相同：
   

< StackPanel  Loaded ="Start_Animation" >
      < TextBlock  Foreground ="White" > 普通方式綁定TargetProperty： </ TextBlock >
      < StackPanel.Resources >
          < Storyboard  x:Name ="colorStoryboard2" >
              < ColorAnimation  BeginTime ="00:00:00"  Storyboard.TargetName ="mySolidColorBrush"
    Storyboard.TargetProperty ="Color"  From ="AliceBlue"  To ="Green"  Duration ="0:0:4"  FillBehavior ="Stop" />
          </ Storyboard >
      </ StackPanel.Resources >
      < StackPanel.Background >
          < SolidColorBrush  x:Name ="mySolidColorBrush"  Color ="AliceBlue"   />
      </ StackPanel.Background >
</ StackPanel >  

 
    接下來是PointAnimation:  當動畫值的變化（FROM ...TO...）類型是 Point型時使用。
   
    下面的XAML演示的是EllipseGeometry對象從point(20,200)移動到point(400,100)的動畫。
   

< PointAnimation  Storyboard.TargetProperty ="Center"
  Storyboard.TargetName ="MyAnimatedEllipseGeometry"
  Duration ="0:0:5"
  From ="20,200"
  To ="400,100"
  RepeatBehavior ="Forever"   />

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

       
     好了，有了上面的介紹以後，咱們下面着手開發這個DEMO。

     首先咱們創建一個silverlight application,並將其命名爲：Animation_Sample。
   
     而後咱們要去找幾張相冊用的圖片，將其放在項目中的resource文件夾下，並將其設置爲資源，
以下圖所示：
               

    而後在xaml中加入以下代碼段做爲Image元素對相應圖片的引用：
   

< Grid  x:Name ="LayoutRoot"  Background ="White"  MouseEnter ="LayoutRoot_MouseEnter"
    MouseLeave ="LayoutRoot_MouseLeave" >   
     < Image  x:Name ="p_w_picpath_one"  Source ="resource/img_one.jpg"  Height ="40"  Width ="400"  Canvas.Left ="30"
         Canvas.Top ="30"  Margin ="12,0,0,0" ></ Image >
     < Image  x:Name ="p_w_picpath_two"  Source ="resource/img_two.jpg"  Height ="40"  Width ="400"  Canvas.Left ="30"
         Canvas.Top ="30"  Margin ="12,0,0,0" ></ Image >
     < Image  x:Name ="img_three"  Source ="resource/img_three.jpg"  Height ="40"  Width ="400"  Canvas.Left ="30"
         Canvas.Top ="30"  Margin ="12,0,0,0" ></ Image >
     < Image  x:Name ="img_four"  Source ="resource/img_four.jpg"  Height ="40"  Width ="400"  Canvas.Left ="30"
         Canvas.Top ="30"  Margin ="12,0,0,0" ></ Image >
     < Image  x:Name ="img_five"  Source ="resource/img_five.jpg"  Height ="40"  Width ="400"  Canvas.Left ="30"
        Canvas.Top ="30"  Margin ="12,0,0,0" ></ Image >
</ Grid >

    而後在該xaml文件上擊鼠標右鍵，選擇"在 Expression Blend 中打開"菜單項，而後在打開的Blend 窗口中
按下圖中所指示的方式來建立一個Storyboard，名爲：p_w_picpath1Storyboard .



    接着拖動當前幀到2秒處，執行「record keyframe」操做：




    而後對左側的圖片進行"rotate transfer"和"scale transfer"操做，以下圖：




      而其最終的值以下圖所示：

     
 
 
     這裏咱們能夠經過下圖所示演示一下當前圖片從0秒到2秒的運行狀況：


 
 
     同理對其它圖片進行相相似的操做後，就能夠將當前文件進行保存，並單擊F5進行試運行了。接着，咱們還要
再切換回VS完成動畫播放的工做。在本DEMO中，由於使用了鼠標移入移出方式來實現動畫的播聽任務。因此咱們
要在相應的xaml.cs文件中加入storyboard的"Begin()"方法綁定以下：

private   void  LayoutRoot_MouseEnter( object  sender, MouseEventArgs e)
{
    p_w_picpath1Storyboard.Begin();
}

   
     這樣就能夠運行該DEMO了。
 
 
     到這裏，咱們只是實現了將圖片從初始位置移動到指定位置。而沒有實現reverse操做，即圖片從分散展現狀態
再回到實始狀態。但實現這個功能也很是簡單，主要是用了一個小技巧：

     1.首先咱們要對當前的storyboard執行復制操做，以下圖：

    
 
     2. 而後在新生成的storyboard中修改其名稱，並對其進行reverse操做，以下圖：

    
 
 
     這樣咱們就獲得了一個對展開的「逆操做」的storyboard.而後咱們在xaml.cs中調用這個storyboard的
Begin()方法便可，以下：

private   void  LayoutRoot_MouseLeave( object  sender, MouseEventArgs e)
{
    p_w_picpath1Storyboard_Reverse.Begin();
}

     經過Blend工具，咱們很是輕鬆的實現了展現效果，這遠比在XAML中手寫代碼要來得「簡單正確」。
 
     好了，今天的內容就到這裏了。
 
     ×××連接，請點擊這裏：）

Tag標籤: js, daizhj, 代震軍, silverlight, animation