JavaScript曲线运动

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