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类型，选择ThicknessAnimation
ThicknessAnimation 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，则动画将无限循环。

时间： 2024-10-05 07:00:51

WPF——动画的相关文章

WPF动画 storyboard

<Window x:Class="StoryBoard.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width=&qu

[WPF] 动画Completed事件里获取执行该动画的UI对象

原文:[WPF] 动画Completed事件里获取执行该动画的UI对象 昨天群里有位童鞋提出如何在动画完成事件Completed里获取到执行该动画的UI对象. WPF里动画的Completed的本身并不会返回执行动画的UI对象,但我们可以利用附加属性Storyboard.TargetProperty来达到我们想要的效果. 步骤: 1 在执行动画前,先附加属性记录对象 DoubleAnimation ani = new DoubleAnimation(); ani.From = start; an

扩展 WPF 动画类

原文:扩展 WPF 动画类 扩展 WPF 动画类                                                                     Charles Petzold                                                                     http://msdn.microsoft.com/msdnmag/issues/07/07/Foundations/Default.aspx?l

【WPF学习】第四十八章 理解WPF动画

在许多用户框架中(特别是WPF之前的框架,如Windows窗体和MFC),开发人员必须从头构建自己的动画系统.最常用的技术是结合使用计时器和一些自定义的绘图逻辑.WPF通过自带的基于属性的动画系统,改变了这种情况.接下来的两节将描述这两者之间的区别. 一.基于时间的动画 假如需要旋转Windows窗体应用程序中的About对话框中的一块文本.下面是构建该解决方案的传统方法: (1)创建周期性触发的计时器(例如,每隔50毫秒触发一次). (2)当触发计时器时,使用事件处理程序计算一些与动画相关的细

WPF动画制作简单的按钮动画

主界面的代码 <StackPanel ButtonBase.Click="Grid_Click"> <Button Content="逐渐变大缩小"/> <Button Content="鼠标移动特效" /> </StackPanel> cs : //这事件不做过多的解释有基础的一看就会明白 private void Grid_Click(object sender, RoutedEventArgs

WPF 动画

动画的基础 动画是WPF的核心部分,随着对窗体程序体验的要求增加,动画表现越来越重要,WPF天生就是基于图形的,所以天生具有动画的基因,我们常说的动画,无非就三种方式实现: 逐帧动画 逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画.这就和我们的动画片的原理差不多,假如做过FLASH的人,估计对这个比较熟悉. 线性插值 线性插值,也就是给定初始点集合和终止点集合,然后给

WPF动画 - Loading加载动画

存在问题: 最近接手公司一个比较成熟的产品项目开发(WPF桌面端),其中,在登陆系统加载时,60张图片切换,实现loading闪烁加载,快有密集恐惧症了!!! 代码如下: private void LoadPics() { try { _storyboard = new Storyboard(); for (int i = 0; i < 60; i++) { ObjectAnimationUsingKeyFrames oauf = new ObjectAnimationUsingKeyFrame

# WPF动画速率效果

在WPF中使用动画的情况非常多,而要让动画变得生动往往要使用一些变速动画,WPF也内置了很方便的缓动函数来实现这一功能. 除此之外,WPF还有关键帧动画,利用关键帧动画能够很好的控制动画的细节,与美工的很多设计保持完美一致.关键帧动画中还有一套叫做样条关键帧动画(SplineKeyFrame),这个动画利用一个三次贝塞尔曲线能够更准确的控制动画的速率. 不同的缓动函数光看名字很难知道实际效果,样条关键帧动画的贝塞尔曲线控制也很难直观的看到效果,于是写了个小工具来展现不同的动画速率的效果以及修改配

WPF动画2

上一节介绍的动画,我们是使用代码实现基本的动画,每个动画类,都有几个基本的元素,我们追溯到类的根源,我们可以看到,这些动画类有一个共同的基类timeline抽象类,我们看看他们的继承关系: 从图中可以看到,所有的动画类都继承自Timeline抽象类,但在Timeline类的子类有三个分支,我们前面讲的所有动画类是中间这个分支,而左边这个分支将是我们讲解的重点.TimelineGroup分支允许同步时间线,并控制他们的播放.它有个重要的类StoryBoad故事板,故事板是BeginAnimatio