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

時間 2019-11-22

標籤如何使用 svg 生成頁面加載素描動畫效果简体版

原文原文鏈接

在線演示javascript

本地下載html

1 SVG簡介

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

2 SVG的特色

與其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於：web

SVG 圖像可經過文本編輯器來建立和修改chrome

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

SVG 是可伸縮的編輯器

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

SVG 可在圖像質量不降低的狀況下被放大工具

3 瀏覽器支持

Internet Explorer 九、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();