使用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（透明度）屬性在一秒內從到的動畫（參數說明見注釋）          <StackPanel>
               <StackPanelResources>
              <!將Storyboard 放入Resources中是為了更方便的在代碼中引用 Storyboard 以及進行互操作如
        start stop pause和恢復Storyboard >
                   <Storyboard x:Name=myStoryboard>
                       <DoubleAnimation
                          StoryboardTargetName=MyAnimatedRectangle
                    StoryboardTargetProperty=Opacity
                    From=
                    To=
                    Duration=::
                    AutoReverse=True
                    RepeatBehavior=Forever />
                   </Storyboard>
               </StackPanelResources>
               <!參數說明
                   StoryboardTargetName:附加屬性操作到指定的對象上;
                   StoryboardTargetProperty:要操作指定對象的屬性;
                   FromTo :上述屬性值的起始范圍;
                   Duration: 在多少時間內完成上述屬性值的變化;
                   AutoReverse:是否在vanishes 之後 fade back 到初始狀態;
                   RepeatBehavior:指示當前animation 不斷反復
               >
               <Rectangle MouseLeftButtonDown=Mouse_Clicked
           x:Name=MyAnimatedRectangle
           Width= Height= Fill=Blue />
        </StackPanel>

　　ColorAnimation當動畫值的變化（FROM TO）類型是 Color型時使用

　　下面演示的是myStackPanel背景色在秒內從紅到綠的動畫          <StackPanel x:Name=myStackPanel Background=Red GridRow=
                Loaded=Start_Animation>
            <TextBlock Foreground=White>使用層級方式綁定TargetProperty</TextBlock>
            <StackPanelResources>
                <Storyboard x:Name=colorStoryboard>
                    <ColorAnimation BeginTime=:: StoryboardTargetName=myStackPanel
                StoryboardTargetProperty=(PanelBackground)(SolidColorBrushColor)
                From=Red To=Green Duration=:: />
                </Storyboard>
            </StackPanelResources>
        </StackPanel>

　　下面XAML代碼與上面所示的實現效果相同          <StackPanel Loaded=Start_Animation>
             <TextBlock Foreground=White>普通方式綁定TargetProperty</TextBlock>
             <StackPanelResources>
                 <Storyboard x:Name=colorStoryboard>
                     <ColorAnimation BeginTime=:: StoryboardTargetName=mySolidColorBrush
            StoryboardTargetProperty=Color From=AliceBlue To=Green Duration=:: FillBehavior=Stop/>
                 </Storyboard>
             </StackPanelResources>
             <StackPanelBackground>
                 <SolidColorBrush x:Name=mySolidColorBrush Color=AliceBlue />
             </StackPanelBackground>
        </StackPanel>

　　接下來是PointAnimation:  當動畫值的變化（FROM TO）類型是 Point型時使用

　　下面的XAML演示的是EllipseGeometry對象從point()移動到point()的動畫          <PointAnimation StoryboardTargetProperty=Center
          StoryboardTargetName=MyAnimatedEllipseGeometry
          Duration=::
          From=
          To=
          RepeatBehavior=Forever />
               </Storyboard>
           </CanvasResources>
        <Path Fill=Blue>
               <PathData>
                   <! Describes an ellipse >
                   <EllipseGeometry x:Name=MyAnimatedEllipseGeometry
          Center= RadiusX= RadiusY= />
               </PathData>
        </Path>

　　好了有了上面的介紹之後我們下面著手開發這個DEMO

　　首先我們建立一個silverlight application並將其命名為Animation_Sample

　　然後我們要去找幾張相冊用的圖片將其放在項目中的resource文件夾下並將其設置為資源如下圖所示

　　

　　然後在xaml中加入如下代碼段作為Image元素對相應圖片的引用          <Grid x:Name=LayoutRoot Background=White MouseEnter=LayoutRoot_MouseEnter
            MouseLeave=LayoutRoot_MouseLeave>
            <Image x:Name=image_one Source=resource/img_onejpg Height= Width= CanvasLeft=
                 CanvasTop= Margin=></Image>
            <Image x:Name=image_two Source=resource/img_twojpg Height= Width= CanvasLeft=
                 CanvasTop= Margin=></Image>
            <Image x:Name=img_three Source=resource/img_threejpg Height= Width= CanvasLeft=
                 CanvasTop= Margin=></Image>
            <Image x:Name=img_four Source=resource/img_fourjpg Height= Width= CanvasLeft=
                 CanvasTop= Margin=></Image>
            <Image x:Name=img_five Source=resource/img_fivejpg Height= Width= CanvasLeft=
                CanvasTop= Margin=></Image>
        </Grid>

　　然後在該xaml文件上擊鼠標右鍵選擇在 Expression Blend 中打開菜單項然後在打開的Blend 窗口中按下圖中所指示的方式來創建一個Storyboard名為imageStoryboard

　　

　　接著拖動當前幀到秒處執行record keyframe操作

　　

　　然後對左側的圖片進行rotate transfer和scale transfer操作如下圖

　　

　　而其最終的值如下圖所示

　　

　　這裡我們可以通過下圖所示演示一下當前圖片從秒到秒的運行情況

　　

　　同理對其它圖片進行相類似的操作後就可以將當前文件進行保存並單擊F進行試運行了接著我們還要再切換回VS完成動畫播放的工作在本DEMO中因為使用了鼠標移入移出方式來實現動畫的播放任務所以我們要在相應的xamlcs文件中加入storyboard的Begin()方法綁定如下          private void LayoutRoot_MouseEnter(object sender MouseEventArgs e)
        {
            imageStoryboardBegin();
        }

　　這樣就可以運行該DEMO了

　　到這裡我們只是實現了將圖片從初始位置移動到指定位置而沒有實現reverse操作即圖片從分散展示狀態再回到實始狀態但實現這個功能也非常簡單主要是用了一個小技巧

　　首先我們要對當前的storyboard執行復制操作如下圖

　　

　　 然後在新生成的storyboard中修改其名稱並對其進行reverse操作如下圖

　　

　　這樣我們就得到了一個對展開的逆操作的storyboard然後我們在xamlcs中調用這個storyboard的Begin()方法即可如下          private void LayoutRoot_MouseLeave(object sender MouseEventArgs e)
        {
            imageStoryboard_ReverseBegin();
        }

　　通過Blend工具我們非常輕松的實現了展示效果這遠比在XAML中手寫代碼要來得簡單正確

From:http://tw.wingwit.com/Article/program/net/201311/12948.html