svg文字描邊動畫

svg動畫在網頁中是常常見到的，svg動畫使得網頁看起來清新美觀

任何不規則圖形均可以由svg繪製完成，固然也包括文字，文字自己就能夠看做一個不規則圖形🐎

仍是按之前的流程，開始放代碼前，先看效果：

很酷炫有木有？！！！

在我發現這個效果的時候，我以爲碉堡了，直到我知道了它的代碼

代碼真的很簡單，很簡單。。。

咳咳。不扯了，如今進入正題

在使用網頁作svg動畫的時候首先咱們要有svg文件，這裏我使用的是Ai來作svg文件

 

其實我感受Ai和PS真的好像，

 新建文件-->文字工具-->選本身喜歡的字體和大小

而後選菜單上的 文字-->建立輪廓

這樣文字的輪廓就出來了，接下來用svg格式保存文件。

 

 

 

以後又會彈出一個窗口，無論它，直接用默認選項，點肯定就行

以後把svg文件導入到文本編輯器中（這裏我用的是WebStorm）

 

導入後是這樣的：

 

 

 

這些讓人看着眼花繚亂的數字，就是Ai生成的文字的路徑

咱們只須要path標籤裏的東西

 

新建一個html文件，建立一個div裏面包着svg，svg裏面包着咱們得到的path標籤

div的css樣式：

1 width: 400px; 2 height: 300px; 3 margin: 0 auto;

由於在Ai創建的svg大小就是400*300，因此我這裏也弄成同樣大小

svg樣式：

1 width: 400px; 2 height: 300px;

我給全部的path標籤訂了一個類名，叫word

1 .word {
2  stroke-dasharray: 500;
3  animation: draw 8s linear forwards;
4 }

stroke-dasharray表示虛線的長度，我這裏設的是五百的長度，但一個字母的邊框長度顯然沒有五百，因此看到的也就是實線

接下來設置動畫效果：

1 @keyframes draw {
2  0%{ 3  stroke-dashoffset: 500;
4     } 100% {
5  stroke-dashoffset: 0;
6     }
7 }

stroke-dashoffset表示繪製點距離起點的距離，因爲我不知道字母的寬度，這裏我直接用500代替，從500到0，就畫出了整個字母邊框，

在path標籤中添加以下屬性

fill-opacity="0" stroke="#FFF" stroke-width="1.5"
固然也能夠在css中設置

這樣一個文字描邊的動畫就大功告成了
若是你想要用虛線描邊，就把stroke-dasharray設置小一點，好比我設置10
就看到這樣的效果：

若是你想要動畫永遠進行下去

animation: draw 8s linear forwards;

把forwards設置成infinite就能夠一直重複動畫了

通常svg動畫都須要配合javascript一塊兒使用的，好比stroke-dashoffset由於我不知道具體輪廓長度，就只設成500甚至更多，那麼在javascript中是能夠獲取輪廓長度的

1 path.getTotalLength();

這個方法就能夠獲取字母的輪廓長度。

什麼？你不想要這種效果？

你想要把字母一個個按順序畫出來？也能夠：

只要給每一個path定一個id，在按時間順序執行動畫

 

1 #st0{animation: draw 2s ease forwards;}
2 #st1{animation: draw 2s ease .5s backwards;}
3 #st2{animation: draw 2s ease 1s backwards;}
4 #st3{animation: draw 2s ease 1.5s backwards;}
5 #st4{animation: draw 2s ease 2s backwards;}
6 #st5{animation: draw 2s ease 2.5s backwards;}
7 #st6{animation: draw 2s ease 3s backwards;}
8 #st7{animation: draw 2s ease 3.5s backwards;}
9 #st8{animation: draw 2s ease 4s backwards;}

 

效果以下：

效果很不錯，代碼很簡單，只要學懂了，就能起到觸類旁通的效果。