白话KeySpline

核心提示：KeySpline用在使用Key-Frame机制的动画中，主要利用了贝塞尔曲线来让动画效果更加符合真实世界，白话KeySpline， 先简单介绍一下贝塞尔曲线，公式我就不说了，也就是说时间的变化是均匀的，但是大黑点已经走过的曲线的长度变化可不是均匀的，贝塞尔曲线由四个点决定一条曲线，通过几条贝塞尔曲线

KeySpline用在使用Key-Frame机制的动画中，主要利用了贝塞尔曲线来让动画效果更加符合真实世界。

先简单介绍一下贝塞尔曲线，公式我就不说了。贝塞尔曲线由四个点决定一条曲线，通过几条贝塞尔曲线，能够勾勒出任意复杂的物体的轮廓。

这四个点中其中两个是用来指明曲线的始末位置的，如下图中绿圈所示。另外两个点用来指明曲线的两个曲度，如下图的蓝圈所示。

其中始末位置点就不用介绍了，主要要看蓝圈所示的两个点，我们称为控制点（Control Point），左边这一点控制的是左半部分曲线的曲度，右边这个控制点控制的是右半部分曲线的曲度。通过调整这两个点，我们就可以勾勒出一些复杂而又美妙的曲线来了。OK，介绍完了贝塞尔曲线，来看一下他怎么应用到动画上面。

官方的文档对KeySpline的一段说明是这样的，在贝塞尔曲线越陡的地方，属性值变化越快，反之越慢。

（注意，KeySpline中我们只能并且只需控制的是两个控制点的位置，始末点已经被固定在（0，0）和（1，1）了）。

我们可以这样来理解，因为SL的动画无非就是对属性值设置一个初值一个末值，然后SL就会自动帮你对该属性应用从初值到末值。这样就实现了"动"的效果了。我们把上面这个图中的横坐标长度（固定是1）看做是整个值变化的时间长度的缩放（如动画延续3秒，那么横坐标的0.5就对应1.5秒），而整条贝塞尔曲线的曲线长度视作是值变化的范围，如值从20变化到100，值的长度是80，对应的曲线长度假设说是8个单位。

SL执行动画的过程你可以看做是有一根竖线从（0，0）移动到（1，0），上面有一个大黑点从曲线的起点沿着曲线运动到曲线结束点。横坐标的变化是均匀的，也就是说时间的变化是均匀的，但是大黑点已经走过的曲线的长度变化可不是均匀的，这个长度变化速度反应的就是属性值的变化速度。

希望这样讲大家能够理解~