概述

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

　　•DoubleAnimation是控制控件的某一些Double值的属性的变化来形成动画的，比如让某个空间的Opactiy变大变小，就是透明度变大变小。

　　•ColorAnimation是控制控件的颜色的渐变，从绿色变蓝色。

　　•PointAnimation是控制控件的Point点位置的变化而操作控件的动画效果的。如本例中的中心点位置

　　•DoubleAnimationUsingKeyFrames 这个是添加帧片段，在这些片段中控制了某个控件的某一些属性在时间轴上的变化

　　DoubleAnimation,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" 　/>
@H_251_262@ 　　<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　=　 @H_649_403@new 　Storyboard();

//装载ColorAnimation动画的故事板

Storyboard　colorboard　=　 @H_649_403@new 　Storyboard();

//装载DoubleAnimationUsingKeyFrames动画的故事板

Storyboard　keyFrameboard　=　 @H_649_403@new 　Storyboard();
@H_251_262@ //装载PointAnimation动画的故事板

Storyboard　pointboard　=　 @H_649_403@new 　Storyboard();

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

#region　后台代码添加DoubleAnimation动画

DoubleAnimation　danima　=　 @H_649_403@new 　DoubleAnimation();

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

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

danima.SETVALue(Storyboard.TargetPropertyProperty,

　@H_649_403@new　PropertyPath("UIElement.opacity"));

//透明度从0.1到1
@H_251_262@ danima.From　=　0.1;

danima.To　=　1;

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

sboard.Children.Add(danima);

@H_649_403@this .LayoutRoot.@R_616_5550@es.Add( "Storyboard" ,　sboard);

#endregion

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

#region　后台代码添加ColorAnimation动画

ColorAnimation　coloranima　=　 @H_649_403@new 　ColorAnimation();

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

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

coloranima.SETVALue(Storyboard.TargetPropertyProperty,　

@H_649_403@new　PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));

//设置颜色动画从绿色变到蓝色
@H_251_262@ coloranima.From　=　Colors.Green;

coloranima.To　=　Colors.blue;

colorboard.Children.Add(coloranima);

LayoutRoot.@R_616_5550@es.Add( "colorboard" ,　colorboard);

#endregion

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

#region　后台代码添加PointAnimation动画

PointAnimation　pointanima　=　 @H_649_403@new 　PointAnimation();

//EllipseGeometry的中心点的变化

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

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

//经过2秒的时间
@H_251_262@ pointanima.Duration　=　 @H_649_403@new 　TimeSpan(0,　2);

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

Storyboard.SetTarget(pointanima,　elgeomE);

Storyboard.SetTargetProperty(pointanima,

　@H_649_403@new　PropertyPath(EllipseGeometry.CenterProperty));

pointboard.Children.Add(pointanima);

LayoutRoot.@R_616_5550@es.Add( "pointboard" ,　pointboard);

#endregion

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

#region　后台代码添加DoubleAnimationUsingKeyFrames动画

DoubleAnimationUsingKeyFrames　dakeyframe　=　 @H_649_403@new 　DoubleAnimationUsingKeyFrames();

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

Storyboard.SetTarget(dakeyframe,rect);

Storyboard.SetTargetProperty(dakeyframe,

　@H_649_403@new　PropertyPath("UIElement.opacity"));

dakeyframe.beginTime　=　 @H_649_403@new 　TimeSpan(0,　0);
@H_251_262@ //添加一个在第二秒的时候Opacity透明度值为1的关键帧

SplineDoubleKeyFrame　SKeyFrame　=　 @H_649_403@new 　SplineDoubleKeyFrame();

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

SKeyFrame.Value　=　1;

dakeyframe.KeyFrames.Add(SKeyFramE);

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

SplineDoubleKeyFrame　SKeyFrame1　=　 @H_649_403@new 　SplineDoubleKeyFrame();

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

SKeyFrame1.Value　=　0.1;

dakeyframe.KeyFrames.Add(SKeyFrame1);

keyFrameboard.Children.Add(dakeyframE);

#endregion

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

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

概述

大佬总结