本文是看了志佳老師的公開課學習的，**模仿淘寶的加入購物車動畫**，實現貝塞爾曲線運動的動畫路徑效果,如下所示。
#前沿：
1.貝塞爾曲線原理：https://blog.csdn.net/cdnight/article/details/48468653
貝塞爾曲線在 web 開發領域同樣佔有一席之地。CSS3 新增了 transition-timing-function 屬性，它的取值就可以設定為一個三次貝塞爾曲線方程。在此之前，也有不少 JavaScript 動畫庫使用貝塞爾曲線來實現美觀逼真的緩動效果。
下面我們就通過例子來了解一下如何用 de Casteljau 演算法繪製一條貝塞爾曲線。
在平面內任選 3 個不共線的點，依次用線段連線。
在第一條線段上任選一個點 D。計算該點到線段起點的距離 AD，與該線段總長 AB 的比例。
根據上一步得到的比例，從第二條線段上找出對應的點 E，使得 AD:AB = BE:BC。
連線這兩點 DE。
從新的線段 DE 上再次找出相同比例的點 F，使得 DF:DE = AD:AB = BE:BC。
到這裡，我們就確定了貝塞爾曲線上的一個點 F。接下來，請稍微回想一下中學所學的極限知識，讓選取的點 D 在第一條線段上從起點 A 移動到終點 B，找出所有的貝塞爾曲線上的點 F。所有的點找出來之後，我們也得到了這條貝塞爾曲線。
如果你實在想象不出這個過程，沒關係，看動畫！
回過頭來看這條貝塞爾曲線，為了確定曲線上的一個點，需要進行兩輪取點的操作，因此我們稱得到的貝塞爾曲線為二次曲線（這樣記憶很直觀，但曲線的次數其實是由前面提到的伯恩斯坦多項式決定的）。
當控制點個數為 4 時，情況是怎樣的？
步驟都是相同的，只不過我們每確定一個貝塞爾曲線上的點，要進行三輪取點操作。如圖，AE:AB = BF:BC = CG:CD = EH:EF = FI:FG= HJ:HI，其中點 J 就是最終得到的貝塞爾曲線上的一個點。
這樣我們得到的是一條三次貝塞爾曲線。
看過了二次和三次曲線，更高次的貝塞爾曲線大家應該也知道要怎麼畫了吧。那麼比二次曲線更簡單的一次（線性）貝塞爾曲線存在嗎？長什麼樣？根據前面的介紹，只要稍作思考，想必你也能猜出來了。哈！就是一條直線~
能畫曲線也能畫直線，是不是很厲害？要繪製更復雜的曲線，控制點的增加也僅僅是線性的。這一特點使其不光在工業設計領域大展拳腳，就連數學基礎不好的人也可以比較容易地掌握，比如大多數平面美術設計師們。
上面介紹的內容並不足以展示貝塞爾曲線的真正威力。推廣到三維空間的貝塞爾曲面，以及更進一步的非均勻有理 B 樣條（NURBS），早已成為當今計算機輔助設計（CAD）的行業標準，不論是我們平常用到的各種產品，還是在電影院看到的精彩大片，都少不了它們的功勞。
2.貝塞爾曲線演示網站： http://cubic-bezier.com
我們可以在這個網站自己拖動檢視不同引數下，三階貝塞爾曲線的運動速率效果
#思路
將目標物件（本文為一個足球圖片）包在兩個div中，足球img標籤放在最內層裡；
內外兩層分別從橫向和縱向兩個方向設定好div的動畫，運動時間設定相同則可以出現二維的運動動畫效果，理論上可以實現很多複雜的曲線效果。
#原始碼：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端使用貝塞爾曲線實現移動曲線動畫</title>
<style>
:root{
--main: 200px;
}
.item{
width: var(--mian);
height: var(--mian);
position: absolute;
top: 50px;
left: 20px;
background-color: #00aa00;
border-radius: 50%;
}
.wraper{
animation: ver-animation 2s 0.5s 2;
animation-timing-function: cubic-bezier(0.06, .46, 0, 1.04)
}
.wraper .item{
animation: hor-animation 2s linear .5s 2;
}
@keyframes hor-animation{
0%{
transform: translateX(0px)
}
100%{
transform: translateX(400px)
}
}
@keyframes ver-animation{
0%{
transform: translateY(0px)
}
100%{
transform: translateY(400px)
}
}
</style>
</head>
<body>
<!-- 垂直運動 -->
<div class="wraper">
<!-- 水平運動 -->
<div class="item">
<img src="./images/ball.jpg" style="width:50px;"/>
</div>
</div>
</body>
<script>
</script>
</html>
```
#實現效果如下：