如上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。

基於以上的截圖效果可以分析出以下是本次要實現的主要幾點：

• 文案呈圓環狀擴散開，擴散的同時文字變小
• 文字之間的間距從中心逐個擴散開，間距變大
• 文案呈圓環狀擴散開，擴散的同時文字變大
• 文字之間的間距從中心逐個聚攏，間距變小
• 動畫重複執行以上4個步驟

實現過程

核心代碼實現需要基於一下兩個庫：

Letterize.js是一個輕量級的JavaScript庫，它可以將文本內容分解為單個字母，以便可以對每個字母進行動畫處理。這對於創建複雜的文本動畫效果非常有用。

使用Letterize.js，你可以輕鬆地將一個字符串或HTML元素中的文本分解為單個字母，併為每個字母創建一個包含類名和數據屬性的新HTML元素。這使得你可以使用CSS或JavaScript來控制每個字母的樣式和動畫。

anime.js是一個強大的JavaScript動畫庫，它提供了一種簡單而靈活的方式來創建各種動畫效果。它可以用於HTML元素、SVG、DOM屬性和JavaScript對象的動畫。

通過使用Letterize.js以便可以對每個字母進行動畫處理，再結合anime.js即可創建各種動畫效果。本文不對這兩個庫做更多的詳細介紹，只對本次特效實現做介紹，有興趣的可以看看官網完整的使用文檔。

界面佈局

html就是簡單的本文標籤，也不需要額外的樣式，只需要在外層使用flex佈局將內容居中，因為本文的長度都是一樣的，所以完成後的文本內容就像一個正方形。

<div>
      <div class="animate-me">
        letterize.js&anime.js
      </div>
      <div class="animate-me">
        anime.js&letterize.js
      </div>
      ......
      <div class="animate-me">
        letterize.js&anime.js
      </div>
      <div class="animate-me">
        anime.js&letterize.js
      </div>
    </div>

動畫實現

1. 初始化 Letterize.js，只需要傳入 targets 目標元素，元素即是上面的 .animate-me 文本標籤。返回的 letterize 是包含所有選中的 .animate-me 元素組數。

const letterize = new Letterize({
  targets: ".animate-me"
});

2. 接下來初始化 anime 庫的使用，下面的代碼即創建了一個新的anime.js時間線動畫。目標是Letterize對象的所有字母。動畫將以100毫秒的間隔從中心開始，形成一個網格。loop: true 動畫將無限循環。

const animation = anime.timeline({
  targets: letterize.listAll,
  delay: anime.stagger(100, {
    grid: [letterize.list[0].length, letterize.list.length],
    from: "center"
  }),
  loop: true
});

3. 開始執行動畫，首先設置 「文案呈圓環狀擴散開，擴散的同時文字變小」，這裏其實就是將字母的大小縮小。

animation
  .add({
    scale: 0.5
  })

此時的效果如下所示：

4. 繼續處理下一步動畫，「文字之間的間距從中心逐個擴散開，間距變大」，這裏處理的其實就是將字母的間距加大，通過設置 letterSpacing 即可，代碼如下：

animation
  .add({
    scale: 0.5
  })
  .add({
    letterSpacing: "10px"
  })

此時的效果如下所示：

5. 後面還有2個步驟，「文案呈圓環狀擴散開，擴散的同時文字變大；文字之間的間距從中心逐個聚攏，間距變小」，換做上面的思路也就是將文字變大和將文字間距變小，增加相應的代碼如下：

  .add({
    scale: 1
  })
  .add({
    letterSpacing: "6px"
  });

最後

本文通過純 Letterize.js + Anime.js 實現了一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開和收起。anime.js還有很多的參數可以嘗試，有興趣的朋友可以嘗試探索看看~

看完本文如果覺得有用，記得點個贊支持，收藏起來説不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）

參考

動畫效果發佈者 Wojciech Krakowiak ：`https://codepen.io/WojciechWKROPCE/pen/VwLePLy
`