转自：http://www.cnblogs.com/chengxingliang/archive/2011/05/27/2059190.html
在实际项目中，我们通常会在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 = 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 , 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 ); // 添加一个在第二秒的时候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 下载本实例源码。预览图如下所示：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。