這是在作圖時(shí)突然迸發(fā)的靈感（是的瞻坝，偶爾也會(huì)有那么一瞬間頭腦開竅）暮蹂，作為設(shè)計(jì)師小伙伴們怨愤，平時(shí)用的最多的應(yīng)該是布爾運(yùn)算吧派敷，基礎(chǔ)圖形的加加減減，得到任意的形狀撰洗。就不說經(jīng)典的Apple了篮愉，比如網(wǎng)易云音樂圖標(biāo)，你如果直接放上這個(gè)差导，似乎沒什么试躏。

但放上布爾運(yùn)算過程的設(shè)計(jì)稿（所有基礎(chǔ)圖形的輪廓），瞬間高大上起來设褐，滿滿的設(shè)計(jì)感颠蕴。

所以在做矢量圖的過程就突然想到如果能用SVG結(jié)合CSS3的動(dòng)效來還原這個(gè)設(shè)計(jì)過程，也不失為一個(gè)好玩的效果助析，當(dāng)然了犀被，不會(huì)那么巧剛好用到所有的四種運(yùn)算，只是用動(dòng)畫過程演示一遍外冀，此為目的寡键。因?yàn)樽约旱牡鬃泳秃苋酰赃x了一個(gè)臨摹的圖形锥惋，眾位客官湊合看吧昌腰。

1.準(zhǔn)備工作——圖形分層

每次在做SVG動(dòng)效之前，都會(huì)給自己一點(diǎn)時(shí)間思考一下動(dòng)畫完成的思路膀跌，以及用什么屬性來實(shí)現(xiàn)遭商，正所謂多點(diǎn)思考，少點(diǎn)勞作捅伤，或者換句話說劫流，“不能用戰(zhàn)術(shù)的勤奮來代替戰(zhàn)略的懶惰”。
先放一張成品的效果圖，如下祠汇，就是這只萌萌的小象

2.創(chuàng)建圖形過程的動(dòng)畫

鑒于自己這渣渣一般的水平，圖形加減那一套過程就不拿出來嘚瑟了穿铆，還是留著自家珍藏吧您单，這里只說如何用動(dòng)畫表現(xiàn)出來。各位設(shè)計(jì)師回想一下自己的創(chuàng)建基本形狀的過程荞雏，是不是選擇形狀后在畫布進(jìn)行鼠標(biāo)拖動(dòng)就可以了虐秦，嗯平酿，這里我們主要實(shí)現(xiàn)的就是鼠標(biāo)拖動(dòng)的動(dòng)畫過程。來看下面這張圖（不要給我講你是按著alt鍵巴拉巴拉的悦陋，不管蜈彼，要不這動(dòng)畫沒法做了 ~~~_{(>_<)}~~~）：

從左上角到右下角的拖動(dòng)過程就是圖形的創(chuàng)建過程，而且在創(chuàng)建的過程中俺驶，圖形是逐漸從無到有幸逆，從小到大的。好了痒钝，廢話了半天秉颗，不不，是拋磚引玉送矩，這就是我們實(shí)現(xiàn)創(chuàng)建圖形過程的動(dòng)畫思路。

@keyframes draw{
0%{transform:scale(0,0);transform-origin:left top}
100%{transform:scale(1,1);transform-origin:left top}
}  
/*通用繪制過程的動(dòng)畫定義*/

經(jīng)過分析我們得出哪替，縮放變形transform:scale()是實(shí)現(xiàn)這種效果的最佳方案栋荸，這里唯一要注意的是關(guān)于變形的基點(diǎn)，前面在涉及旋轉(zhuǎn)動(dòng)畫中凭舶，更多的定義是transform-origin:center center晌块，也就是以圓心為基點(diǎn)，而這里定義的是左上角帅霜，也就是left top匆背，其實(shí)CSS的一些語(yǔ)法真的算是很簡(jiǎn)單了，英語(yǔ)入門級(jí)身冀。另外這里對(duì)應(yīng)的left和top的值是相對(duì)位置钝尸，這也是為什么能把draw定義成通用的原因。
下面這張圖形虛線部分是為了得到身體部分創(chuàng)建的所有基礎(chǔ)圖形搂根，實(shí)色填充的部分即為最后需要的身體部分珍促。

基礎(chǔ)圖形是由5個(gè)圓形和1個(gè)矩形共同組成的。我進(jìn)行了標(biāo)號(hào)剩愧。

對(duì)于身體部分猪叙，是4個(gè)圓形和1個(gè)矩形與1個(gè)基礎(chǔ)圓形進(jìn)行相減得到的。為了讓動(dòng)畫過程更形象仁卷，讓基礎(chǔ)圓形進(jìn)行了實(shí)色填充穴翩，其他形狀用虛線來表示。根據(jù)上面動(dòng)畫的定義锦积，先來實(shí)現(xiàn)基礎(chǔ)圖形的創(chuàng)建過程芒帕，CSS部分如下：

<style>
@keyframes draw{
0%{transform:scale(0,0);transform-origin:left top}
100%{transform:scale(1,1);transform-origin:left top}
} 
#circle0{animation:draw 1s ease;fill:#414c68;}/*基礎(chǔ)形狀用實(shí)色填充*/
#circle1{animation:draw 1s ease 1s backwards;}
#circle2{animation:draw 1s ease 2s backwards;}
#circle3{animation:draw 1s ease 3s backwards;}
#circle4{animation:draw 1s ease 4s backwards;}
#rect1{animation:draw 1s ease 5s backwards;}
.sketch{stroke:#c0f1ff;stroke-width:2;fill:none}/*其他形狀用描邊*/
</style>

SVG部分簡(jiǎn)化如下（去掉了和形狀尺寸位置相關(guān)的屬性定義）：

<circle id="circle0"/> <!--基礎(chǔ)形狀-->
<g class="sketch">  <!--其他形狀-->
<circle id="circle1" />
<circle id="circle2" />
<circle id="circle3"/>
<circle id="circle4"/>
<rect id="rect1"/>
</g>

簡(jiǎn)單解釋一下，動(dòng)畫屬性定義那里拿這個(gè)#circle1{animation:draw 1s ease 1s backwards;}為例充包，第一個(gè)1s是繪制時(shí)間副签，第二個(gè)1s是延遲時(shí)間遥椿，為了讓圖形呈現(xiàn)出依次創(chuàng)建的過程，所以延遲時(shí)間是遞增的淆储。backwards這個(gè)屬性一定要定義冠场，當(dāng)我們給動(dòng)畫定義了延遲時(shí)，我們需要定義動(dòng)畫時(shí)間之外對(duì)象的狀態(tài)（animation-fill-mode）本砰，backwards表示動(dòng)畫開始前應(yīng)用開始屬性值碴裙，也就是我們定義的scale(0,0)，換句話說点额，是不顯示的舔株，這里也可以定義成both，對(duì)這個(gè)動(dòng)畫效果而言还棱，沒有區(qū)別载慈。
現(xiàn)在看一下動(dòng)畫效果：

嗯，基本重現(xiàn)了創(chuàng)建了基礎(chǔ)圖形的過程珍手。那么下一部分來了办铡，怎么才能過渡到運(yùn)算之后的形狀呢？

3.運(yùn)算過程的動(dòng)畫

在做這個(gè)動(dòng)畫伊始琳要，我想到的是把相減的圖形轉(zhuǎn)化成蒙版寡具，能行不？絕對(duì)能行稚补，但實(shí)在是太麻煩了童叠。記得我們還保留了運(yùn)算后的圖形放到了單獨(dú)的圖層中吧？這時(shí)课幕，需要它粉墨登場(chǎng)了厦坛，然后其他的圖形怎么辦？集體消失撰豺！
關(guān)于消失的方法也有很多種粪般，隨便來個(gè)順手的就行了，我準(zhǔn)備用蒙版污桦。為了實(shí)現(xiàn)組合圖形消失以及運(yùn)算后的圖形出現(xiàn)的過程亩歹，不得已，又定義了兩個(gè)動(dòng)畫凡橱，其實(shí)做到這里的時(shí)候小作，已經(jīng)很后悔了，遠(yuǎn)不如好好學(xué)學(xué)AE稼钩，在AE里實(shí)現(xiàn)顾稀，但自己挖的坑，含著淚也要跳進(jìn)去再努力爬出來啊坝撑，善始善終静秆，硬著頭皮繼續(xù)做吧粮揉。流著淚補(bǔ)充了下面的動(dòng)畫定義：

@keyframes skip{
0%{opacity:0}
100%{opacity:1}
} /*這是為要登場(chǎng)的圖形準(zhǔn)備的*/
@keyframes combine{
0%{fill:#FFFFFF}
100%{fill:#000000}
}/*這是為要退出舞臺(tái)的圖形準(zhǔn)備的*/

.skip{animation:skip 1s  6s both; fill:#414c68}
.combine{animation:combine 1s 6s both;}

以及：

<mask id="shade"><rect x="0" y="0" width="800" height="600" id="combine"/></mask> <!--蒙版定義-->
<g mask="url(#shade)">……</g>
<path class="skip" d=""/><!--組合后的形狀-->

<g mask="url(#shade)">是把所有的圖形又組合后，使用這個(gè)蒙版抚笔。唯一值得欣慰的是skip和combine這兩個(gè)動(dòng)畫可以被復(fù)用扶认。
插播一個(gè)小知識(shí)點(diǎn)，關(guān)于利用蒙版的漸隱動(dòng)畫殊橙，是不能用0%{opacity:0} 100%{opacity:1} 然后填充黑色fill:#000000這種表面上看上去是蒙版漸現(xiàn)的方式來實(shí)現(xiàn)辐宾，是因?yàn)楫?dāng)不給蒙版定義顏色時(shí)，蒙版會(huì)被默認(rèn)為黑色膨蛮，因此即使開始定義了透明度為0叠纹，也會(huì)被當(dāng)做黑色處理。如果實(shí)在要用的話敞葛，就套兩層蒙版誉察，一層黑色的透明度改變，下面一層白色實(shí)色底制肮。我只截變化的那一部分動(dòng)畫來看一下：

似乎銜接的還不錯(cuò)喲冒窍。

剩下的工作就是體力活了呃，需要把頭部的動(dòng)畫和尾巴的動(dòng)畫補(bǔ)充上豺鼻，沒有什么特殊的，延遲的時(shí)間別弄錯(cuò)了就行款慨，這里就不說了吧儒飒。最后得到的統(tǒng)一的動(dòng)畫是這個(gè)樣子的：

與理想中那種滿滿的設(shè)計(jì)感有差異，不過還好檩奠。下面試著來優(yōu)化一下桩了，上個(gè)色吧。

4.顏色填充過程

顏色填充的過程埠戳，與這個(gè)展示繪制動(dòng)畫過程沒有什么毛線關(guān)系井誉，就是為了好看！好看整胃！我還能說什么呢颗圣？說什么顯示填色的過程，鬼屁使，對(duì)于怎么展示漸變填充完美沒有思路在岂，我就利用了一下蒙版，把已經(jīng)填充好的圖形先用蒙版蓋起來蛮寂，讓你們看不見看不見蔽午，然后在適當(dāng)?shù)臅r(shí)間，蒙版逐漸移動(dòng)酬蹋，露出填充好顏色圖形及老。為了讓蒙版顯示的效果更加自然抽莱，這里我用漸變色對(duì)蒙版進(jìn)行了填充。圖示如下：

<defs>
<linearGradient id="gradient3"  x1="0" y1="0" x2="0" y2="600">
  <stop offset="0" stop-color="#ffffff"/>
  <stop offset="0.1" stop-color="#000000"/>
</linearGradient>
</defs> <!--定義的漸變類型-->

最后得到的效果如下：

另外骄恶，狠狠的告誡自己食铐，下次再也不做這種費(fèi)勁巴拉但不酷炫的效果了。