貝塞爾曲線的css實現——淘寶加入購物車基礎動畫

時間 2019-11-17

標籤曲線 css 實現淘寶加入購物車基礎動畫欄目 CSS 简体版

原文原文鏈接

本文是看了志佳老師的公開課學習的，**模仿淘寶的加入購物車動畫**，實現貝塞爾曲線運動的動畫路徑效果,以下所示。css

#前沿：html

1.貝塞爾曲線原理：https://blog.csdn.net/cdnight/article/details/48468653前端

貝塞爾曲線在 web 開發領域一樣佔有一席之地。CSS3 新增了 transition-timing-function 屬性，它的取值就能夠設置爲一個三次貝塞爾曲線方程。在此以前，也有很多 JavaScript 動畫庫使用貝塞爾曲線來實現美觀逼真的緩動效果。
css3

下面咱們就經過例子來了解一下如何用 de Casteljau 算法繪製一條貝塞爾曲線。web

在平面內任選 3 個不共線的點，依次用線段鏈接。算法

在第一條線段上任選一個點 D。計算該點到線段起點的距離 AD，與該線段總長 AB 的比例。學習

根據上一步獲得的比例，從第二條線段上找出對應的點 E，使得 AD:AB = BE:BC。動畫

鏈接這兩點 DE。網站

重新的線段 DE 上再次找出相同比例的點 F，使得 DF:DE = AD:AB = BE:BC。.net

到這裏，咱們就肯定了貝塞爾曲線上的一個點 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>

<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>

</body>

</script>

</html>

```

#實現效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。