JavaScript 曲线运动是以数学中的曲线为依据计算点位, 介绍以下几种形式:
1、sin曲线
公式:
y = sin x
javascript 计算方法
function path(t) { var tSpeed = 0.01, xMax = 6.5, multiple = 50; for(var i=0; i<xMax; i=i+tSpeed) { y = Math.sin(i); console.log(i*multiple, y*multiple+100) } }
2、二次方贝塞尔曲线
公式
B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
javascript 计算方法
function getBezierCoord(t,p1,p2,p3){ return ( p1 * Math.pow(1 - t,2) + 2 * p2 * t * Math.pow(1 - t,1) + p3 * Math.pow(t,2) ) }
3、三次方贝塞尔曲线
公式
B(t) = (1-t)³P0 + 3t(1-t)²P1 + 3t²(1-t)P2 + t³P3
javascript 计算方法
function getBezierCoord(t,p1,p2,p3,p4){ return ( p1 * Math.pow(1 - t,3) + 3 * p2 * t * Math.pow(1 - t,2) + 3 * p3 * (1 - t) * Math.pow(t,2) + p4 * Math.pow(t,3) ) }
tips:贝塞尔曲线绘制取点位连接 http://myst729.github.io/bezier-curve/
demo:https://github.com/seele0000/demo/blob/master/curvilinear-motion.html
参考链接:http://www.cnblogs.com/wxydigua/p/4204254.html