20.后台CS代码中创建四种常用的动画效果

        在实际项目中，我们通常会在XAML代码中创建控件的动画效果，但在某一些特殊情况下，需要后台进行动画效果的自定义修改。那么我们就需要用到本节中讲述 的相关动画效果自创建知识。在Silverlight中常用的动画创建方式有4种分别为 DoubleAnimation,ColorAnimation,PointAnimation,DoubleAnimationUsingKeyFrames。

　　　　•DoubleAnimation是控制控件的某一些Double值的属性的变化来形成动画的，比如让某个空间的Opactiy变大变小，就是透明度变大变小。
•ColorAnimation是控制控件的颜色的渐变，从绿色变蓝色。
•PointAnimation是控制控件的Point点位置的变化而操作控件的动画效果的。如本例中的中心点位置
•DoubleAnimationUsingKeyFrames 这个是添加帧片段，在这些片段中控制了某个控件的某一些属性在时间轴上的变化

        DoubleAnimation,ColorAnimation,PointAnimation这三种动画基本上都有以下相似的属性：

　　　　•TargetName（要进行动画动画处理的对象的名称）

　　　　•TargetProperty（要进行动画动画处理的对象的属性）

　　　　•BeginTime （触发动画的时间点）

　　　　•From（ 动画的起始值） 

　　　　•To（动画的结束值） 

　　　　•By（动画从起始值动画起始计算所需变化的总量）

　　　　•Duration（时间线的持续时间）

　　　　•RepeatBehavior （动画重复播放动画播放的时间、次数或类型）
        DoubleAnimationUsingKeyFrames 动画则是其内部可以添加多种动画类型的关键帧分别是ColorAnimationUsingKeyFrames 、 DoubleAnimationUsingKeyFrames 、PointAnimationUsingKeyFrames 等等，在这里不过多详述。

        现在我们首先看一个XAML文件，这里有4个按钮和4个可控制的控件通过点击不同的按钮我们调用不同的动画：

 
 


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

  
  
<Rectangle RadiusX="5" RadiusY="5" Fill="#FFE8BE59" Height="92" Name="rectangle1" Stroke="Black" StrokeThickness="1" Width="148" Canvas.Left="47" Canvas.Top="76" /> 

  
  
<Button Canvas.Left="47" Canvas.Top="195" Content="开始DoubleAnimation动画" Height="23" Name="button1" Width="148" Click="button1_Click" /> 

  
  
<Rectangle Canvas.Left="231" Canvas.Top="76" Fill="Green" Height="92" Name="rectangle2" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1" Width="148" /> 

  
  
<Rectangle Canvas.Left="414" Canvas.Top="76" Fill="DarkGoldenrod" Height="92" Name="rect" Opacity="0.1" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1" Width="148" /> 

  
  
<Button Canvas.Left="414" Canvas.Top="195" Content="开始ColorAnimation动画" Height="23" Name="button2" Width="148" Click="button2_Click" /> 

  
  
<Button Canvas.Left="231" Canvas.Top="195" Content="开始ColorAnimation动画" Height="23" Name="button3" Width="148" Click="button3_Click" /> 

  
  
<Button Canvas.Left="593" Canvas.Top="195" Content="开始PointAnimation动画" Height="23" Name="button4" Width="148" Click="button4_Click" /> 

  
  
<Ellipse Canvas.Left="579" Canvas.Top="76" Height="92" Name="ellipse1" Fill="Blue" Stroke="Black" StrokeThickness="1" Width="183" > 

  
  
<Ellipse.Clip> 

  
  
<EllipseGeometry Center="100,100" x:Name="elgeome" RadiusX="90" RadiusY="60" /> 

  
  
</Ellipse.Clip> 

  
  
</Ellipse> 

  
  
</Canvas> 
 
 

        现在我们看MainPage.xaml.cs文件。在本代码中进行了相关的动画操作。我们再创建4个全局的故事板：

 
 


  
  
//装载DoubleAnimation动画的故事板 

  
  
   Storyboard sboard = new Storyboard(); 

  
  
   //装载ColorAnimation动画的故事板 

  
  
   Storyboard colorboard = new Storyboard(); 

  
  
   //装载DoubleAnimationUsingKeyFrames动画的故事板 

  
  
   Storyboard keyFrameboard = new Storyboard(); 

  
  
   //装载PointAnimation动画的故事板 

  
  
   Storyboard pointboard = new Storyboard(); 
 
 

        DoubleAnimation类型动画的后台代码创建以及操作：

  
  


   
   
#region 后台代码添加DoubleAnimation动画 

   
   
DoubleAnimation danima = new DoubleAnimation(); 

   
   
//设置rectangle1矩形控件的透明度的Double类型数字变化 

   
   
danima.SetValue(Storyboard.TargetNameProperty, "rectangle1"); 

   
   
danima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("UIElement.Opacity")); 

   
   
//透明度从0.1到1 

   
   
danima.From = 0.1; 

   
   
danima.To = 1; 

   
   
danima.Duration = new Duration(new TimeSpan(0, 0, 5)); 

   
   
sboard.Children.Add(danima); 

   
   
this.LayoutRoot.Resources.Add("Storyboard", sboard); 

   
   
#endregion 
  
  

        ColorAnimation类型动画的后台代码创建以及操作：

 
 


  
  
#region 后台代码添加ColorAnimation动画 

  
  
ColorAnimation coloranima = new ColorAnimation(); 

  
  
//设置rectangle2矩形控件的颜色的改变动画 

  
  
coloranima.SetValue(Storyboard.TargetNameProperty, "rectangle2"); 

  
  
coloranima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)")); 

  
  
//设置颜色动画从绿色变到蓝色 

  
  
coloranima.From = Colors.Green; 

  
  
coloranima.To = Colors.Blue; 

  
  
colorboard.Children.Add(coloranima); 

  
  
LayoutRoot.Resources.Add("colorboard", colorboard); 

  
  
#endregion 
 
 

        PointAnimation类型动画的后台代码创建以及操作：

 
 


  
  
#region 后台代码添加PointAnimation动画 

  
  
PointAnimation pointanima = new PointAnimation(); 

  
  
//EllipseGeometry的中心点的变化 

  
  
pointanima.From = new Point(100, 100); 

  
  
pointanima.To = new Point(200, 100); 

  
  
//经过2秒的时间 

  
  
pointanima.Duration = new TimeSpan(0, 0, 2); 

  
  
//设置EllipseGeometry控件的中心点EllipseGeometry.CenterProperty位置的变化 

  
  
Storyboard.SetTarget(pointanima, elgeome); 

  
  
Storyboard.SetTargetProperty(pointanima, new PropertyPath(EllipseGeometry.CenterProperty)); 

  
  
pointboard.Children.Add(pointanima); 

  
  
LayoutRoot.Resources.Add("pointboard", pointboard); 

  
  
#endregion 
 
 

        DoubleAnimationUsingKeyFrames类型动画的后台代码创建以及操作：

 
 


  
  
#region 后台代码添加DoubleAnimationUsingKeyFrames动画 

  
  
DoubleAnimationUsingKeyFrames dakeyframe = new DoubleAnimationUsingKeyFrames(); 

  
  
//设置rect矩形控件的Opacity透明度，并且开始动画事件为0秒的时候。 

  
  
Storyboard.SetTarget(dakeyframe,rect); 

  
  
Storyboard.SetTargetProperty(dakeyframe, new PropertyPath("UIElement.Opacity")); 

  
  
dakeyframe.BeginTime = new TimeSpan(0, 0, 0); 

  
  
 

  
  
//添加一个在第二秒的时候Opacity透明度值为1的关键帧 

  
  
SplineDoubleKeyFrame SKeyFrame = new SplineDoubleKeyFrame(); 

  
  
SKeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)); 

  
  
SKeyFrame.Value = 1; 

  
  
dakeyframe.KeyFrames.Add(SKeyFrame); 

  
  
 

  
  
//添加一个在第四秒的时候Opacity透明度值为0.1的关键帧 

  
  
SplineDoubleKeyFrame SKeyFrame1 = new SplineDoubleKeyFrame(); 

  
  
SKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)); 

  
  
SKeyFrame1.Value = 0.1; 

  
  
dakeyframe.KeyFrames.Add(SKeyFrame1); 

  
  
 

  
  
keyFrameboard.Children.Add(dakeyframe); 

  
  
#endregion 
 
 

        以上就是4中动画的后台创建方式，相关的注释也在代码中，在这里就不一一解释。最后点击相应的按钮，运行相应的故事板Begin()方法开始动画。

        本实例采用VS2010+Silverlight4.0编写。点击 SLAnimation.rar 下载本实例源码。预览图如下所示：

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/821964