SVG怎么實(shí)現(xiàn)文字動(dòng)畫特效

本文小編為大家詳細(xì)介紹“SVG怎么實(shí)現(xiàn)文字動(dòng)畫特效”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“SVG怎么實(shí)現(xiàn)文字動(dòng)畫特效”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

如何使用

要使用該SVG文字動(dòng)畫特效，要在頁(yè)面中引入segment.js，它用于動(dòng)畫SVG路徑，d3-ease，用于制作easing動(dòng)畫過渡效果，以及l(fā)etters.js。

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

HTML結(jié)構(gòu)

可以使用一個(gè)<p>容器來包裹需要制作動(dòng)畫效果的文字。

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

設(shè)置和調(diào)用插件

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

單個(gè)值：可以被所有字母接收。

數(shù)組：數(shù)組中的第一個(gè)元素會(huì)被第一個(gè)字母接收，第二個(gè)元素被第二個(gè)字母接收，以此類推。

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

//每個(gè)選項(xiàng)可以定義為單個(gè)也可以定義為數(shù)組

var options = {    

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

px    weight: 5,         // 粗體，px    

rounded: false,    // 字母結(jié)尾圓角    

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

duration: 1,       // 每個(gè)字母的動(dòng)畫展示時(shí)長(zhǎng) (seconds)    

delay: [0, 0.1],  // 每個(gè)字母間的動(dòng)畫延時(shí)    

fade: 0.5,         // 漸顯效果的時(shí)長(zhǎng)(seconds)    

easing: d3_ease.easeCubicInOut.ease,   // 緩沖動(dòng)畫效果    

inpidualDelays: false     // 默認(rèn)false，如果設(shè)置成false，則動(dòng)畫效果會(huì)從左到右過度展示，如果是true，字母動(dòng)畫效果是同步展示 };

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

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

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

讀到這里，這篇“SVG怎么實(shí)現(xiàn)文字動(dòng)畫特效”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。