缓动公式整理
一、WPF中的缓动效果
在WPF中,共有11种:Back,Bounce,Circle,Quadratic,Cubic,Quartic,Quintic,Elastic,Exponential,Sine,Power。不过严格来说只有7种,因为Quadratic,Cubic,Quartic,Quintic是由Power去实现的,由于Power参数未定,所以仅实现前10种效果。
所以对于每个缓动效果而言,都有三种模式:缓入(EaseIn)、缓出(EaseOut)、缓入缓出(EaseInOut)。
二、公式与动画
一个元素的动画效果,其实就是这个元素变化的快慢,也就是速度。速度与时间间隔和该时间间隔内运动距离两个变量有关。在实际实现中,时间间隔是相等的,那么速度的变化与距离的变化就成正比。在一个二维坐标当中,横坐标为时间,纵坐标为距离,那么其形成的曲线中,曲线越陡,速度越快,曲线越平缓,则速度越慢。
而我们使用公式的目的,就是取得这个纵坐标的值。
不过,要注意的是,我们获取的曲线的时间范围是:0~1,这不是具体的1秒或1毫秒,而是“单位1”。举例来说,如果一个动画效果时长是2000ms,那么在第x ms时,对应的单位时间就是x/2000。
三、缓动公式、缓动效果、与WPF对比
1,Back
曲线(图源自MSDN):
1.1,曲线公式
Back
1.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
1.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
2,Bounce
曲线(图源自MSDN):
2.1,曲线公式
Bounce
2.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
2.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
3,Circle
曲线(图源自MSDN):
3.1,曲线公式
Circle
3.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
3.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
4,Quadratic
曲线(图源自MSDN):
4.1,曲线公式
Quadratic
4.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
4.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
5,Cubic
曲线(图源自MSDN):
5.1,曲线公式
Cubic
5.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
5.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
6,Quartic
曲线(图源自MSDN):
6.1,曲线公式
Quartic
6.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
6.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
7,Quintic
曲线(图源自MSDN):
7.1,曲线公式
Quintic
7.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
7.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
8,Elastic
曲线(图源自MSDN):
8.1,曲线公式
Elastic
8.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
8.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
9,Exponential
曲线(图源自MSDN):
9.1,曲线公式
Exponential
9.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
9.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
10,Sine
曲线(图源自MSDN):
10.1,曲线公式
Sine
10.2,WinForm效果
a,EaseIn:
b,EaseOut:
c,EaseInOut:
10.3,WPF效果
(上面矩形为WPF原版缓动效果,下面矩形为公式实现效果)
a,EaseIn:
b,EaseOut:
c,EaseInOut:
四、结束语
通过上面的动图我们会发现,其中一些效果,使用公式生成的与WPF原版的是不一样的,一是因为WPF原版的曲线不是固定的,还有其他参数去调控,而我对比的时候使用的是WPF默认的缓动效果;二是因为一像Bounce、Elastic等曲线以我的能力很难扒出来具体的公式,所以更多的是依照文首的Github上那个项目中的公式。所以难免有所差异。
同时,写本篇文章是因为在之后的自定义控件系列文章,以及其他涉及图形的文章中,会频繁的使用缓动效果以增强直观感受,到时文章中会引用本文所生成的类库,当然也会随文附上缓动公式。
五、源代码下载
源代码包含:
1,缓动类库
2,WinForm演示
3,WPF演示