Silverlight后台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编写。