前言

一谈到前端动画，最先想到的就是css3，当然这是其中一种方式，甚至有许多动画库，aniamte.css就是其中的一种。

我之前也谈到过三种做前端动画的方式 https://blog.csdn.net/glorydx/article/details/116102127

但现在，再补充一种，由设计师将动画设计好，形成json文件，前端直接渲染的动画。当然gif也可以，但json相对来说体积更好，更不容易失真。

言归正传，前端如何渲染json动画？

简单介绍

前端最普遍使用的渲染json的插件是lottie，我也不对它多做文字介绍，感兴趣的同学前往官网进一步了解https://airbnb.design/lottie/

根据项目的不同，lottie分为几个不同的平台，分别是
lottie-web： https://github.com/airbnb/lottie-web
lottie-android： https://github.com/airbnb/lottie-android
lottie-ios： https://github.com/airbnb/lottie-ios
lottie-react-native： https://github.com/lottie-react-native/lottie-react-native

vue通常使用lottie-web，今天以lottie-web为例，介绍这个插件。

安装

npm install lottie-web

vue组件使用

先准备好一些json的动画，用js导出，这里这样做是因为vue eslint 导入的限制。

相关内容

也许你会感到为难，你不是设计师，没有那么多动画json可以为你提供，
https://icons8.com/free-animated-icons该网站提供了几百种免费的json动画可以供你选择

你可以去我自己的网站查看这个组件封装使用的具体效果
http://www.dxyx-together.cn/#/home/animationIcon