Expression Blend实例中文教程（10） - 缓冲动画快速入门Easing

Expression Blend实例中文教程（10） - 缓冲动画快速入门Easing2011-08-12 博客园 jv9随着Rich Internet application（RIA）应用技术的发展，各个公司越来越注重于项目的用户体验性，在保证其功能完善，运行稳定的基础上，绚丽的UI和人性化的操作设计会给用户带来舒适的体验效果。前文我们学习了Blend设计简单的动画，可以使用StoryBoard快速创建一个动画效果，但是该动画效果看起来缺乏自然效果，让用户感觉太过机械化，大大的降低了用户体验性。为了是动画更为人性化，看起来更自然化，我们可以通过以下两个方式来解决：

方法1. 使用前文所提及的，帧动画技术，为了是动画更自然化，可以在动画的关键细节中添加更多的帧，缩短每帧之间间隔效果，这样可以提高动画效果，但是，对于大型项目来说，这样的设计会耗费很多的精力设计，在项目完成后，项目维护相对复杂，一旦设计有所改动，需要全面修改其动画效果代码，所以，相对来说，该方法不太实用；

方法2. 在Silverlight 3中，微软推出一个新的功能-Animation Easing，也称为缓冲动画。微软将 11种常用的动画效果封装，开发人员和设计人员可以轻松调用，通过Animation Easing创建更自然化的动画效果。本文将详细介绍Animation Easing缓冲动画的入门知识，以及如何使用Blend设计Easing。

理解Animation Easing（缓冲动画）

在Silverlight中每个功能都会继承自不同的基类，实现不同的功能效果，Animation Easing（缓冲动画）也是一样，继承自EasingFunctionBase基类，在该类中，提供了一个属性EasingMode，通过该属性可以控件缓冲动画效果模式。Animation Easing（缓冲动画）效果模式被封装成一个枚举类型，分别是 EaseIn,EaseOut,EaseInOut.Animation Easing（缓冲动画）的效果模式是一个重要的概念，该属性直接决定Animation Easing（缓冲动画）会在什么时候产生效果。这里我不想用过于官方的解释来说明这三种模式，根据我的使用体验，用自己的语言描述一下这三种动画模式的概念，EaseIn, 简单的可以理解为将该缓冲动画效果应用在动画实例开始，也就是一开始动画，马上执行该Animation Easing（缓冲动画）效果；

EaseOut，简单的可以理解为将该缓冲动画效果应用在动画实例结束，也就是要结束动画前，马上执行该Animation Easing（缓冲动画）效果；

EaseInOut，简单的可以理解为将动画的全过程平均分为两部分，该缓冲动画效果应用在第一部分，分别将 EaseIn应用在第一部分的开始，EaseOut应用在第二部分的结束。例如，有个10秒的动画，被应用 EaseInOut模式，Silverlight会将该动画平分为两个5秒的动画，将EaseIn应用在第一个5秒动画的开始，然后将EaseOut在第二个5秒动画结束前应用。

对于三个效果模式的理解，我们将在后文实例中进行演示说明，这里仅需先对Animation Easing（缓冲动画）有个基础概念。作为软件设计人员和开发人员，应该都明白，所谓的动画效果，其实是计算机对于图形运行轨迹的计算不同，所产生的不同的视觉效果。而Animation Easing（缓冲动画）也是同理，在微软提供的11种Animation Easing（缓冲动画）动画中，运行了11个不同的方程式,从而产生11种动画效果。为了随后更好的理解这11种Animation Easing（缓冲动画）效果，首先需要了解一下最基础的方程式，通过方程式图形，可以大概明白动画运行效果。

上图的t是表示时间，而f（t）表示动画目标对象属性，曲线表示其动画轨迹效果，不同的时间段，对象属性不同。

看个例子说明，方程式图形效果，