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

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

　　•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" 　/> 　　<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_427_403@new 　Storyboard(); //装载colorAnimation动画的故事板 Storyboard　colorboard　=　 @H_427_403@new 　Storyboard(); //装载DoubleAnimationUsingKeyFrames动画的故事板 Storyboard　keyFrameboard　=　 @H_427_403@new 　Storyboard(); //装载PointAnimation动画的故事板 Storyboard　pointboard　=　 @H_427_403@new 　Storyboard();

 

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

#region　后台代码添加DoubleAnimation动画 DoubleAnimation　danima　=　 @H_427_403@new 　DoubleAnimation(); //设置rectangle1矩形控件的透明度的Double类型数字变化 danima.SetValue(Storyboard.TargetnameProperty,　 "rectangle1" ); danima.SetValue(Storyboard.TargetPropertyProperty, 　@H_427_403@new　PropertyPath("UIElement.Opacity")); //透明度从0.1到1 danima.From　=　0.1; danima.To　=　1; danima.Duration　=　 @H_427_403@new 　Duration( @H_427_403@new 　TimeSpan(0,　0,　5)); sboard.Children.Add(danima); @H_427_403@this .LayoutRoot.Resources.Add( "Storyboard" ,　sboard); #endregion

 

colorAnimation类型动画的后台代码创建以及 *** 作：

#region　后台代码添加colorAnimation动画 colorAnimation　coloranima　=　 @H_427_403@new 　colorAnimation(); //设置rectangle2矩形控件的颜色的改变动画 coloranima.SetValue(Storyboard.TargetnameProperty,　 "rectangle2" ); coloranima.SetValue(Storyboard.TargetPropertyProperty,　 @H_427_403@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　=　 @H_427_403@new 　PointAnimation(); //EllipseGeometry的中心点的变化 pointanima.From　=　 @H_427_403@new 　Point(100,　100); pointanima.To　=　 @H_427_403@new 　Point(200,　100); //经过2秒的时间 pointanima.Duration　=　 @H_427_403@new 　TimeSpan(0,　2); //设置EllipseGeometry控件的中心点EllipseGeometry.CenterProperty位置的变化 Storyboard.SetTarget(pointanima,　elgeome); Storyboard.SetTargetProperty(pointanima, 　@H_427_403@new　PropertyPath(EllipseGeometry.CenterProperty)); pointboard.Children.Add(pointanima); LayoutRoot.Resources.Add( "pointboard" ,　pointboard); #endregion

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

#region　后台代码添加DoubleAnimationUsingKeyFrames动画 DoubleAnimationUsingKeyFrames　dakeyframe　=　 @H_427_403@new 　DoubleAnimationUsingKeyFrames(); //设置rect矩形控件的Opacity透明度，并且开始动画事件为0秒的时候。 Storyboard.SetTarget(dakeyframe,rect); Storyboard.SetTargetProperty(dakeyframe, 　@H_427_403@new　PropertyPath("UIElement.Opacity")); dakeyframe.BeginTime　=　 @H_427_403@new 　TimeSpan(0,　0); //添加一个在第二秒的时候Opacity透明度值为1的关键帧 SplineDoubleKeyFrame　SKeyFrame　=　 @H_427_403@new 　SplineDoubleKeyFrame(); SKeyFrame.KeyTime　=　KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)); SKeyFrame.Value　=　1; dakeyframe.KeyFrames.Add(SKeyFrame); //添加一个在第四秒的时候Opacity透明度值为0.1的关键帧 SplineDoubleKeyFrame　SKeyFrame1　=　 @H_427_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()方法开始动画。

本实例采用VS2010+Silverlight4.0编写。

总结

以上是内存溢出为你收集整理的Silverlight后台CS代码中创建四种常用的动画效果全部内容，希望文章能够帮你解决Silverlight后台CS代码中创建四种常用的动画效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。