用 SVG 描邊動畫送一份平安夜祝福

作者：神說要有光zxg 2021-12-24 14:17:11

開發前端

SVG 是網頁里畫矢量圖的技術，可以用 rect、circle、line 等畫一些具體的圖形，也可以用 path 來畫更復雜的圖形。

[[441892]]

今晚是平安夜，提前給大家送份祝福。

SVG 是用 Illustrator 畫的，蘋果是手繪的(雖然是畫的丑了點 0.0)。

按照慣例，看完效果之后我們來學習下它的實現原理。

思路分析

SVG 是網頁上畫矢量圖的技術，有 line(線)、polyline(折線)、polygon(多邊形)、react(矩形)、circle(圓形)、ellipsis(橢圓)等圖形，也可以通過 path 來描述任意的形狀。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <rect width="300" height="100"/> 
    <path d="M250 150 L150 350 L350 350 Z" /> 
 
</svg>

其中 M 是 moveTo，移動到某個位置開始畫，L 是 lineTo，畫一條直線，Z 是 closePath，完成繪制。當然，還可以繪制曲線等，api 和 canvas 里畫圖形的 api 差不多。

那我們需要用代碼手畫蘋果和文字的 path 么?

不用，可以用 Illastrator 這種矢量繪圖軟件，它有鋼筆、文字等各種繪圖工具，用這些工具繪制完然后導出 SVG 就行。

SVG 可以設置兩個方面的屬性，一個是線條相關的，主要是 stroke，一個是填充相關的，主要是 fill。

stroke 相關的樣式有 stroke-dasharray 來指定用虛線畫。

比如 stroke-dasharray:10 20; 是虛線長度 10px，間隔 20px。

也可以用 stroke-dasharray 指定虛線的 offset，也就是偏移位置，往左偏移是正，往右是負。

比如 stroke-dashoffset: 1 就是往左偏移 1px。

注意這個 stroke-dashoffset，我們往左偏移全部的長度，然后再慢慢移動回原來位置，也就是 offset 由正數到 0，不就是描邊的效果的呢?

這就是 SVG 描邊動畫的原理。

知道了這種動畫要改變什么屬性，那我們要用定時器自己去改變么?不用，可以用一些動畫框架來修改屬性值，比如 anime.js，它還支持設置時間函數，比如勻速、加速等。

理清了大概的原理，那我們來動手實現下吧。

代碼實現

首先先把 SVG 準備好，我們用 Illastrator 來畫：

使用文字工具寫祝福的文字，然后選擇“創建輪廓”，就會變成一個輪廓數據，然后選擇導出 SVG 就行了。

蘋果可以用鋼筆手畫，畫完后點擊“創建復合路徑”，變成 path 的形式，然后導出 SVG：

畫好了 SVG 之后，我們再實現動畫效果：

最開始把 stroke-dashoffset 設置為 SVG 的長度，然后用動畫的方式慢慢變為 0。
每一個 path 畫完之后就用 fill 屬性來填充顏色。

我們給每個 path 加上一個 class，然后來做動畫。

使用 anime.js 來改變 stroke-dashoffset 實現描邊的動畫效果。

需要傳入這些參數：

指定 targets，也就是添加動畫效果的元素
指定 strokeDashOffset 屬性值從 SVG 的長度慢慢變到 0。
指定 easing 時間函數，linear 是勻速
指定 duration 時間間隔
指定每個元素的執行動畫的 delay 時間
還可以指定每個元素動畫結束之后修改一些屬性值

const duration = 800; 
 
anime({ 
    targets: ".svg-path", 
    strokeDashoffset: function(item) {  
        const svgLength = anime.setDashoffset(item);  
        return [svgLength, 0];  
    }, 
    easing: "linear", 
    duration, 
    delay: function (item, index) { 
        return duration * index; 
    }, 
    update: function (anim) { 
        const color = ['red', 'pink', 'purple','skyblue', 'blue','red', 'green','green']; 
        for(let i = 1; i <= color.length; i++) { 
            if (anim.currentTime >= duration * i) { 
                document.querySelector(".path" + i).style.fill = color[i-1]; 
            } 
        } 
    }, 
    autoplay: true 
});

我們給每個元素設置了不同的動畫 delay 時間，就是一個個做動畫的效果。

每個元素執行結束之后，判斷了下時間，如果是已經執行完動畫的元素，就 fill 上顏色。

stokeDashOffset 的初始值是 SVG 的長度(向左偏移)，然后慢慢變為 0(回到原點)。

這樣，我們就實現了想要的描邊動畫的效果。

全部代碼：

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>平安夜快樂</title> 
    <script src="https://unpkg.com/animejs@3.2.1/lib/anime.min.js"></script> 
    <style> 
        body { 
            background-color: #000; 
        } 
 
        .box { 
            width: 600px; 
            height: 300px; 
            text-align: center; 
            margin: 0 auto; 
        } 
 
        svg { 
            width: 600px; 
            height: 300px; 
            padding-top: 30px; 
        } 
        .svg-path { 
            fill: #000; 
            stroke: #fff; 
        } 
    </style> 
</head> 
 
<body> 
    <div class="box"> 
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.34 333.9"> 
            <path class="svg-path path1" 
                d="M289.75,295.3v1.8a8.37,8.37,0,0,1-.24,2.1c-16.68,0-29.94-.36-39.78-1.2a7.41,7.41,0,0,1-.17-2,6.49,6.49,0,0,1,.29-2Q269.92,293.92,289.75,295.3Zm-29.58,22.92a9.45,9.45,0,0,1-3.54,2.22,50.86,50.86,0,0,1-5.82-8.58,9.62,9.62,0,0,1,3.61-2.16A98.3,98.3,0,0,1,260.17,318.22Zm26.76,8.7a6.52,6.52,0,0,1,.18,1.86,6,6,0,0,1-.18,1.86c-.6.24-3.78.36-9.48.36h-4.86c-.12,2.76-.3,5.22-.48,7.5a6.22,6.22,0,0,1-2,.24,4.7,4.7,0,0,1-1.68-.24c-.18-2.4-.3-4.86-.36-7.5-9.54,0-14.88-.12-15.95-.36a5.88,5.88,0,0,1-.25-2,5.49,5.49,0,0,1,.3-2c4.92-.12,10.2-.18,15.78-.18v-3.42q0-5.85.36-12.24a10.57,10.57,0,0,1,2-.24,9.05,9.05,0,0,1,2,.24q.36,6.48.36,11.88v3.72h4.74A79,79,0,0,1,286.93,326.92Zm5-15.12a49.35,49.35,0,0,1-6.66,9.54,4.71,4.71,0,0,1-3.06-1.8,46.39,46.39,0,0,1,6.18-9.84A6.85,6.85,0,0,1,291.91,311.8Z" 
                transform="translate(-245.6 -293.92)" /> 
            <path class="svg-path path2" 
                d="M254.11,372.4a129.35,129.35,0,0,1-.71,13,6.56,6.56,0,0,1-2.11.24,2.82,2.82,0,0,1-2-.48,88.15,88.15,0,0,1,.67-13,20.77,20.77,0,0,1,2.1-.12A5.79,5.79,0,0,1,254.11,372.4Zm34.68,16.86v2c-7.2.6-14.34,1-21.54,1.32-.9,2.52-1.74,5.1-2.58,7.62,4.08,1,8.16,1.8,12.3,2.64,1-2.52,1.92-4.92,2.88-7.08q1.8.54,3.78,1.26c-.66,2.28-1.38,4.56-2.22,6.72l5.46,1.08a16.5,16.5,0,0,1-1.08,3.66c-2-.36-4-.66-5.94-1-.6,1.26-1.14,2.52-1.74,3.78a8.53,8.53,0,0,1-3.54-1.74c.3-1,.6-2,1-2.88-5.76-1.14-11.46-2.46-17.16-4,1.14-3.42,2.28-6.66,3.48-9.78-3,.18-6,.3-8.87.36a21.4,21.4,0,0,1-.37-4c3.66-.24,7.32-.42,10.92-.66q1.62-4.23,3.42-8.1a31.59,31.59,0,0,1,4,1.32c-.78,2.16-1.56,4.32-2.28,6.48.6,0,1.2-.06,1.8-.12,5.88-.3,11.94-.54,18.06-.72A9.87,9.87,0,0,1,288.79,389.26ZM270.25,372.4c-.18-2-.24-4.08-.24-6.18.72-.06,1.5-.12,2.4-.24a19.25,19.25,0,0,1,2.16.12c0,2.16.06,4.26.06,6.42q8.64.18,17.1.54.36,5.4.36,10.26a4.82,4.82,0,0,1-1.8.24,14.21,14.21,0,0,1-2.1-.12c-.24-1.38-.48-3.66-.72-6.78-9.24,0-18.6-.24-28-.72a6.39,6.39,0,0,1-.24-2,8.5,8.5,0,0,1,.12-1.68C263,372.28,266.65,372.34,270.25,372.4Z" 
                transform="translate(-245.6 -293.92)" /> 
            <path class="svg-path path3" 
                d="M263.41,455.92c-5.46,2.88-10.74,5.46-15.89,7.68a6.9,6.9,0,0,1-1.92-3.18,175.82,175.82,0,0,1,15.83-8.34A16.66,16.66,0,0,1,263.41,455.92Zm9.66-15.9h7.38a87,87,0,0,1,9,.42,6.32,6.32,0,0,1,.18,1.8,5.26,5.26,0,0,1-.18,1.8c-.6.24-3.6.3-9,.3-18.06,0-27.9-.06-29.51-.3a5.28,5.28,0,0,1-.25-1.92,4.33,4.33,0,0,1,.31-1.86l17.75-.18a30.6,30.6,0,0,1-.48-4q1.8-.27,4-.54C272.59,437,272.83,438.52,273.07,440Zm-13.26,35.34a9.85,9.85,0,0,1-3.66.66,56.49,56.49,0,0,1-3-13,16.28,16.28,0,0,1,3.48-.72A65.47,65.47,0,0,1,259.81,475.36Zm8.1-10.32a8.29,8.29,0,0,1-3.18-2.22,65.29,65.29,0,0,1,11.4-13.26,11.4,11.4,0,0,1,2.7,2.1c-.48.72-1,1.5-1.56,2.22,4.5,1.32,9.3,2.82,14.46,4.5-1.68,4.8-3.54,9.42-5.46,13.86-.78,1.86-1.5,3.48-2.1,4.86,2.52,1,5,2,7.38,3a20.4,20.4,0,0,1-1.38,3.42c-2.64-.78-5.16-1.62-7.68-2.52a26.33,26.33,0,0,1-2,3.9,10.66,10.66,0,0,1-3.84-1.74c.48-1.26,1-2.52,1.56-3.72-3.48-1.26-7-2.64-10.38-4.2a13.37,13.37,0,0,1,1.38-3.78c3.6,1.32,7.2,2.64,10.74,4,2.1-4.92,4.14-9.78,6.18-14.58-4.08-1.14-7.86-2.34-11.34-3.66C272.77,459.58,270.49,462.22,267.91,465Zm12.54,1.14a14.75,14.75,0,0,1-1.5,3.3,19,19,0,0,1-6.3-2.76,17.21,17.21,0,0,1,1.56-3.48C276.31,464.14,278.41,465.1,280.45,466.18Z" 
                transform="translate(-245.6 -293.92)" /> 
            <path class="svg-path path4" 
                d="M251.71,539a21.77,21.77,0,0,1-3.9.36c-.77-5.52-1.25-11-1.49-16.62a22,22,0,0,1,4.08-.36C250.94,528,251.35,533.62,251.71,539Zm7.8-14a64.55,64.55,0,0,1,6.54,1.08,20.77,20.77,0,0,1-.42,3.6,22.77,22.77,0,0,1-5.82-.66c.36,5.64.6,11.1.66,16.38a4.87,4.87,0,0,1-1.74.24,6.14,6.14,0,0,1-1.68-.12A261.61,261.61,0,0,1,255,515.8a11,11,0,0,1,1.92-.24h1.79C259,518.8,259.27,521.92,259.51,525Zm21.18-13.5a9.67,9.67,0,0,1,3.84,1.26c-.54,1.86-1.26,4.44-2.16,7.68,3,.06,6.18.18,9.66.36.36,3.24.72,7.5,1.14,12.9a13.74,13.74,0,0,1-4,.54c-.6-3.84-1-7.08-1.38-9.84-2.4,0-4.62-.06-6.6-.06-1,3.24-2,7-3.18,11.28h9.42a73.75,73.75,0,0,1,8.28.42,5.65,5.65,0,0,1,.18,1.68,4.47,4.47,0,0,1-.18,1.62c-.54.24-3.3.3-8.28.3H276.91c-1.08,3.84-2.28,8-3.48,12.42a11.64,11.64,0,0,1-3.6-1.26c.66-3.54,1.5-7.26,2.46-11.22a77,77,0,0,1-7.92-.24,7,7,0,0,1-.18-1.74,4.26,4.26,0,0,1,.3-1.74l8.76-.18c1-3.6,2.1-7.44,3.3-11.46-3-.06-5.52-.18-7.68-.3a14.37,14.37,0,0,1-.3-3.3c3.24-.12,6.3-.18,9.18-.24C278.65,517.48,279.61,514.48,280.69,511.48Zm11.22,36.06a9.05,9.05,0,0,1-.9,1.68,11.09,11.09,0,0,1-1.14,1.62,28.41,28.41,0,0,1-9.18-4.5,9.93,9.93,0,0,1,2.1-3.42C285.73,544.3,288.79,545.86,291.91,547.54Z" 
                transform="translate(-245.6 -293.92)" /> 
            <path class="svg-path path5" 
                d="M255.19,591.4a66.44,66.44,0,0,1-.72,9.42c2.1.6,6.18,1,12.3,1.08-.42-3.72-.84-7.38-1.2-11.1a18.16,18.16,0,0,1,4.2-.6c.6,4,1.14,7.86,1.62,11.76,9.12,0,15.36-.3,18.6-.9a17.86,17.86,0,0,1,.48,4c-2.88,1.08-9,1.62-18.48,1.74q1.08,9.72,1.62,19.62a31.7,31.7,0,0,1-10.44,1.44,7.53,7.53,0,0,1-.84-3.42,44.52,44.52,0,0,1,6.84-.9c-.66-5.58-1.26-11.16-1.86-16.74-8.64-.12-14.52-.66-17.69-1.62a94.48,94.48,0,0,1,1-13.86,19.81,19.81,0,0,1,2.35-.12C254.42,591.34,255.19,591.4,255.19,591.4Zm32-7.92a14.29,14.29,0,0,1,.12,2q-18.54,2.61-36.77,3.9a4.47,4.47,0,0,1-.48-2.1v-1.8c12.35-1.56,24.59-2.76,36.83-3.72A6.24,6.24,0,0,1,287.17,583.48Zm-28.08,31c-1,3.12-2,6.6-3.36,10.38a8.26,8.26,0,0,1-4.14-1.32A55.78,55.78,0,0,1,255,613,20.2,20.2,0,0,1,259.09,614.5Zm29.16,2.28c.72,1.44,1.38,2.82,1.86,4.08a9.78,9.78,0,0,1-4,1.74,39.45,39.45,0,0,1-4.38-8.7,22.14,22.14,0,0,1,4.08-1.62C286.69,613.84,287.53,615.34,288.25,616.78Z" 
                transform="translate(-245.6 -293.92)" /> 
        </svg> 
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.1 246.81"> 
            <path class="svg-path path6" 
                d="M326.34,316.17h32.53l27.71,25.3,10.84,36.14V421l-9.64,37.35L376,486.05l-31.54,14.46-28.92-6-15.66-10.84-5.37,4.7-13.91,12.17H262.48l-30.12-10.85L201,471.59,186.58,433l-7.23-51.81,34.94-39.76,85.54,9.64Z" 
                transform="translate(-178.82 -254.22)" /> 
            <path class="svg-path path7" 
                d="M243.2,296.89l-4.81-14.46L248,254.72h14.46l23.5,12,23.49,18.07v24.1l-9.64,42.17L262.48,321Z" 
                transform="translate(-178.82 -254.22)" /> 
            <path class="svg-path path8" d="M248,254.72l18.29,24.63,23.87,40.7,9.65,31.06" 
                transform="translate(-178.82 -254.22)" /> 
        </svg> 
    </div> 
 
    <script> 
        const duration = 800; 
 
        anime({ 
            targets: ".svg-path", 
            strokeDashoffset: function(item) {  
                const svgLength = anime.setDashoffset(item);  
                return [svgLength, 0];  
            }, 
            easing: "linear", 
            duration, 
            delay: function (item, index) { 
                return duration * index; 
            }, 
            update: function (anim) { 
                const color = ['red', 'pink', 'purple','skyblue', 'blue','red', 'green','green']; 
                for(let i = 1; i <= color.length; i++) { 
                    if (anim.currentTime >= duration * i) { 
                        document.querySelector(".path" + i).style.fill = color[i-1]; 
                    } 
                } 
            }, 
            autoplay: true 
        }); 
    </script> 
 
</body> 
 
</html>

總結

SVG 是網頁里畫矢量圖的技術，可以用 rect、circle、line 等畫一些具體的圖形，也可以用 path 來畫更復雜的圖形。

SVG path 的 api 和 canvas 里的 path 差不多，比如 M 是 moveTo，L 是 lineTo，Z 是 closePath。

復雜圖形可以用矢量圖繪制軟件 Illuastrator 來繪制，之后導出為 SVG。

SVG 可以設置的屬性主要有 stroke 指定線條樣式，fill 指定填充樣式。

其中 stroke-dasharray 是指定虛線長度，stroke-dashoffset 是指定虛線偏移，正數向左，負數向右。

通過 stroke-dashoffset 的值的變化，就能實現描邊的效果，從 SVG 的整體長度慢慢變化到 0。

屬性值的修改可以用動畫框架 anime.js，它支持定時修改元素的屬性值來做動畫，并且支持勻速、加速等時間函數。

文中的那個動畫，我們指定每個 path 的 delay 時間，每個 path 繪制完之后設置 fill 屬性即可。

SVG 的描邊動畫還是挺不錯的效果，可以用在很多地方。實現原理也不難，就是一個 offset 屬性值的修改。大家很快就能學會。

最后，再次祝大家平安夜快樂呀，加上今天是周五，double 的快樂～

責任編輯：姜華來源：神光的編程秘籍

SVG 平安夜祝福動畫