使用炫酷的vue动画库，轻松给网站上大分

关于vue的动画库有很多，但今天我只分享两个，GSAP和Vue-Lottie是个人认为目前功能比较强大的动画库。

GSAP全称为GreenSock Animation Platform，是一个从flash时代一直发展到今天的专业动画库。来看一下如何在vue项目中使用：

和其他动画库一样，你可以使用npm或cdn等方式去安装，安装和使用都相对简单，在组件内单独引入，也可以在main.js文件中进行全局挂载。通过官方文档去查找对应的动画方法，即可调用。

GSAP是一个高性能的动画库，可以处理大量的动画效果，可以满足各种定制需求，并且具有良好的兼容性，下面我们来感受一下官网上的案例效果：

Lottie是一个库，可以解析使用AE制作的动画，而Vue-Lottie是将Lottie封装后支持Vue框架。你可以将Vue-Lottie看作是一个用于创建动态图标的动画库。

它上面有海量的动画，使用JSON的方式导出即可在项目中使用。通过Vue组件的方式来控制动画的播放，暂停，重复等。当然，条件允许的话，你还可以使用Adobe After Effects等工具来创建自定义的动画文件。

接着来看一下它的使用，找到需要使用的动画，选择json格式导出：

在项目中执行这串代码：

将导出的json文件放置asset文件夹下：

main.js中导入vue-lottie并挂载，然后就可以在组件内导入asset文件夹下的json文件来使用了。

经过以上步骤，就可以以组件的方式来使用了。并且支持调整动画效果，在处理大量动画时，vue-lottie可能会出现性能问题，需要进行优化。