實用的 CSS動畫知識—貝塞爾曲線(cubic-bezier)

言

在了解 cubic-bezier 之前，你需要對 CSS3 中的動畫效果有所認識，它是 animation-timing-function 和 transition-timing-function 中一個重要的內容。

PS：如果你用過PS的鋼筆工具，應該對這個曲線也會十分熟悉。

簡介

cubic-bezier 又稱三次貝塞爾，主要是為了 animation 生成速度曲線的函數，規定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。

我們可以從下圖中簡要理解一下 cubic-bezier：

從上圖我們需要知道的是 cubic-bezier 的取值范圍:

P0：默認值 (0, 0)
P1：動態取值 (x1, y1)
P2：動態取值 (x2, y2)
P3：默認值 (1, 1)

我們需要關注的是 P1 和 P2 兩點的取值，而其中 X 軸的取值范圍是 0 到 1，當取值超出范圍時 cubic-bezier 將失效；Y 軸的取值沒有規定，當然也毋須過大。

最直接的理解是，以一條直線放在范圍只有 1 的坐標軸中，并從中間拿出兩個點來拉扯（X 軸的取值區間是 [0, 1]，Y 軸任意），最后形成的曲線就是動畫的速度曲線。

使用

在測試例子中：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .animation {
      width: 50px;
      height: 50px;
      background-color: #ed3;
      -webkit-transition:  all 2s;
           -o-transition:  all 2s;
              transition:  all 2s;
    }
    .animation:hover {
      -webkit-transform:  translateX(100px);
          -ms-transform:  translateX(100px);
           -o-transform:  translateX(100px);
              transform:  translateX(100px);
    }
  </style>
</head>
<body>
  <div class="animation"></div>
</body>
</html>

我們可以在瀏覽器中看到，當鼠標移到元素上時，元素開始向右移動，開始比較慢，之后則比較快，移開時按原曲線回到原點。

在例子中，當我們不為 transition 添加 cubic-bezier 或是其他 timing-function 時，默認的速度曲線是 ease，此時的速度曲線是：

那么讓我們在代碼中加入 cubic-bezier(.17, .86, .73, .14)：

...
.animation {
  ...
  -webkit-transition:  all 2s cubic-bezier(.17, .86, .73, .14);
       -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);
          transition:  all 2s cubic-bezier(.17, .86, .73, .14);
}
...

再刷新頁面觀察效果，會看到動畫在執行過程中有一段很緩慢的移動，前后的速度相似，此時的運動曲線是：

幾個常用的固定值對應的 cubic-bezier 值以及速度曲線

1、ease：cubic-bezier(.25, .1, .25, 1)

2、liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)

3、ease-in：cubic-bezier(.42, 0, 1, 1)

4、ease-out：cubic-bezier(0, 0, .58, 1)

5、ease-in-out：cubic-bezier(.42, 0, .58, 1)

6、In Out . Back（來回的緩沖效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

附：制圖工具 http://cubic-bezier.com/

塞爾曲線解析

貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用于二維圖形應用程序的數學曲線。

貝塞爾曲線于1962年，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發表，他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由保爾·德·卡斯特里奧于1959年運用德卡斯特里奧算法開發，以穩定數值的方法求出貝塞爾曲線。

n階貝塞爾曲線一般化推導公式如下：

是不是被公式的長度嚇了一跳。不用擔心，階貝塞爾曲線其實并沒有那么復雜，只要把原理理解明白了，任何人都可以輕松畫出階貝塞爾曲線。

下面我就帶大家一起拆分階貝塞爾曲線，來揭開它的神秘面紗。

首先，我們先來看下各階的貝塞爾曲線動圖

二階的貝塞爾曲線就是一條直線，就不再放圖了，圖從三階開始。

圖1-三階

圖2-四階

圖3-五階

從上面畫各階貝塞爾曲線的動圖我們可以看出，各階曲線是可以向下分解的。各階曲線都可以遞歸的最終分解為三階曲線。

在下圖4中點序D1，D2，M1，都處于自身所在線段的t處

也就是在長度上 P0D1/D1P1=P1D2/D2P2=D1M1/M1D2，在t變動時，D1, D2和M1的位置也在變動，點M1的運行軌跡就是最終的貝塞爾曲線。

圖4

四階貝塞爾曲線就相當于在三階的基礎上在外面再包一層線，外層三條線的每條線的t點依次連線形成和三階一樣的結構，然后再使用和三階一樣的方法可得到線段D1D2，從而得到點M1，最終得到貝塞爾曲線。

更高階的貝塞爾曲線原理也和四階一樣，每條線的t點依次連線形成低階結構最終得到動點M1, 從而得到最終的貝塞爾曲線。

上代碼

根據給出的點遞歸計算低階曲線的對應的點，最終計算出不系列動點M1。

function drawLines(ps, color) {
    if (ps.length < 2) {
        const { x, y } = ps[0];
        finalPoints.push({ x, y });
        drawLine();
        return;
    }
    const pps = [];
    for (let i = 0; i < ps.length - 1; i++) {
        pps.push(calcMiddlePoint(ps[i], ps[i + 1], .5));
    }
    drawLines(pps);
}

計算兩點連線t點坐標

// 計算兩點連線t點坐標
function calcMiddlePoint(p1, p2) {
    return { x: (p2.x - p1.x) * t + p1.x, y: (p2.y - p1.y) * t + p1.y };
}

畫最終曲線

function drawLine() {
    let last = {}
    ctx.strokeStyle = "red";
    ctx.lineWidth = 4;
    ctx.beginPath();
    finalPoints.forEach(({ x, y }, index) => {
        if (index === 0) {
            ctx.moveTo(x, y)
        } else {
            ctx.lineTo(x, y)
        }
    });
    ctx.stroke();
}

完整代碼

<!DOCTYPE html>
<html lang="zh-hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>貝塞爾曲線</title>
    <style>
        html,
        body,
        #canvas {
            margin: 0;
            padding: 0;
            background: white;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            background: gray;
        }

        .buttonContainer {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 100;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <div class="buttonContainer">
        <div>
            <button id="draw">畫圖</button>
            <button id="reDraw">重畫</button>
            <button id="clear">清空</button>
            <button id="radom">隨機</button>
        </div>
        <div>
            <a href="https://hefang.link">何方博客</a>
            <a href="https://zhuanlan.zhihu.com/iamhefang">何方的知乎專欄</a>
        </div>
    </div>
    <script>
        const cv = document.getElementById("canvas");
        const draw = document.getElementById("draw");
        const clear = document.getElementById("clear");
        const reDraw = document.getElementById("reDraw")
        let points = [];
        const ctx = cv.getContext("2d");
        let offset = 0;
        let timer;
        cv.height = window.innerHeight;
        cv.width = window.innerWidth;
        function calcMiddlePoint(p1, p2) {
            return { x: (p2.x - p1.x) * offset + p1.x, y: (p2.y - p1.y) * offset + p1.y };
        }
        let finalPoints = [];
        function drawLine() {
            let last = {}
            ctx.strokeStyle = "red";
            ctx.lineWidth = 4;
            ctx.beginPath();
            finalPoints.forEach(({ x, y }, index) => {
                if (index === 0) {
                    ctx.moveTo(x, y)
                } else {
                    ctx.lineTo(x, y)
                }
            });
            ctx.stroke();
        }
        function drawLines(ps, color) {
            if (ps.length < 2) {
                const { x, y } = ps[0];
                finalPoints.push({ x, y });
                drawLine();
                return;
            }
            ctx.lineWidth = 1;
            ctx.strokeStyle = color || "green";
            ctx.beginPath();
            for (let i = 0; i < ps.length; i++) {
                const { x, y } = ps[i];
                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            }
            ctx.stroke();
            const pps = [];
            for (let i = 0; i < ps.length - 1; i++) {
                pps.push(calcMiddlePoint(ps[i], ps[i + 1], .5));
            }
            drawLines(pps)
        }
        function doDraw() {
            if (points.length < 2) {
                alert(`無法畫圖，請至少指定2個點`);
                return;
            }
            timer && clearInterval(timer);
            drawLines(points, 'blue');
            timer = setInterval(() => {
                offset += 0.001;
                window.requestAnimationFrame(() => {
                    ctx.clearRect(0, 0, cv.width, cv.height);
                    drawLines(points, 'blue');
                });
                if (offset >= 1) {
                    clearInterval(timer);
                }
            }, 1);
        }
        reDraw.addEventListener("click", function () {
            finalPoints = [];
            offset = 0;
            ctx.clearRect(0, 0, cv.width, cv.height);
            doDraw();
        });
        draw.addEventListener("click", doDraw);
        clear.addEventListener("click", () => {
            points = [];
            finalPoints = [];
            offset = 0;
            ctx.clearRect(0, 0, cv.width, cv.height);
        });
        cv.addEventListener("click", function (e) {
            points.push({ x: e.clientX, y: e.clientY });
            console.log("point:", { x: e.clientX, y: e.clientY });
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.arc(e.clientX, e.clientY, 2, 0, Math.PI * 2);
            ctx.fill();
        });
        radom.addEventListener("click", () => {
            points = [];
            finalPoints = [];
            offset = 0;
            ctx.clearRect(0, 0, cv.width, cv.height);
            for (let i = 0; i < 10; i++) {
                points.push({ x: Math.random() * cv.width, y: Math.random() * cv.height })
            }
            doDraw();
        });
    </script>
</body>

</html>

上面的html我已經放到了服務器上，點擊可以直接使用。

鼠標直接屏幕點擊畫點
點擊右下角"畫圖"開始畫圖
點擊"重畫"可再次畫圖
點擊"清空"清空結果
點擊”隨機“使用隨機生成的20個點畫圖

我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連接所形成的系統，數學上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。

工具選擇

工預善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。

flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG創建Flow Chart
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具，支持各種交互式圖表的創建。有免費版和收費版
joint.js http://www.jointjs.com/ joint.js 是另一個創建圖標庫的工具，也提供免費版和商業版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖創建工具，小巧精悍，使用簡單
d3 http://d3js.org 在html5領域，d3可謂是最好的可視化基礎庫，提供方面的DOM操作，非常強大。

最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據自己的需要選擇。

構建靜態應用

下面我們一步一步的來使用jsPlumb來創建我們的流程圖工具。

第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個函數里：

jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}

創建一個jsPlumb的實例，并初始化jsPlumb的配置參數：

//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});

這里給給出了一些配置包括，連接線（這里配置了一個貝塞爾曲線），線的風格，連接點得風格。Container需要配置一個對應的DIV容器的id。（這里也可以使用setContainer的方法）

下面我們要創建一個節點（node），每一個節點可以用一個DIV來實現。我這里提供了一個函數來創建節點。

function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);

??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}

這里做的事情就是創建了一個DIV元素，并放在對應的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來操作DOM，大家可能會更習慣JQuery，這純屬個人喜好的問題。

最后返回創建節點的實例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫，例如Vanilla

下面我使用一個函數來創建端點/錨點（anchor），錨點就是節點上的連接點，用于連接不同的節點。

function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;

??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}

????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];

????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}

instance是jsPlumb的實例

node是我們用addNode方法創建的Node實例

ports，是一個string的數組，指定端點的個數和名字

type，可能是output或者input，指定端點的種類，一個節點的輸出端口可以連接另一個節點的輸入端口。

這里anchor是一個四維數組，0維和1維分別是錨點在節點x軸和y軸的偏移百分比。我這里希望把端口畫在節點的左右兩側，并按照端口的數量均勻分布。

最后使用instance.addEndpoint來創建端點。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來連接端點，非常方便。

下面一步我們提供一個函數來連接端點：

function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];

??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;

??instance.connect({uuids:[uuid_source,?uuid_target]});
}

node1和node2是源節點和目標節點的引用，port1和port2是源端口和目標端口的名字。

使用instance.connect方法來創建連接。 overlays用來添加連接線的箭頭效果或者其他風格，我這里沒有使用，因為覺得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數就可以了。

調用以上方法來創建節點，端點和連接線。

var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});

addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');

connectPorts(instance,?node1,?'out2',?node2,?'in');

這里我們創建了兩個節點，第一個節點有兩個輸出端口，第二個節點有三個輸入端口，然后把第一個節點的out2端口連接到第二個端點的in端口。效果如下：

最后我們給節點增加drag&drop的功能，這樣我們就可以拖動這些節點來改變圖的布局了。

instance.draggable($('.node'));

這里似乎依賴于JQuery-UI,我還不是很清楚。

交互式創建節點

我們已經初步具有了創建圖的功能，可是節點的創建必須通過程序，我們希望用交互的方式來創建節點。

通常我們希望有一個tree view的控件，讓后通過拖拽來創建對應類型的節點。這里我使用了這個開源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我們先創建一個tree view：

function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?

??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});

樹上有兩個節點:

然后我實現從樹上拖拽對應的節點，到流程圖上的邏輯。

//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});

$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}

??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';

??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});

這里要注意的是要避免和jsPlumb拖拽端點的邏輯沖突，當檢測到target是jsPlumb對象是需要直接從drop方法中退出以執行對應的jsPlumb的drop邏輯。

好了，一個繪制流程圖的軟件工具初步完工。

我把代碼放在oschina的代碼托管服務上了，大家有興趣可以去試試。

在線咨詢

上一篇：前端程序員實現在線預覽pdf、word、xls、ppt等文件，超實用！
下一篇：HTML中的href屬性：掌握超鏈接技巧，提升網站用戶體驗

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商