先简单介绍下贝塞尔曲线公式我就不说了贝塞尔曲线由 4个点决定条曲线通过几条贝塞尔曲线能够勾勒出任意复杂物体轮廓
这 4个点中其中两个是用来指明曲线始末位置如下图中绿圈所示另外两个点用来指明曲线两个曲度如下图蓝圈所示
其中始末位置点就不用介绍了主要要看蓝圈所示两个点我们称为控制点(Control Po)左边这点控制是左半部分曲线曲度右边这个控制点控制是右半部分曲线曲度通过调整这两个点我们就可以勾勒出些复杂而又美妙曲线来了OK介绍完了贝塞尔曲线来看下他如何应用到动画上面
官方文档对KeySpline段介绍说明是这样在贝塞尔曲线越陡地方属性值变化越快反的越慢
(注意KeySpline中我们只能并且只需控制是两个控制点位置始末点已经被固定在(00)和(11)了)
我们可以这样来理解SL动画无非就是对属性值设置个初值个末值然后SL就会自动帮你对该属性应用从初值到末值这样就实现了"动"效果了我们把上面这个图中横坐标长度(固定是1)看做是整个值变化时间长度缩放(如动画延续3秒那么横坐标0.5就对应1.5秒)而整条贝塞尔曲线曲线长度视作是值变化范围如值从20变化到100值长度是80对应曲线长度假设说是8个单位
SL执行动画过程你可以看做是有根竖线从(00)移动到(10)上面有个大黑点从曲线起点沿着曲线运动到曲线结束点横坐标变化是均匀也就是说时间变化是均匀但是大黑点已经走过曲线长度变化可不是均匀这个长度变化速度反应就是属性值变化速度
希望这样讲大家能够理解~
最新评论