首页 > 代码库 > WPF——动画

WPF——动画

本文目录

  前言

  1、线性插值动画

  2、关键帧动画

  3、路径动画

前言

  使用动画,是增强用户体验的一种有效的手段。合理的动画,可以让应用程序的界面看起来更加自然、真实、流畅、舒适,更有效地向用户展现信息,用户也更容易接受。同时也增加了软件使用的乐趣,提高用户粘度。(如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="50" Width="220" Foreground="#326939" FontSize="36" Name="textBlock1" Text="文字淡入效果"/>

  CS  

DoubleAnimation da = new DoubleAnimation();da.From = 0;    //起始值da.To = 1;      //结束值da.Duration = TimeSpan.FromSeconds(3);         //动画持续时间this.textBlock1.BeginAnimation(TextBlock.OpacityProperty, da);//开始动画

  

示例2:利用 ThicknessAnimation ,实现元素平移效果。

  XMAL

<TextBlock Height="50" Foreground="#326939" Margin="0,100,0,0" FontSize="36" Name="textBlock1" Text="文字平移"/>

  CS

//文字平移,Margin属性是Thickness类型,选择ThicknessAnimationThicknessAnimation ta = new ThicknessAnimation();ta.From = new Thickness(0, 100, 0, 0);             //起始值ta.To = new Thickness(240, 100, 0, 0);        //结束值ta.Duration = TimeSpan.FromSeconds(3);         //动画持续时间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="32" Width="0" Background="#326939"  Name="border1"/>

CS

//Border长度关键帧动画DoubleAnimationUsingKeyFrames dak = new DoubleAnimationUsingKeyFrames();//关键帧定义dak.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));dak.KeyFrames.Add(new LinearDoubleKeyFrame(240, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))));dak.KeyFrames.Add(new LinearDoubleKeyFrame(240, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6))));dak.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(9))));            dak.BeginTime = TimeSpan.FromSeconds(2);//从第2秒开始动画dak.RepeatBehavior = new RepeatBehavior(3);//动画重复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="360" Width="480">    <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="30" Stroke="#ddd" Data="{StaticResource path}"></Path>        <!--动画元素-->        <Image Name="image" Source="me.png" Width="48" Height="48" />    </Canvas></Window>

  我的头像将沿着曲线路径进行移动,由于RepeatBehavior属性设置为Forever,则动画将无限循环。

WPF——动画