css3 動畫（二）貝塞爾曲線

soasme 發布于2019-08-30 15:54 / 2614人閱讀

摘要：根據方程的最高階數，可以分為線性貝塞爾曲線二次貝塞爾曲線三次貝塞爾曲線以及更高次的貝塞爾曲線。貝塞爾曲線掃盲在中使用的函數，是一個三次貝塞爾曲線函數。三次貝塞爾曲線中四個點，在中第一個點和最后一個點是固定坐標的和是傳入函數中的參數的。

前言

上一篇 css3 動畫（一） transition 中，介紹了 transition 的用法。其中 transition 包含四個可設置的屬性：

有過渡效果的屬性

過渡時長

過渡函數？

過渡時延

其中，1、2 以及 4 都挺好理解的，但是 3 是個什么東西？其實 3 是 css3 中的 timing-function，其中 3 有兩種類型的值：

cubic-bezier(x1, y1, x2, y2)：立方貝塞爾曲線

steps(number_of_steps, direction)

本篇就總結一下 cubic-bezier(x1, y1, x2, y2)：立方貝塞爾曲線

貝塞爾曲線簡介

貝塞爾曲線（Bezier curve）是計算機圖形學中重要的參數曲線，它通過一個方程來描述一條曲線。根據方程的最高階數，可以分為線性貝塞爾曲線、二次貝塞爾曲線、三次貝塞爾曲線以及更高次的貝塞爾曲線。
貝塞爾曲線掃盲

在 css3 中使用的 cubic-bezier() 函數，是一個 三次貝塞爾曲線函數。

三次貝塞爾曲線中四個點，在 cubic-bezier() 中：

第一個點 p0(0, 0)和最后一個點 p3(1, 1)是固定坐標的

p1(x1, y1) 和 p2(x2, y2) 是傳入 cubic-bezier() 函數中的參數的。其中 x∈[0, 1]，y 可以不在 [0, 1] 區間內，但最大值最好不要大于 1.5，最小值不要小于 -0.5

0 和 1 分別表示 0% 和 100%

cubic-bezier(x1, y1, x2, y2) 接受的參數便是 p1(x1, h1) 和 p2(x2, y2) 的坐標。

那我們怎么獲取我們想要的貝塞爾曲線呢？進這個網站

css3 貝塞爾曲線代表的含義

在上面那個網站中，我們可以通過拖拽 p1 和 p2 點，來改變兩點的坐標，從而產生一條曲線。

那么這條曲線代表什么含義呢？

橫坐標：時間。時間是勻速增加的

縱坐標：進度。隨著時間的增加，進度也會增加

斜率：速度

由于 時間是勻速增加的，進度增加的快慢是受斜率（速度）影響的。所以這是一條表示進度變化快慢的速度曲線

這個進度在 css 中，實際指的就是樣式變化前后的值。如：

width 從 100px 變為 200px，縱坐標的起點就為 100px，終點為 200px

opacity 從 0 變為 1，縱坐標的起點就為 0，終點為 1

...

transition + cubic-bezier() 實現平拋動畫

最終效果如下：
https://codepen.io/reai3041/p...

分析

我們知道，平拋運動可以分解為兩個方向的運動：

水平方向：勻速運動

垂直方向：加速度不變的勻加速運動

這樣，我們就可以分解為水平和垂直方向上的 過渡效果：

.ball {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  left: 80px;
  top: 30px;
}
/* 終點 */
.ball.end {
  left: 180px;
  top: 230px;
  transition: left 0.2s linear, top 0.2s cubic-bezier(.48,0,.94,.28);
}

通過改變 left 和 top 值：

left 應用 linear 速度曲線（勻速）

top 應用 cubic-bezier(.48,0,.94,.28) 速度曲線（加速度不變的加速運動）

來獲得平拋運動的動畫效果

其中，cubic-bezier() 函數的參數，可以在網站里自定義點的位置，然后得到自己想要的速度變化曲線。

在平拋運動垂直方向的速度曲線大概是這樣子的：

這樣，我們就知道了 cubic-bezier() 函數的參數（圖片中的這條曲線，其實就可以看做是實際的平拋的曲線）

代碼及效果：
https://codepen.io/reai3041/p...

總結

css3 中的貝塞爾曲線其實很簡單：一條以 時間為橫坐標，以 進度為縱坐標 的 和速度相關 的曲線，它表示了 過渡/動畫 中間狀態的 變化快慢。

下一篇：css3 動畫（三）animation 簡介

云服務器 GPU云服務器貝塞爾曲線貝塞爾曲線詳解貝塞爾曲線整理 css3動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116827.html

如何理解并應用貝塞爾曲線

摘要：動畫曲線的應用了解了如何用貝塞爾曲線來指定動畫曲線后，很多動畫涉及到速度方面的效果就可以實現了，例如小車加速剎車，彈簧動畫等速度軌跡都可以根據自己的需要來進行定制。貝塞爾曲線又叫貝茲曲線，在大學高數中一度讓我非常頭疼。前陣子練手寫動畫的時候，發現貝塞爾曲線可以應用于軌跡的繪制以及定義動畫曲線。本文就來探究一下，貝塞爾曲線到底是個什么樣的存在。貝塞爾曲線原理貝塞爾曲線由n個點來決...

余學文 2019-08-23 15:54 評論0 收藏0
談談常見H5制作方法——視頻與CSS3

摘要：但目前白名單申請途徑已經關閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機自動全屏以及視頻播放完畢會跳出廣告的問題，并且可以實現交互。本文在H5動效的常見制作手法的基礎上，對相印的H5動效制作手法進行了擴展和整理，并結合案例談談怎么將其做得生動。視頻類 1、體驗案例視頻類h5可以帶給用戶動效逼真，流暢的體驗。雖然說制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創造出...

tracy 2019-06-21 16:14 評論0 收藏0
css3效果： animate實現點點點loading動畫效果（一）

摘要：規定動畫完成一個周期所花費的秒或毫秒。等同于貝塞爾曲線平滑過渡。等同于貝塞爾曲線由慢到快再到慢。等同于貝塞爾曲線等同于等同于接受兩個參數的步進函數。特定的貝塞爾曲線類型，個數值需在區間內規定動畫何時開始。實現如圖所示的點點點loading效果：showImg(https://segmentfault.com/img/bVM22d?w=146&h=46); 一：CSS3 animati...

lijy91 2019-08-29 12:30 評論0 收藏0