關於vue的動畫庫有很多，但今天我只分享兩個，GSAP和Vue-Lottie是個人認為目前功能比較強大的動畫庫。

1、GSAP

地址：https://greensock.com

GSAP全稱為GreenSock Animation Platform，是一個從flash時代一直髮展到今天的專業動畫庫。來看一下如何在vue項目中使用：

和其他動畫庫一樣，你可以使用npm或cdn等方式去安裝，安裝和使用都相對簡單，在組件內單獨引入，也可以在main.js文件中進行全局掛載。通過官方文檔去查找對應的動畫方法，即可調用。

GSAP是一個高性能的動畫庫，可以處理大量的動畫效果，可以滿足各種定製需求，並且具有良好的兼容性，下面我們來感受一下官網上的案例效果：

2、Vue-Lottie

地址：https://lottiefiles.com

Lottie是一個庫，可以解析使用AE製作的動畫，而Vue-Lottie是將Lottie封裝後支持Vue框架。你可以將Vue-Lottie看作是一個用於創建動態圖標的動畫庫。

它上面有海量的動畫，使用JSON的方式導出即可在項目中使用。通過Vue組件的方式來控制動畫的播放，暫停，重複等。當然，條件允許的話，你還可以使用Adobe After Effects等工具來創建自定義的動畫文件。

接着來看一下它的使用，找到需要使用的動畫，選擇json格式導出：

在項目中執行這串代碼：

將導出的json文件放置asset文件夾下：

main.js中導入vue-lottie並掛載，然後就可以在組件內導入asset文件夾下的json文件來使用了。

經過以上步驟，就可以以組件的方式來使用了。並且支持調整動畫效果，在處理大量動畫時，vue-lottie可能會出現性能問題，需要進行優化。