silverlight基础3-Storyboard

silverlight Storyboard

 

silverlight的Storyboard可以实现动画效果。

Xmal中：

< Storyboard >
  oneOrMoreChildTimelines
</ Storyboard >

 

 

其中oneOrMoreChildTimelines用来设置动画效果，有5种形式

1.ColorAnimation（设置颜色动画，使控件颜色变化一次）

2.ColorAnimationUsingKeyFrames（设置颜色动画，使控件颜色变化任意次）

3.DoubleAnimation（设置动画，使控件的任意一个属性（double类型的，eg：透明度）变化一次）

4.DoubleAnimationUsingKeyFrames（设置动画，使控件的任意一个属性（double类型的，eg：透明度）变化任意次）

5.PointAnimation（设置动画，使控件的位置变化一次）

6.PointAnimationUsingKeyFrames（设置动画，使控件的位置变化任意次）

 

下面通过一个例子展示这6个功能：

这个例子通过六个button：

CA_btn：控制一个矩形的颜色由绿变红 ColorAnimation

CAUKF_btn：控制一个矩形的颜色不断变化 ColorAnimationUsingKeyFrames

DA_btn：控制一个矩形的透明度变化一次 DoubleAnimation

DAUKF_btn：控制一个矩形的X值不断变化 DoubleAnimationUsingKeyFrames

PA_btn：控制一个圆形的位置变化一次 PointAnimation

PAUKF_btn：控制一个圆形的位置不断变化 PointAnimationUsingKeyFrames

 

代码如下：

xmal文件

代码

< UserControl  x:Class ="Storyboard_sample.MainPage"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable ="d"
    d:DesignHeight ="300"  d:DesignWidth ="400" >

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

         <!-- 将Storyboard 放入Resources中是为了更方便的在代码中引用 Storyboard 以及进行互操作，
                     如start, stop, pause,和恢复Storyboard
        以下Storyboard中的参数说明：
           Storyboard.TargetName:附加属性操作到指定的对象上;
           Storyboard.TargetProperty:要操作指定对象的属性;
           From..To :上述属性值的起始范围;
           Duration: 在多少时间内完成上述属性值的变化;
           AutoReverse:是否在vanishes 之后 fade back 到初始状态;
           RepeatBehavior:指示当前animation不断反复
         -->  
         < Grid.Resources >
             <!-- 1.ColorAnimation示例，控制一个矩形的颜色由绿色转变为红色.
            本例中Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
            即改变矩形的Rectangle.Fill属性，颜色 -->
             < Storyboard  x:Name ="CA_Storyboard" >
                 < ColorAnimation
                    Storyboard.TargetName ="MyAnimatedRectangle"
                   Storyboard.TargetProperty ="(Rectangle.Fill).(SolidColorBrush.Color)"  
                   From ="Green"
                   To ="red"
                   Duration ="0:0:2" />
             </ Storyboard >
            
             <!-- 2.ColorAnimationUsingKeyFrames示例，控制一个矩形的颜色依次转变成不同的颜色  -->
             < Storyboard  x:Name ="CAUKF_Storyboard" >
                 < ColorAnimationUsingKeyFrames  BeginTime ="00:00:00"  
                Storyboard.TargetName ="MyAnimatedRectangle"  
                Storyboard.TargetProperty ="(Rectangle.Fill).(SolidColorBrush.Color)" >

                     <!--  前2秒，矩形颜色逐渐转换成红色，LinearColorKeyFrame：颜色变换模式为渐变（颜色慢慢改变），Value：目标颜色， KeyTime：时间  -->
                     < LinearColorKeyFrame  Value ="Red"  KeyTime ="00:00:02"   />

                     <!--  接下来0.5秒钟，矩形颜色瞬间转变成黄色，DiscreteColorKeyFrame:颜色变换模式为瞬间改变，Value：目标颜色， KeyTime：时间 -->
                     < DiscreteColorKeyFrame  Value ="Yellow"  KeyTime ="00:00:2.5"   />

                     <!--  最后2秒钟，矩形颜色由黄色转变成绿色，SplineColorKeyFrame：颜色变换模式按照KeySpline中指定的颜色变换速率，
                    这个例子中，这个矩形刚开始颜色转变缓慢，到最后时颜色转变速度加快
                    KeySpline的解释请看http://msdn.microsoft.com/zh-cn/library/system.windows.media.animation.keyspline(VS.95).aspx -->
                     < SplineColorKeyFrame  Value ="Green"  KeyTime ="00:00:4.5"  KeySpline ="0.6,0.0 0.9,0.00"   />

                 </ ColorAnimationUsingKeyFrames >
             </ Storyboard >


             <!-- 3.DoubleAnimation示例，控制一个矩形的透明度，不透明变为透明，Storyboard.TargetProperty：修改目标矩形的Opacity（透明度) -->
             < Storyboard  x:Name ="DA_Storyboard" >
                 < DoubleAnimation
                    Storyboard.TargetName ="MyAnimatedRectangle"
                   Storyboard.TargetProperty ="Opacity"
                   From ="1.0"
                   To ="0.0"
                   Duration ="0:0:1" />
             </ Storyboard >

             <!-- 4.DoubleAnimationUsingKeyFrames示例，控制一个矩形的X坐标变化 -->
             < Storyboard  x:Name ="DAUKF_Storyboard" >
              <!--  Animate the TranslateTransform.X property using 3 KeyFrames
                   which animates the rectangle along a straight line. -->
                 < DoubleAnimationUsingKeyFrames
                 Storyboard.TargetName ="AnimatedTranslateTransform"
                Storyboard.TargetProperty ="X"
                Duration ="0:0:6" >

                     <!--  Using a LinearDoubleKeyFrame, the rectangle moves 
                     steadily from its starting position to 500 over 
                     the first 3 seconds.   -->
                     < LinearDoubleKeyFrame  Value ="500"  KeyTime ="0:0:3"   />

                     <!--  Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
                     appears at 400 after the fourth second of the animation.  -->
                     < DiscreteDoubleKeyFrame  Value ="400"  KeyTime ="0:0:4"   />

                     <!--  Using a SplineDoubleKeyFrame, the rectangle moves 
                     back to its starting point. The
                     animation starts out slowly at first and then speeds up. 
                     This KeyFrame ends after the 6th
                     second.  -->
                     < SplineDoubleKeyFrame  KeySpline ="0.6,0.0 0.9,0.00"  Value ="0"  KeyTime ="0:0:6"   />
                 </ DoubleAnimationUsingKeyFrames >
             </ Storyboard >

             <!-- 5.PointAnimation示例，控制一个圆形位置变化 -->
             < Storyboard  x:Name ="PA_Storyboard" >
                 < PointAnimation  Storyboard.TargetProperty ="Center"
                    Storyboard.TargetName ="MyAnimatedEllipseGeometry"
                    Duration ="0:0:3"
                    From ="20,20"
                    To ="400,400"   />
              </ Storyboard >

             <!-- 6.PointAnimation示例，控制一个圆形位置变化 -->
             < Storyboard  x:Name ="PAUKF_Storyboard" >

               <!-- Animating the Center property uses 3 KeyFrames, which animate
                   the ellipse allong a triangular path. -->
                
                 < PointAnimationUsingKeyFrames
                 Storyboard.TargetProperty ="Center"
                Storyboard.TargetName ="MyAnimatedEllipseGeometry"
                Duration ="0:0:5" >

                  <!--  Over the first half second, Using a LinearPointKeyFrame, the ellipse 
                  moves steadily from its starting position along the first line of the 
                 trianglar path.   -->
                   < LinearPointKeyFrame 
                   KeyTime ="0:0:0.5"
                  Value ="100,300"   />

                     <!--  Using a DiscretePointKeyFrame, the ellipse suddenly changes position
                     after the first second of the animation.  -->
                   < DiscretePointKeyFrame 
                   KeyTime ="0:0:1"
                  Value ="400,300"   />

                     <!--  Using a SplinePointKeyFrame, the ellipse moves back to its starting
                     position. It moves slowly at first and then speeds up. This key frame 
                     takes 2 seconds to complete.  -->
                   < SplinePointKeyFrame 
                   KeySpline ="0.6,0.0 0.9,0.00"  
                  KeyTime ="0:0:3"
                  Value ="200,100"   />
                 </ PointAnimationUsingKeyFrames >
             </ Storyboard >
         </ Grid.Resources >

          <!--  设置一个Grid存放六个功能按钮 -->
             < Grid  x:Name ="button_grid"  HorizontalAlignment ="Center"   VerticalAlignment ="Top"  Height ="30"  Margin ="12,0,27,0" >
            
             < Grid.RowDefinitions >
                 < RowDefinition  Height ="30" ></ RowDefinition >
             </ Grid.RowDefinitions >
             < Grid.ColumnDefinitions >
                 < ColumnDefinition  Width ="1*"   />
                 < ColumnDefinition  Width ="1*"   />
                 < ColumnDefinition  Width ="1*"   />
                 < ColumnDefinition  Width ="1*"   />
                 < ColumnDefinition  Width ="1*"   />
                 < ColumnDefinition  Width ="1*"   />
             </ Grid.ColumnDefinitions >
            
             < Button  Content ="ColorAnimation"  Height ="30"  HorizontalAlignment ="Center"   Name ="CA_btn"  VerticalAlignment ="Top"  Width ="150"  Click ="CA_btn_Click"  Grid.Row  ="0"  Grid.Column ="0" />
             < Button  Content ="ColorAnimationUsingKeyFrames"  Height ="30"  HorizontalAlignment ="Center"   Name ="CAUKF_btn"  VerticalAlignment ="Top"  Width ="200"  Click ="CAUKF_btn_Click"  Grid.Row  ="0"  Grid.Column ="1" />
             < Button  Content ="DoubleAnimation"  Height ="30"  HorizontalAlignment ="Center"   Name ="DA_btn"  VerticalAlignment ="Top"  Width ="150"  Click ="DA_btn_Click"  Grid.Row  ="0"  Grid.Column ="2" />
             < Button  Content ="DoubleAnimationUsingKeyFrames"  Height ="30"  HorizontalAlignment ="Center"   Name ="DAUKF_btn"  VerticalAlignment ="Top"  Width ="200"  Grid.Row  ="0"  Grid.Column ="3"  Click ="DAUKF_btn_Click"   />
             < Button  Content ="PointAnimation"  Height ="30"  HorizontalAlignment ="Center"   Name ="PA_btn"  VerticalAlignment ="Top"  Width ="150"  Click ="PA_btn_Click"  Grid.Row  ="0"   Grid.Column ="4" />
             < Button  Content ="PointAnimationUsingKeyFrames"  Height ="30"  HorizontalAlignment ="Center"   Name ="PAUKF_btn"  VerticalAlignment ="Top"  Width ="200"  Grid.Row  ="0"  Grid.Column ="5"  Click ="PAUKF_btn_Click"   />

         </ Grid >

      <!-- 设置一个矩形显示以上的动画,RenderTransform设置矩形的位置等属性 -->
    < Rectangle  x:Name ="MyAnimatedRectangle"  Fill ="Blue"  Margin ="107,56,224,181"  Height =" 100"  Width ="100" >
         < Rectangle.RenderTransform >
             < TranslateTransform  x:Name ="AnimatedTranslateTransform"   />
         </ Rectangle.RenderTransform >
    </ Rectangle >
      

    <!--设置一个圆形显示以上的动画-->
     < Path  Fill ="Yellow" >
             < Path.Data >
                 <!--  Describes an ellipse.  -->
                 < EllipseGeometry  x:Name ="MyAnimatedEllipseGeometry"
  Center ="20,50"  RadiusX ="15"  RadiusY ="15"   />
             </ Path.Data >
     </ Path >
        
     </ Grid >
</ UserControl >

 

 

xmal.cs文件

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;

namespace  Storyboard_sample
{
     public   partial   class  MainPage : UserControl
    {
         public  MainPage()
        {
            InitializeComponent();
        }

         // ColorAnimation
         private   void  CA_btn_Click( object  sender, RoutedEventArgs e)
        {
            CA_Storyboard.Begin(); // 启动CA_Storyboard动画
        }

         // ColorAnimationUsingKeyFrames
         private   void  CAUKF_btn_Click( object  sender, RoutedEventArgs e)
        {
            CAUKF_Storyboard.Begin(); // 启动CAUKF_Storyboard动画
        }
      
         // DoubleAnimation
         private   void  DA_btn_Click( object  sender, RoutedEventArgs e)
        {
            DA_Storyboard.Begin(); // 启动DA_Storyboard动画
        }

         // DoubleAnimationUsingKeyFrames
         private   void  DAUKF_btn_Click( object  sender, RoutedEventArgs e)
        {
            DAUKF_Storyboard.Begin(); // 启动DAUKF_Storyboard动画
        }

         // PointAnimation
         private   void  PA_btn_Click( object  sender, RoutedEventArgs e)
        {
            PA_Storyboard.Begin(); // 启动PA_Storyboard动画
        }

         // PointAnimationUsingKeyFrames
         private   void  PAUKF_btn_Click( object  sender, RoutedEventArgs e)
        {
            PAUKF_Storyboard.Begin(); // 启动PAUKF_Storyboard动画
        }
    }
}

 

界面如下

 

下载：

 Storyboard_sample

 

一般Storyboard会放在容器XXX（grid，stackpanel等）的XXX.Resources中，这样这个容器内的其他控件，就可以直接调用这个Storyboard。

Storyboard中也可以安排很多片段动画，组成一个完整的动画，例如

代码

< Storyboard >
     < DoubleAnimation  1   />
     < DoubleAnimation  2 />
     < ColorAnimation  3   />
    ......

</ Storyboard >

 

 

说明：
不要试图在页面的构造函数中调用 Storyboard 成员（例如 Begin）。这将导致动画失败，且无任何提示。