写这篇文章之前首先一定要释放自己的吐槽能量，即上个礼拜使用webpack重构了jQuery实现了后端技术做前后台分离后的项目之后，这周又开始原vue的项目迁移成react项目，为什么要这么做，mmp这就是我的答案，此时此刻只想找自己去淋雨，身为一个前端工程师angular vue react 会一个我觉得就可以了可我连踩三坑，我内心没有丝毫成就感可言，走的快扯着蛋，做重复性的工作。
接下才是整体贝塞尔曲线是什么，是几何图形算法，现代计算机绘图最常用的绘图算法这个UI工程师一般不会陌生，ps的钢笔工具绘制连续曲线考得就是贝塞尔三阶函数算法，比较专业的工程绘图软件比如proe cad 绘制3d曲线也是离不开，安卓手机拉倒底部再往上拉就会出现一条曲线就是贝塞尔曲线，同时也可以用来用于运动描述比较常见的动画类库使用的算法基本逃不开。
看公式
百度百科无所不知就是写文档写的太学术了，反正我第一次看是没看懂，大约和我的数学水平大概只有初中有关（可能我初中水平都比现在高），连对其中最重要的参数解释都没有，首先是时P这个形参，他表示数学中的向量（还好我初中学过，要是高中我就只能呵呵了） t表示的是取值范围在0~1之间的 比例，为什么说事比例呢因为贝塞尔曲线就是将多个点依次连起来，然后每个线段在相同比例下取一个点，在连这些点，再在这些点的基础上连线，一直连到只有一条线段是取这个比例上的点，说的有点绕你最好自己连一下假如你无聊的话，假如你更无聊可以在0到1这个范围内多取几个让我翻译的话大概三阶函数这么写
（x,y）=(x0,y0)(1-t)^3+3*(x1,y1)*(1-t)^2+3*(x2,y2)*t^2*(1-t)+(x3,y3)*t^3
x=x0*(1-t)^3+3*x1*(1-t)^2+3*x2*t^2*(1-t)+x3*t^3
y=y0*(1-t)^3+3*y1*(1-t)^2+3*y2*t^2*(1-t)+y3*t^3
这个时候一般来说只要p0,p1,p2是固定的 给t 赋值就能绘制一个在平面上的贝塞尔点，多赋值几个就能绘制一条连续的比塞尔曲线，以后只要你想使用canvas绘图直接套用就行，这个既可以画出一个贝塞尔曲线，也可以一个画一个在贝塞尔线上运动的点当然这只是几何概念，物理学上的描述运动的快慢用v 时间用t 距离用s加速度用a (还好我上过初中) 在坐标图上就是斜率，而使用贝塞尔既可以描述匀速直线运动，也可以描述变加速直线用的
大概是这样
a=△s/△t
在这里△s就是y△t就是x,然后我们就可以用来描述运动了
△s=s0*(1-t)^3+3*s1*(1-t)^2+3*s2*t^2*(1-t)+s3*t^3
这样我们就能得到一条比较平滑的运动曲线，不会尖尖的那种然后就是放代码
const FPS=45,point =new Object
const canvas=document.getElementByID('canvas')
const ctx=canvas.getContext('2d')
point.START={x:0,y:0}
point.END={x:200,y:200}
point.speed=0.0043
point.MIDDLEOND={x:0，y:100}
point.MIDDLETWO={x:200,y:100}
point.t=0
let timer=window.setInterval(()=>{
cal()
render()
},1000/FPS)
cal=()=>{
point.t=point.t+point.speed
if(point.t==1){
window.clearInterval(timer)
}
if(point.t>1){
point.t=1
}
}
render=()=>{
let p=beziel
ctx=arc(p.x,p,y,5,0,2*Maht.PI)
ctx.fill()
}
beziel=()=>{
var p0,p1,p2,p3,t
po=point.START
p1=point.MIDDLEOND
p2=point.MIDDLETWO
p3=point.END
t=point.t
y=p0.x*(1-t)^3+3*p1.x*(1-t)^2+3*p2.x*t^2*(1-t)+p3.x*t^3
y=p0.y*(1-t)^3+3*p1.y*(1-t)^2+3*p2.y*t^2*(1-t)+p3.y*t^3
return {x:x,y:y}
}
至此我们判断一个运动的完成只需要判断t是否大于等于1就行了 唔需其他判断条件
