首页 > Silverlight, 技术随笔 > 白话KeySpline

白话KeySpline

Silverlight, 技术随笔

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

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

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

clip_image002[4]

其中始末位置点就不用介绍了,主要要看蓝圈所示的两个点,我们称为控制点(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),上面有一个大黑点从曲线的起点沿着曲线运动到曲线结束点。横坐标的变化是均匀的,也就是说时间的变化是均匀的,但是大黑点已经走过的曲线的长度变化可不是均匀的,这个长度变化速度反应的就是属性值的变化速度。

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

clip_image004

本博客遵循CC协议2.5,即署名-非商业性使用-相同方式共享
写作很辛苦,转载请注明作者以及原文链接~
如果你喜欢我的文章,你可以订阅我的博客:-D点击订阅我的文章

  1. X﹏X 到现在还没有评论~
  1. 暂时没有trackbacks.