SVG怎么實現文字動畫特效

本文小編為大家詳細介紹“SVG怎么實現文字動畫特效”，內容詳細，步驟清晰，細節處理妥當，希望這篇“SVG怎么實現文字動畫特效”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

如何使用

要使用該SVG文字動畫特效，要在頁面中引入segment.js，它用于動畫SVG路徑，d3-ease，用于制作easing動畫過渡效果，以及letters.js。

<script src="js/segment.min.js"></script> <script src="js/d3-ease.v0.6.js"></script>                 <script src="js/letters.js"></script>

HTML結構

可以使用一個<p>容器來包裹需要制作動畫效果的文字。

<p class="text">Helloweba</p>

設置和調用插件

然后我們就可以在JavaScript中獲取這個元素，通過配置參數來制作繪制文字的動畫。所有的參數選項（除了inpidualDelays）都可以設置為以下的值：

單個值：可以被所有字母接收。

數組：數組中的第一個元素會被第一個字母接收，第二個元素被第二個字母接收，以此類推。

//選擇元素 var el = document.querySelector('.text');

//每個選項可以定義為單個也可以定義為數組

var options = {    

size: 200,         // 字體大小，決定文字的高度，

px    weight: 5,         // 粗體，px    

rounded: false,    // 字母結尾圓角    

color: ['#f90','#5F6062'],  // 字體顏色    

duration: 1,       // 每個字母的動畫展示時長 (seconds)    

delay: [0, 0.1],  // 每個字母間的動畫延時    

fade: 0.5,         // 漸顯效果的時長(seconds)    

easing: d3_ease.easeCubicInOut.ease,   // 緩沖動畫效果    

inpidualDelays: false     // 默認false，如果設置成false，則動畫效果會從左到右過度展示，如果是true，字母動畫效果是同步展示 };

var myText = new Letters(el, options); myText.show();

通過上面的配置，我們已經定義了文字顯示和動畫的選項，插件會在容器中生成SVG文字。默認情況下，文字是被隱藏的。通過使用myText.show()將動畫文字展示出來。插件還提供了其他幾種方法。

//文字隱藏 myText.hide(); //切換文字 myText.toggle();

讀到這里，這篇“SVG怎么實現文字動畫特效”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。