1 SVG簡(jiǎn)介

可縮放矢量圖形是基于可擴(kuò)展標(biāo)記語(yǔ)言(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集)，用于描述二維矢量圖形的一種圖形格式。它由萬(wàn)維網(wǎng)聯(lián)盟制訂，是一個(gè)開放標(biāo)準(zhǔn)。

2 SVG的特點(diǎn)

與其他圖像格式相比(比如 JPEG 和 GIF)，使用 SVG 的優(yōu)勢(shì)在于：

SVG 圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改

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

SVG 是可伸縮的

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

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

3 瀏覽器支撐

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支撐內(nèi)聯(lián) SVG。Internet Explorer 8或更早版本，可通過(guò)安裝Adobe SVG Viewer以支撐SVG。

4 SVG 標(biāo)簽

SVG 代 碼以 元素開始，包括開啟標(biāo)簽 和關(guān)閉標(biāo)簽 。這是根元素。 width 和 height 屬性可設(shè)置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定 義 SVG 命名空間。

5 SVG 制作素描線動(dòng)畫舉例

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

素描線的參數(shù)可以使用工具生成，

2)SVG實(shí)現(xiàn)素描的動(dòng)畫及原理

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

stroke-dasharray定義了生成線段長(zhǎng)度，及其線段和線段之間的縫隙 ，這里包含兩個(gè)參數(shù)

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

3)使用CSS3來(lái)實(shí)現(xiàn)素描動(dòng)畫效果

/*定義keyframe動(dòng)畫*/ /* 添加動(dòng)畫到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圖形中素描線長(zhǎng)度，可以使用js獲取 */ } to{ stroke-dashoffset: 0; } } /* 支撐chrome瀏覽器 */ @-webkit-keyframes dash{ from{ stroke-dashoffset: 265.07; /* 這里是svg圖形中素描線長(zhǎng)度，可以使用js獲取 */ } to{ stroke-dashoffset: 0; } }

4)使用javascript來(lái)調(diào)節(jié)動(dòng)畫效果的參數(shù)

/*定義相關(guān)javascript*/ var current_frame, //定義當(dāng)前幀 total_frames, //定義悉數(shù)幀數(shù) path, //定義svg中的path元素 length, //定義path所生成的素描長(zhǎng)度 handle; //定義javascript動(dòng)畫句柄 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; } //定義現(xiàn)實(shí)的動(dòng)畫繪制方法 var draw = function(){ var progress = current_frame/total_frames; if(progress>1){ //這里定義完成動(dòng)畫 window.cancelAnimationFrame(handle); }else{//否則使用reqeuestAnimationFrame來(lái)生成動(dòng)畫 current_frame++; path.style.strokeDashoffset = Math.floor(length*(1 - progress)); handle = window.requestAnimationFrame(draw); } } //定義一個(gè)重新運(yùn)行方法 var rerun = function(){ init(); draw(); } //頁(yè)面加載即運(yùn)行 rerun();

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

來(lái)生成動(dòng)畫。

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

當(dāng)運(yùn)行動(dòng)畫繪制程序的時(shí)候，各條線安裝設(shè)定的體例進(jìn)行繪制，我們就看到特別很是酷的預(yù)加載動(dòng)畫了。

網(wǎng)站題目：如何使用SVG生成超酷的頁(yè)面預(yù)加載素描動(dòng)畫效果
分享路徑：http://www.aaarwkj.com/news47/277347.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)