前言

  使用动画,是增强用户体验的一种有效的手段。合理的动画,可以让应用程序的界面看起来更加自然、真实、流畅、舒适,更有效地向用户展现信息,用户也更容易接受。同时也增加了软件使用的乐趣,提高用户粘度。(如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编程学习——动画的更多相关文章

  1. WPF编程学习——样式

    本文目录 1.引言 2.怎样使用样式? 3.内联样式 4.已命名样式 5.元素类型样式 6.编程控制样式 7.触发器 1.引言 样式(Style),主要是用来让元素或内容呈现一定外观的属性.WPF中的 ...

  2. WPF编程学习 —— 样式

     本文目录 1.引言 2.怎样使用样式? 3.内联样式 4.已命名样式 5.元素类型样式 6.编程控制样式 7.触发器 1.引言 样式(Style),主要是用来让元素或内容呈现一定外观的属性.WPF中 ...

  3. WPF编程学习——布局

    本文目录 1.布局简介 2.面板(Panel) 3.视图框(Viewbox) 4.滚动视图控件(ScrollViewer) 5.公共布局属性 1.布局简介 应用程序界面设计中,合理的元素布局至关重要, ...

  4. WPF编程学习——窗口

    转自 http://www.cnblogs.com/libaoheng/archive/2011/11/18/2253751.html 本文目录 1.窗口的外观 2.窗口的位置 3.窗口的大小 4.窗 ...

  5. WPF编程学习——样式(好文)

    http://www.cnblogs.com/libaoheng/archive/2011/11/20/2255963.html

  6. 【Visual C++】游戏编程学习笔记之四:透明动画实现

    本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44224963 作者:ZeeCod ...

  7. 【Visual C++】游戏编程学习笔记之六:多背景循环动画

    本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44264153 作者:ZeeCod ...

  8. WPF编程,通过Path类型制作沿路径运动的动画一种方法。

    原文:WPF编程,通过Path类型制作沿路径运动的动画一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/de ...

  9. WPF编程,通过Path类型制作沿路径运动的动画另一种方法。

    原文:WPF编程,通过Path类型制作沿路径运动的动画另一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/d ...

随机推荐

  1. WPF FileFolderDialog 和弹出子窗口的一些问题

    摘要:本文主要是WPF中 FileFolderDialog的相关问题,补充了关于在父窗口弹出子窗口,以及子窗口的相关属性(Data Binding)和命令绑定(Delegate Command)问题, ...

  2. 九度OJ 1349 数字在排序数组中出现的次数 -- 二分查找

    题目地址:http://ac.jobdu.com/problem.php?pid=1349 题目描述: 统计一个数字在排序数组中出现的次数. 输入: 每个测试案例包括两行: 第一行有1个整数n,表示数 ...

  3. 建造者模式(Builder Pattern)

    建造者模式:使用多个简单对象一步步构建成一个复杂的对象. 有时候,我们会创建一个“复杂”的对象,这个对象的由很多子对象构成,由于需求的变化,这个对象的各个部分经常面临剧烈的变化. 继续工厂模式的披萨店 ...

  4. IE10访问Apache2.4卡死的问题

    windows环境下,使用IE10访问Apache2.4时,服务器经常卡死 找到EnableSendfile on,在下一行添加如下配置解决: AcceptFilter http none Accep ...

  5. Python3 面向对象 高级编程

    正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.  class Student(object): pass 然后,尝试 ...

  6. Oracle 关于定义约束 / 修改表结构 /修改约束

    ---约束分5种:主键 外键 唯一 非空 检查5类约束 Oracle中分列级别约束 与 表级别约束 列级别约束:在创建表时再列上面加约束 例如: create table table11( stuno ...

  7. 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...

  8. NetBeans中文乱码解决办法

    一.Windows下NetBeans中文乱码解决办法 找到你的Netbeans安装目录下的etc文件夹,用记事本打开netbeans.conf,找到netbeans_default_options(不 ...

  9. 002.TPerlRegEx简单测试

    我要做什么? 将一个字符串中的所有连续的数字替换成一个* 代码: program Project1; {$APPTYPE CONSOLE} uses System.SysUtils, PerlRegE ...

  10. linux管道的容量和内部组织方式

    1.管道容量  count=65536,即64KB #include<stdio.h> #include<sys/types.h> #include<unistd.h&g ...