WPF编程学习——动画
前言
使用动画,是增强用户体验的一种有效的手段。合理的动画,可以让应用程序的界面看起来更加自然、真实、流畅、舒适,更有效地向用户展现信息,用户也更容易接受。同时也增加了软件使用的乐趣,提高用户粘度。(如MSN2011的启动界面动画,字体滑动和淡入淡出。)
在以往的程序开发中,如果想构建动画,需要定时器和自定义的绘图元素,并让这些绘图元素根据定时器做出相应的改变,以实现动画效果,开发难度和工作量都是很高的。并且这些动画的拓展性和灵活性一般很弱,代码量和复杂度却很大。而在WPF中,可以使用声明的方式构建动画,甚至不需要任何后台代码,就可以实现动画效果。WPF提供的动画模型和强大的类库,让一般动画的实现,都变得轻而易举。在WPF中,创建更加复杂的动画,甚至也可以使用设计工具或第三方工具在XAML中实现。所以,需要的更多的,可能不是代码量,而是你的想象力!
本文将介绍WPF 中三种基本动画,线性插值、关键帧和路径动画。
在 System.Windows.Media.Animation 这个命名空间中,包含了三种动画类:线性插值动画类(17个)、关键帧动画(22个)、路径动画(3个)。
在C#代码中使用Animation类,需要引入命名空间:System.Windows.Media.Animation
using System.Windows.Media.Animation;
1、线性插值动画
该动画表现为,元素的某个属性,在开始值和结束值之间逐步增加,是一种线性插值的过程。比如,实现一个按钮的淡入效果,让它的透明度Opacity在0~1之间线性增长,就可以实现预期效果。
以下是 System.Windows.Media.Animation 命名空间中,17个线性插值动画类。
ByteAnimation
ColorAnimation
DecimalAnimation
DoubleAnimation
Int16Animation
Int32Animation
Int64Animation
Point3DAnimation
PointAnimation
QuaternionAnimation
RectAnimation
Rotation3DAnimation
SingleAnimation
SizeAnimation
ThicknessAnimation
Vector3DAnimation
VectorAnimation
示例1:以 DoubleAnimation 为例,实现文字的淡入效果。
在XAML中可以直接定义动画,以下示例是以后台代码形式实现的动画。
XAML
<TextBlock Height="" Width="" Foreground="#326939" FontSize="" Name="textBlock1" Text="文字淡入效果"/>
CS
DoubleAnimation da = new DoubleAnimation();
da.From = ; //起始值
da.To = ; //结束值
da.Duration = TimeSpan.FromSeconds(); //动画持续时间
this.textBlock1.BeginAnimation(TextBlock.OpacityProperty, da);//开始动画
示例2:利用 ThicknessAnimation ,实现元素平移效果。
XMAL
<TextBlock Height="" Foreground="#326939" Margin="0,100,0,0" FontSize="" Name="textBlock1" Text="文字平移"/>
CS
//文字平移,Margin属性是Thickness类型,选择ThicknessAnimation
ThicknessAnimation ta = new ThicknessAnimation();
ta.From = new Thickness(, , , ); //起始值
ta.To = new Thickness(, , , ); //结束值
ta.Duration = TimeSpan.FromSeconds(); //动画持续时间
this.textBlock1.BeginAnimation(TextBlock.MarginProperty, ta);//开始动画
2、关键帧动画
关键帧动画是以时间为节点,在指定时间节点上,属性达到某个值。
以下是 System.Windows.Media.Animation 命名空间中,22个关键帧动画类。
BooleanAnimationUsingKeyFrames
ByteAnimationUsingKeyFrames
CharAnimationUsingKeyFrames
ColorAnimationUsingKeyFrames
DecimalAnimationUsingKeyFrames
DoubleAnimationUsingKeyFrames
Int16AnimationUsingKeyFrames
Int32AnimationUsingKeyFrames
Int64AnimationUsingKeyFrames
MatrixAnimationUsingKeyFrames
ObjectAnimationUsingKeyFrames
Point3DAnimationUsingKeyFrames
PointAnimationUsingKeyFrames
QuaternionAnimationUsingKeyFrames
RectAnimationUsingKeyFrames
Rotation3DAnimationUsingKeyFrames
SingleAnimationUsingKeyFrames
SizeAnimationUsingKeyFrames
StringAnimationUsingKeyFrames
ThicknessAnimationUsingKeyFrames
Vector3DAnimationUsingKeyFrames
VectorAnimationUsingKeyFrames
示例3:Border宽度的关键帧动画
XAML
<Border Height="" Width="" Background="#326939" Name="border1"/>
CS
//Border长度关键帧动画
DoubleAnimationUsingKeyFrames dak = new DoubleAnimationUsingKeyFrames();
//关键帧定义
dak.KeyFrames.Add(new LinearDoubleKeyFrame(, KeyTime.FromTimeSpan(TimeSpan.FromSeconds())));
dak.KeyFrames.Add(new LinearDoubleKeyFrame(, KeyTime.FromTimeSpan(TimeSpan.FromSeconds())));
dak.KeyFrames.Add(new LinearDoubleKeyFrame(, KeyTime.FromTimeSpan(TimeSpan.FromSeconds())));
dak.KeyFrames.Add(new LinearDoubleKeyFrame(, KeyTime.FromTimeSpan(TimeSpan.FromSeconds()))); dak.BeginTime = TimeSpan.FromSeconds();//从第2秒开始动画
dak.RepeatBehavior = new RepeatBehavior();//动画重复3次
//开始动画
this.border1.BeginAnimation(Border.WidthProperty, dak);
(程序运行时开始计时,第0秒)
0~5:动画尚未开始;
5~8:border1宽度从0增加到240;
8~11:border1宽度保持240不变;
11~14:border1宽度从240减少到0;
14-17:又从0增加到240……(即5~14的过程循环3次)
3、路径动画
基于路径的动画,比起前两种更加专业一些。它的表现方式是,修改数值使其符合PathGeometry对象描述的形状,并且让元素沿着路径移动。以下是 System.Windows.Media.Animation 命名空间中,3个路径动画类。
DoubleAnimationUsingPath
MatrixAnimationUsingPath
PointAnimationUsingPath
示例4:基于路径动画的演示
XMAL(该动画是在XAML中定义,使用事件触发器,窗体加载时开始动画)
<Window x:Class="WpfApplication9.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="" Width="">
<Window.Resources>
<!--路径资源-->
<PathGeometry x:Key="path">
<PathFigure IsClosed="True">
<ArcSegment Point="200,200" Size="30,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="300,200" Size="5,5"></ArcSegment>
</PathFigure>
</PathGeometry>
</Window.Resources>
<!---事件触发器,窗体加载时动画开始,周期6秒,无限循环-->
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource path}" Duration="0:0:6" RepeatBehavior="Forever" Source="X"></DoubleAnimationUsingPath>
<DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource path}" Duration="0:0:6" RepeatBehavior="Forever" Source="Y"></DoubleAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Canvas>
<!--显示路径-->
<Path Margin="" Stroke="#ddd" Data="{StaticResource path}"></Path>
<!--动画元素-->
<Image Name="image" Source="me.png" Width="" Height="" />
</Canvas>
</Window>
我的头像将沿着曲线路径进行移动,由于RepeatBehavior属性设置为Forever,则动画将无限循环。
WPF编程学习——动画的更多相关文章
- WPF编程学习——样式
本文目录 1.引言 2.怎样使用样式? 3.内联样式 4.已命名样式 5.元素类型样式 6.编程控制样式 7.触发器 1.引言 样式(Style),主要是用来让元素或内容呈现一定外观的属性.WPF中的 ...
- WPF编程学习 —— 样式
本文目录 1.引言 2.怎样使用样式? 3.内联样式 4.已命名样式 5.元素类型样式 6.编程控制样式 7.触发器 1.引言 样式(Style),主要是用来让元素或内容呈现一定外观的属性.WPF中 ...
- WPF编程学习——布局
本文目录 1.布局简介 2.面板(Panel) 3.视图框(Viewbox) 4.滚动视图控件(ScrollViewer) 5.公共布局属性 1.布局简介 应用程序界面设计中,合理的元素布局至关重要, ...
- WPF编程学习——窗口
转自 http://www.cnblogs.com/libaoheng/archive/2011/11/18/2253751.html 本文目录 1.窗口的外观 2.窗口的位置 3.窗口的大小 4.窗 ...
- WPF编程学习——样式(好文)
http://www.cnblogs.com/libaoheng/archive/2011/11/20/2255963.html
- 【Visual C++】游戏编程学习笔记之四:透明动画实现
本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44224963 作者:ZeeCod ...
- 【Visual C++】游戏编程学习笔记之六:多背景循环动画
本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44264153 作者:ZeeCod ...
- WPF编程,通过Path类型制作沿路径运动的动画一种方法。
原文:WPF编程,通过Path类型制作沿路径运动的动画一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/de ...
- WPF编程,通过Path类型制作沿路径运动的动画另一种方法。
原文:WPF编程,通过Path类型制作沿路径运动的动画另一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/d ...
随机推荐
- 在centos7中限制kvm虚拟机可访问的资源
最近通过艰苦卓绝的度娘(我很想用谷歌,可是,你懂的),终于搞明白如何在centos7中限制kvm虚拟机可访问的资源了.度娘给出的结果中,大部分都说的很对,然而,却很难照着做,主要原因有两点:1.网上的 ...
- (转) VS2012程序打包部署详解
程序编写测试完成后接下来我们要做的是打包部署程序,但VS2012让人心痛的是没有了打包工具.不知道出于什么原因微软没有将打包工具集成在开发环境中,但是我知道总会有解决办法的. 经过翻阅资料发现 ...
- LNK1123: 转换到 COFF 期间失败: 文件无效或损坏[汇总]
目前有两种方式可用于解决: 1. 微软官方的一个解决方案: http://support.microsoft.com/kb/320216/zh-cn 发现是嵌入清单的问题,于是对该工程以及所有依赖工程 ...
- How to: Change icon in Inno Setup
1. Change the installer executable icon or the icon showed in Start Menu folder Using SetupIconFile ...
- HTML5之字体
- 使用CSS样式来定义 context.font = [CSS font property] context.font = [font-style font-variant font-weight ...
- mysql 之权限介绍
转自:http://tech.it168.com/a2010/0114/837/000000837456_all.shtml 一.MySQL授权表概述首先从全局开始,如果全局的是允许的,即在 user ...
- ASP.NET MVC概述
原文:http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview 这篇文章帮助你了解关于ASP.NET ...
- PHP生成订单号(产品号+年的后2位+月+日+订单号)
require '../common.inc.php'; /* * 产品号+年的后2位+月+日+订单数 * @param [Int] $prodcutId 产品号 * @param [Int] $tr ...
- 解决laravel中环境配置不起作用的方法
博客已经迁移到www.imyzf.com,本站不再更新,请谅解! laravel有个环境配置选项很好用,在bootstrap/start.php中,曾经百度到这里面加入域名,就可以自动选择环境 $en ...
- cms开发笔记2
1 创建数据库表 //配置文件CREATE TABLE IF NOT EXISTS `mc_config` ( `en_name` varchar(80) NOT NULL, `ch_name` va ...