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

發布日期：2017/7/15

摘要： 1 SVG簡介 可縮放矢量圖形是基于可擴展標記語言(標準通用標記語言的子集)，用于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制訂，是一個開放標準。 2 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 代 碼以 元素開始，包括開啟標簽 和關閉標簽 。這是根元素。 width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定 義 SVG 命名空間。

　　5 SVG 制作素描線動畫舉例

　　1)首先畫一條素描線 如圖:

　　

 

 

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

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

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

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

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

　　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; } }

　　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);

　　來生成動畫。

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

　　

 

　　當運行動畫繪制程序的時候，各條線安裝設定的體例進行繪制，我們就看到特別很是酷的預加載動畫了。