Silverlight实用窍门系列:20.后台CS代码中创建四种常用的动画效果【附带源码实例】
2014-01-07 09:56
786 查看
转自:/article/4762149.html
在实际项目中,我们通常会在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个可控制的控件通过点击不同的按钮我们调用不同的动画:
现在我们看MainPage.xaml.cs文件。在本代码中进行了相关的动画操作。我们再创建4个全局的故事板:
DoubleAnimation类型动画的后台代码创建以及操作:
ColorAnimation类型动画的后台代码创建以及操作:
PointAnimation类型动画的后台代码创建以及操作:
DoubleAnimationUsingKeyFrames类型动画的后台代码创建以及操作:
以上就是4中动画的后台创建方式,相关的注释也在代码中,在这里就不一一解释。最后点击相应的按钮,运行相应的故事板Begin()方法开始动画。
本实例采用VS2010+Silverlight4.0编写。点击 SLAnimation.rar 下载本实例源码。预览图如下所示:
在实际项目中,我们通常会在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 下载本实例源码。预览图如下所示:
相关文章推荐
- Silverlight后台CS代码中创建四种常用的动画效果
- Silverlight后台CS代码中创建四种常用的动画效果
- Silverlight实用窍门系列:20.后台CS代码中创建四种常用的动画效果【附带源码实例】
- 20.后台CS代码中创建四种常用的动画效果
- 后台CS代码中创建四种常用的SL动画效果
- Silverlight实用窍门系列:27.Silverlight二维旋转+平面渐变+动画,模拟雷达扫描图之基本框架【附带源码实例】
- Silverlight实用窍门系列:14.Visifire图表控件的使用一(图表的创建和基础使用)【附带源码实例】
- Silverlight实用窍门系列:50.InkPresenter涂鸦板的基本使用,以及将效果保存为Png图片【附带源码实例】
- Silverlight实用窍门系列:50.InkPresenter涂鸦板的基本使用,以及将效果保存为Png图片【附带源码实例】
- Silverlight实用窍门系列:23.Silverlight多线程技术Thread的应用,后台线程更新UI控件,向多线程传递参数【附带源码实例】
- Silverlight实用窍门系列:37.Silverlight和ASP.NET相互传参的两种常用方式(QueryString,Cookie)【附带实例源码】
- Silverlight实用窍门系列:43.Silverlight从ListBox拖拽图标到另一ListBox【附带源码实例】
- Silverlight实用窍门系列:30.Silverlight中创建一个最简单的WCF RIA Services访问数据库实例【实例源码+数据库下载】
- Silverlight实用窍门系列:42.读取拖动到控件上的外部txt和jpg文件,多外部文件的拖动【附带实例源码】
- Silverlight实用窍门系列:33.OOB模式下WebBrowser的简单应用--模拟浏览器和百度地图【附带源码实例】
- Silverlight实用窍门系列:8. Accordion模拟菜单,Accordion动态绑定数据,模拟菜单点击【附带源码实例】
- Silverlight实用窍门系列:12.继承于某些固定控件(以Grid为例)的鼠标左键双击事件的实现【附带实例源码】
- Silverlight实用窍门系列:4.Silverlight 4.0添加鼠标右键菜单和Silverlight全屏模式的进入退出。【附带源码实例】
- Silverlight实用窍门系列:6.Silverlight弹出窗口以及DataGrid分页【附带实例源码】
- Silverlight实用窍门系列:39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】