如何使用SVG生成超酷的頁面預加載素描動畫效果

• 在線演示

• 本地下載

1 SVG簡介

可縮放矢量圖形是基于可擴展標記語言（標準通用標記語言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。

2 SVG的特點

與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在于：

SVG 圖像可通過文本編輯器來創建和修改

SVG 圖像可被搜索、索引、腳本化或壓縮

SVG 是可伸縮的

SVG 圖像可在任何的分辨率下被高質量地打印

SVG 可在圖像質量不下降的情況下被放大

3 瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。Internet Explorer 8或更早版本，可通過安裝Adobe SVG Viewer以支持SVG。

4 SVG 標簽

SVG 代碼以 <svg> 元素開始，包括開啟標簽 <svg> 和關閉標簽 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。

5  SVG 制作素描線動畫舉例

   1）首先畫一條素描線 如圖

    <svg version="1.1"    xmlns="http://www.w3.org/2000/svg"    viewBox = "0 0 200 100">    <!--    fill屬性是否填充    stroke為繪制，顏色#AAAAAA    stroke-width為繪制線的粗細    d是具體數據，這里看到的數據代表了坐標，以及折線等等，可以使用工具生成    -->    <path fill="none"    stroke = "#AAA"    stroke-width = "2"    d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"    />    </svg>

素描線的參數可以使用工具生成，

相關課程 基礎SVG標簽介紹

2）SVG實現素描的動畫及原理

stroke-dasharray = "100 10"  stroke-dashoffset = "0"

 stroke-dasharray定義了生成線段長度，及其線段和線段之間的縫隙 ，這里包含兩個參數

 stroke-dashoffset定義了從那個位置開始渲染生成線段

 相關課程 SVG實現的素描動畫模擬效果及其原理

3）使用CSS3來實現素描動畫效果

    /*定義keyframe動畫*/    /* 添加動畫到path元素 */    .path{    stroke-dasharray: 265.07;    stroke-dashoffset: 265.07;    animation: dash 3s linear infinite;    /* 支持chrome */    -webkit-animation: dash 3s linear infinite;    }    @keyframes dash{    from{    stroke-dashoffset: 265.07; /* 這里是svg圖形中素描線長度，可以使用js獲取 */    }    to{    stroke-dashoffset: 0;    }    }    /* 支持chrome瀏覽器 */    @-webkit-keyframes dash{    from{    stroke-dashoffset: 265.07; /* 這里是svg圖形中素描線長度，可以使用js獲取 */    }    to{    stroke-dashoffset: 0;    }    }

 相關課程 使用CSS3實現素描動畫效果

4）使用Javascript來調節動畫效果的參數

    /*定義相關Javascript*/    var current_frame, //定義當前幀    total_frames, //定義全部幀數    path, //定義svg中的唯一path元素    length, //定義path所生成的素描長度    handle; //定義javascript動畫句柄    path = document.getElementById('path'),    length = path.getTotalLength();    //定義初始化方法    var init = function(){    current_frame = 0;    total_frames = 160;    path.style.strokeDasharray = length + ' ' + length; //定義dasharray    path.style.strokeDashoffset = length; //定義dashoffset    handle = 0;    }    //定義實際的動畫繪制方法    var draw = function(){    var progress = current_frame/total_frames;    if(progress>1){ //這里定義完成動畫    window.cancelAnimationFrame(handle);    }else{//否則使用reqeuestAnimationFrame來生成動畫    current_frame++;    path.style.strokeDashoffset = Math.floor(length*(1 - progress));    handle = window.requestAnimationFrame(draw);    }    }    //定義一個重新運行方法    var rerun = function(){    init();    draw();    }    //頁面加載即運行    rerun();

這里主要定義初始化方法和動畫繪制的方法，window.requestAnimationFrame(draw);

來生成動畫。

相關課程 使用Javascript來實現素描動畫效果

5）我們選用極客標簽的logo，作為原始圖片，坐標參數用 Inkscape 工具生成。

當運行動畫繪制程序的時候，各條線安裝設定的方式進行繪制，我們就看到非常酷的預加載動畫了。

觀看完整效果，請訪問輕視頻課程： 使用javascript生成極客標簽Logo的素描動畫效果