|
原文鏈接
為了之后產(chǎn)品可能的動(dòng)畫需求，我們需要調(diào)研各種可行的前端動(dòng)畫技術(shù)。相信CSS3動(dòng)畫和JS動(dòng)畫我們平常已經(jīng)接觸很多了，而SVG技術(shù)則很少用，事實(shí)上SVG也是一種強(qiáng)大的動(dòng)畫解決方案，可以幫我們解決傳統(tǒng)動(dòng)畫做不到的技術(shù)痛點(diǎn)。
SVG簡(jiǎn)介
- SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來(lái)創(chuàng)建矢量圖。
- SVG1.1 于 2003 年 1 月 14 日成為 W3C 推薦標(biāo)準(zhǔn)。
- SVG本質(zhì)上是用XML語(yǔ)言描述的，所以它可以和DOM結(jié)構(gòu)一樣被CSS和JS編程控制，通過(guò)連續(xù)地改變SVG圖形屬性就可以創(chuàng)建SVG動(dòng)畫。
- SVG可用文本編輯器編輯，也可通過(guò)Adobe Illustator等專業(yè)編輯軟件處理。
SVG文件可單獨(dú)使用，使用XML定義并包含DTD聲明：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www./Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www./2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
在現(xiàn)代瀏覽器中，我們可以直接在HTML代碼中嵌入SVG代碼：
<div class="svg-wrap">
<svg xmlns="http://www./2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</div>
SVG path
SVG可以繪制許多形狀，這里不一一介紹，重點(diǎn)介紹下svg path，它是svg形狀中功能最為強(qiáng)大的一個(gè)，也是我們前端動(dòng)畫會(huì)經(jīng)常用到的形狀。
顧名思義，path定義的是一組路徑，你可以用path元素繪制矩形（直角矩形或者圓角矩形）、圓形、橢圓、折線形、多邊形，以及一些其他的形狀，例如貝塞爾曲線、2次曲線等曲線。path元素的形狀是通過(guò)它的 d 屬性決定的，d屬性中通常以字母為命令，如下所示：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
以下path 定義了一個(gè)三角形：它開始于位置150 0，到達(dá)位置75 200，然后從那里開始到225 200，最后在150 0關(guān)閉路徑。
<svg xmlns="http://www./2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
注意：繪制復(fù)雜的path路徑應(yīng)盡可能借助設(shè)計(jì)工具，人為計(jì)算path的d屬性耗時(shí)耗力，也不是目前的學(xué)習(xí)重點(diǎn)。
path的其他常用屬性有：
- stroke 定義路徑顏色
- stroke-width 定義路徑寬度，單位像素
- stroke-dasharray 用于創(chuàng)建虛線
- fill 定義path閉合區(qū)域的填充顏色
基于svg path實(shí)現(xiàn)圖片路徑動(dòng)畫
點(diǎn)擊這里查看demo：
WPS Logo Demo
這個(gè)效果的實(shí)現(xiàn)并不復(fù)雜，首先我們需要wps logo的svg資源，可以借助photoshop 和 Adobe Illustrator 從圖片中生成svg路徑。
第一步，使用ps魔棒工具去除白色背景，并選中路徑，然后右鍵，建立工作路徑：
點(diǎn)擊菜單-> 文件 -> 導(dǎo)出 -> 導(dǎo)出路徑到ai ：
在ai中選中路徑，存儲(chǔ)為svg格式。然后在編輯器中打開svg即可查看到path的d屬性了！
之后，在代碼里創(chuàng)建svg圖形，并指定其stroke-width等屬性。
動(dòng)畫方面，使用css animation控制path的stroke-dasharray屬性來(lái)實(shí)現(xiàn)動(dòng)畫，這個(gè)屬性可以將path繪制為虛線。
如 stroke-dasharray: 10px 20px; 就定義了實(shí)線的長(zhǎng)度是10px，空白的長(zhǎng)度是20px，如下圖所示：
利用這個(gè)原理，我們將實(shí)線的長(zhǎng)度從0逐漸變?yōu)閜ath總長(zhǎng)度，將空白的長(zhǎng)度逐漸變?yōu)?，就可以實(shí)現(xiàn)類似“繪圖”的效果了~
#wps-logo-path {
animation: wpsLogo 3s ease-in-out forwards;
}
@keyframes wpsLogo {
0% {
stroke-dasharray: 0 1078px;
}
100% {
stroke-dasharray: 1078px 0;
}
}
path的總長(zhǎng)度可以這樣計(jì)算 $('#wpsLogoPath')[0].getTotalLength()
動(dòng)畫過(guò)程中，可以設(shè)置監(jiān)聽，在動(dòng)畫的不同階段執(zhí)行不同的鉤子函數(shù)：
document.addEventListener('webkitAnimationEnd', function(e) {
}
代碼中，我們還定義了線性漸變，用來(lái)填充path閉合區(qū)域內(nèi)的背景值，fill: url(#wpslinear)
<defs>
<linearGradient id="wpslinear" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FB5A43"/>
<stop offset="100%" stop-color="#FD3258"/>
</linearGradient>
</defs>
到這一步，svg path動(dòng)畫的demo就基本做完了，我們可利用這個(gè)原理實(shí)現(xiàn)更復(fù)雜的svg path動(dòng)畫，如多個(gè)path的過(guò)渡動(dòng)畫，物體沿不規(guī)則path移動(dòng)等等。svg技術(shù)本身還是很復(fù)雜的，短時(shí)間掌握svg有一定的難度，必要時(shí)可以借助svg動(dòng)畫庫(kù)實(shí)現(xiàn)需要的設(shè)計(jì)效果，做到技術(shù)靈活服務(wù)于產(chǎn)品。
|
