? ? ? ?寫這篇文章之前首先一定要釋放自己的吐槽能量，即上個禮拜使用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就行了 唔需其他判斷條件
