贝塞尔曲线

原创 greenhand 随笔 页面效果 167阅读 2018-01-25 18:27:50 举报

贝塞尔曲线公式的推导和简单使用

如何使用Tween.js各类原生动画运动缓动算法

缓动函数

http://cubic-bezier.com/

这里的公式是x,y坐标相对于移动比例(或者说时间)的函数。(而我们的动画函数是y坐标相对于x坐标的函数,所以不能直接用下面的公式来做动画函数。三个变量,两个方程式,理论上是可以得出y相对于x的函数的。)
因为每个点都是在直线上移动,所以x,y坐标都是按相同的比例在变换,所以导出的公式针对x,y坐标都是一样的。
即当计算x坐标时,P0,P1,P2,P3表示四个点的x坐标,当计算y坐标时,P0,P1,P2,P3表示四个点的y坐标。

贝塞尔曲线

通用公式如下

贝塞尔曲线

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复