理解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)表示动画目标对象属性,曲线表示其动画轨迹效果,不同的时间段,对象属性不同。

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

上图BackEase动画效果,是属性变化前,先向相反的方向变化,然后随着时间的增加,属性而增加。例如,一个按钮,宽度由小变大,应用该效果后,按钮会先变小,然后迅速宽度变大。而上图f(t)则表示按钮的宽度,t表示时间,蓝色的曲线表示按钮宽度的变化过程,

根据以上的原理,我们来逐一学习一下微软提供的11种Animation Easing(缓冲动画)。在调用前需要了解以下几点:

1. 要调用默认的11种Animation Easing(缓冲动画)首先需要引用System.Windows.Media.Animation命名空间;

2. 由于这11中Animation Easing(缓冲动画)都是继承自同一个基类EasingFunctionBase,所以,都有EasingMode属性,也就是说都可以应用于EaseIn,EaseOut和EaseInOut;

3. Animation Easing(缓冲动画)是运用在帧动画基础上,在使用前,需要调用动画对象的EasingFunction属性。由于EasingFunction属性每次只能被一个Animation Easing(缓冲动画)调用,所以,不能将多个Animation Easing(缓冲动画)效果添加到同一个动画对象中,这点较重要,需要谨记。

对于11种Animation Easing(缓冲动画)效果,好友蝈蝈俊曾经详细介绍过,个人认为解释的恰到好处,容易理解,这里,我直接引用过来,另外,我补充了部分Easing动画的属性说明。(蝈蝈俊的Easing介绍原文)。

倒退缓冲(BackEase):让动画在继续之前往后退一点。这有点象在斜坡上启动汽车,会往后倒退一点然后才前进。 在BackEase中,有一个"Amplitude"属性,该属性可以简单理解为扩展宽度,也就是说动画继续之前往后退的宽度,默认设置为1,随着值的增加,倒退宽度也就越大。 弹跳缓冲(BounceEase):有弹回效果的动画,类似我们前面提到的篮球落下,弹起,再落下,即弹跳反冲。 该效果中包含两个属性,"Bounces"是表示弹跳几次,"Bounciness"是表示弹跳的速度,越大会越慢。 圆缓冲(CircleEase):创建使用循环函数加速和/或减速的动画。 基于三角函数(圆函数)来加速动画,一开始的加速度比较慢,越往后加速度越快。 立方体缓冲(CubicEase):创建使用公式 加速和/或减速的动画。 与圆缓冲类似,但是是基于立方体函数的时间来产生一个一开始加速度较慢然后越来越快的动画。 伸缩缓冲(ElasticEase):创建表示弹簧在停止前来回振荡的动画。类似于弹跳缓冲(BounceEase),它会让一个值摆动直到停下为止。 该效果包含两个属性,"Oscillations"表示伸缩的次数,"Springiness"表示伸缩的速度. 指数缓冲(ExponentialEase):创建使用指数公式加速和/或减速的动画。类似于圆缓冲和立方体缓冲,只是加速度的值是按照指数来变化的。 该效果包含属性"Exponent",代表指数,越大效果越慢。 乘方缓冲(PowerEase):创建使用公式    (其中,p 等于 PowerEase.Power  属性)加速和/或减速的动画。这是一种指数缓冲,缓冲的值与时间的乘方成比例。 该效果有一个"Power"属性,表示时间t的指数,如果Power=2,则和平方缓冲动画相同效果;Power=3则和立方体缓冲动画效果相同,依次类推. 平方缓冲(QuadraticEase):创建使用公式    加速和/或减速的动画。非常类似于CubicEase,除了在这个缓冲中,值是基于时间的平方。 四次方缓冲(QuarticEase):创建使用公式    加速和/或减速的动画。类似于Cubic和Quadratic,只是值是基于时间的立方。 五次方缓冲(QuinticEase):创建使用公式    加速和/或减速的动画。类似于Cubic、Quadratic和Quartic,值基于时间的五次方。 正弦缓冲(SineEase):创建使用正弦公式加速和/或减速的动画。沿着正弦波来对值进行加速。

WPF -- 动画 (缓冲动画)相关推荐

  1. WPF中的动画——(二)From/To/By 动画

    原文:WPF中的动画--(二)From/To/By 动画 我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimati ...

  2. WPF中的动画——(二)From/To/By 动画(二)

    WPF中的动画--(二)From/To/By 动画 我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimation ...

  3. WPF 故事板动画示例

    WPF做动画比较方便: Storyboard和Animation,你只要指定一些属性值,比如开始值和结束值.由开始值到达结束值所需的时间.需要动画的属性,便可形成一个简单的动画. 可以在xaml代码里 ...

  4. WPF中的动画——(一)基本概念

    原文:WPF中的动画--(一)基本概念 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每 ...

  5. 【WPF学习笔记】[转]周银辉之WPF中的动画 晓风影天之wpf动画——new PropertyPath属性链...

    (一)WPF中的动画 动画无疑是WPF中最吸引人的特色之一,其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互.这里我们讨论一下故事板. 在WPF中我们采用Storyboard(故事板)的方式 ...

  6. WPF特效-粒子动画

    原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果. /// -Ball to Ball Collision - Detection and Handling     /// http://sta ...

  7. WPF中的动画——(三)时间线(TimeLine)

    WPF中的动画--(三)时间线(TimeLine) 原文:WPF中的动画--(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重 ...

  8. DOM实现元素拖拽,滚轮事件和特效动画缓冲运动处理

    目录 元素拖拽实现(点击拖动可视屏幕任意位置) DOM滚轮事件处理 滚轮事件绑定 滚轮事件方向 滚轮事件兼容 滚轮缩放图片案例实现 特效动画 缓冲运动 单向缓冲运动 反复缓冲运动 简单的封装 透明度处 ...

  9. 【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )

    文章目录 ◯.AnimatedBuilder 引入 一.创建动画控制器 二.创建动画 三.创建动画作用的组件 四.创建 AnimatedBuilder 关联动画与组件 五.动画运行 六.完整代码示例 ...

最新文章

  1. 【ArrayList】为什么java.util.concurrent 包里没有并发的ArrayList实现?
  2. amd一点也不yes_AMD, 真的YES吗?
  3. VS中添加lib文件,编译出错:LINK : fatal error LNK1104: 无法打开文件:×××.lib解决办法
  4. Linux中如何将文件dump成16进制值
  5. JSTL1.1函数标签库(functions)如fn:length
  6. matlab图像的腐蚀和膨胀_OpenCV图像处理系列八 --- 腐蚀与膨胀
  7. Pandas直接读取arff格式的文件,这种需求还是头一次碰到!
  8. 计算机模拟专业,2017年数值模拟专业知识题库
  9. 依赖注入参考文章(1)
  10. 华为智慧屏云会议怎么操作_像玩手机一样玩转车机,华为智选车载智慧屏是怎么做到的?...
  11. python 文件写入多个参数_如何将多个参数写入txt文件(字符串和变量)
  12. 小爱同学app安卓版_小爱同学app下载安卓版|语音助手下载_最火软件站
  13. 离散数学耿素云计算机,离散数学,屈婉玲,耿素云,张立昂编著_考研教材_考试点...
  14. 余承东说华为OS操作系统最快今秋面市,真的能承受之重吗??
  15. 亚马逊后台付款表(Custom Transaction)详解
  16. openbsd停止mysql_英特尔处理器超线程功能被OpenBSD 停用,并爆bug
  17. winedit注册码
  18. python心率检测
  19. 服务器基础知识(二)
  20. python 傅里叶变换_理解快速傅里叶变换算法

热门文章

  1. 网络工程师必读——网络工程基础 王达
  2. c语言中读取flash值的作用,flash读写程序
  3. JAVA版服务器皮肤,给Java的Swing应用程序界面换漂亮的皮肤
  4. 【Shader】用两张贴图实现角色模型眨眼动作
  5. SYNOPSYS™业余望远镜2
  6. 中国有机棉产业现状调研与投资前景预测分析报告2022-2028年
  7. 详细版【全连接前馈神经网络】(邱锡鹏)
  8. 财富赢家模拟炒股最新版分享,股市小散的利器
  9. 微信小程序开发 Day08
  10. ubuntu14.04 安装wine qq