Silverlight实用窍门系列:20.后台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个可控制的控件通过点击不同的按钮我们调用不同的动画:
<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个全局的故事板:
Storyboard sboard = new Storyboard();
//装载ColorAnimation动画的故事板
Storyboard colorboard = new Storyboard();
//装载DoubleAnimationUsingKeyFrames动画的故事板
Storyboard keyFrameboard = new Storyboard();
//装载PointAnimation动画的故事板
Storyboard pointboard = new Storyboard();
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类型动画的后台代码创建以及操作:
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类型动画的后台代码创建以及操作:
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类型动画的后台代码创建以及操作:
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 下载本实例源码。预览图如下所示:
转载于:https://www.cnblogs.com/chengxingliang/archive/2011/03/07/1974436.html
Silverlight实用窍门系列:20.后台CS代码中创建四种常用的动画效果【附带源码实例】...相关推荐
- 后台CS代码中创建四种常用的SL动画效果
http://www.cnblogs.com/chengxingliang/archive/2011/03/07/1974436.html后台CS代码中创建四种常用的动画效果[附带源码实例] 转载于: ...
- Silverlight实用窍门系列:29.Silverlight碰撞测试、检测自定义控件碰撞,雷达扫描图之扫描雷达点状态【附带源码实例】...
雷达扫描图中当雷达指针转动扫描到某一个点上的时候,判断这个点的CPU值是否已经超过60的警戒位置如果超过将此点设置为红色. 在Silverlight中我们的雷达指针是一直在做圆运动的,我们要随时检测雷 ...
- 36.Silverlight中播放视频和打印文档【附带源码实例】
在silverlight实际项目中时常会需要播放视频和打印文档,在本节中我们将制作一个最简单的播放视频和打印文档的实例. 一.播放WMV视频 首先我们创建一个Silverlight应用程序SLShow ...
- Silverlight实用窍门系列:59.多个中心点联动多线的可拖动控件扩展为拓扑图
在本系列的第17篇文章中"Silverlight实用窍门系列:17.中心点联动多线的可拖动控件(绘制工程图.拓扑图基础) ",制作了基本的中心联动图标.有园友对此图的扩展不是很清晰 ...
- Silverlight实用窍门系列:71.Silverlight的Style
此文章实例基于Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary,如有数据源疑问请参考该文章. 在Silverlight中的Style相当于 ...
- Silverlight实用窍门系列:14.Visifire图表控件的使用一(图表的创建和基础使用)【附带源码实例】...
在实际项目开展中,往往会牵扯到需要绘制图表的情况.而Visifire是一个比较美观大方的第三方图表控件,本文会讲述如何初步使用Visifire控件. 首先我们需要从Visifire的官方网站下载:ht ...
- Silverlight实用窍门系列:52.Silverlight中的MVVM框架极速入门(以MVVM Light Toolkit为例)...
在本文将以MVVM Light Toolkit为例讲解MVVM框架在现实中的使用入门,首先我们在http://mvvmlight.codeplex.com/下载它的MVVM框架下来.也可以通过 htt ...
- Silverlight实用窍门系列:61.Silverlight中的Trigger触发器,自定义翻页触发器
在Silverlight应用程序和客户进行交互工作的时候可以不用写后台代码而通过Xaml代码来实现,在本文我们将学习了解Trigger触发器. Trigger触发器:引发动作的因素,比如鼠标点击.键盘 ...
- Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别...
问题一:在某一些情况下,我们使用MVVM模式的时候,对于某一个字段(AgeField)需要在前台的很多个控件(A.B.C.D.E)进行绑定,但是如何能够让我们后台字段名改变的时候能够非常方便的改变所有 ...
- Silverlight实用窍门系列:40.Silverlight中捕捉视频,截图保存到本地
在Silverlight中我们可以捕捉视频设备以制作视频会议系统,或者通过视频设备截图功能上传头像等功能. 下面我们通过一个简单的实例来访问视频设备,并且截取图像下载该截图文件至本地. 一.在Silv ...
最新文章
- 二十九、基本分页存储管理的基本概念
- 使用nginx分片功能提升缓存效率,支持可拖拽式播放视频
- 如何将PDF转换成可以直接编辑的CAD图纸
- QT--内存错误导致程序崩溃
- vs2015完全卸载+重装 成功解决 未能加载xx包、未能安装编译器等问题
- 微信小程序 自定义底部导航栏
- PS入门教程之字体的变形艺术
- linux系统创建桌面快捷方式,linux创建桌面快捷方式
- LittleVGL-键盘控件
- 回顾15个月的工作经历
- Mysql事务隔离与Spring
- E.Neko and Flashback
- linux桌面图标恢复,恢复Linux桌面下方面板上显示最小化的图标的方法
- GitLab使用手册
- Muli3D 9 CubeTexture的采样原理
- 通过url链接将图片上传oss图片显示不完整问题
- 美国大学统计专业申请策略
- 利用Python实现自动批量图片格式转换
- Data Science Bowl 2017数据预处理
- 电子信箱怎么样注册?邮箱格式怎么写?
热门文章
- Java编程基础12——Eclipse使用Object类型
- 浅析2017快闪存储器涨势原因,AMOLED手机面板成主因?
- Linux select 机制深入分析
- 8款功能强大的最新HTML5特效实例
- mingw,cygwin,gnuwin32,msys,msys2 的区别
- jdk list接口源码解析
- 安装tensorflow时候报错ImportError: DLL load failed: 找不到指定的模块。Failed to load the native TensorFlow runtime.
- 阿里云服务器企业该如何选择
- iOS研发助手DoraemonKit技术实现之Crash查看
- Linux服务器更换主板后,网卡识别失败的处理方法