Lottie 的简单使用

441 阅读1分钟

Lottie 是什么

Lottie 是一个用于 Android,iOS,Web 和 Windows 的库,用于解析 JSON 格式的 Adobe After Effects 动画,可以在移动设备和网页上呈现 官网文档

如果设计师给力,可以将他/她做的动画效果导出成 JSON 文件,咱们直接用就好了~(CSS 大佬们可以无视)

本地没有设计师没关系,咱们有互联网啊,大佬们开源了他们设计的动画,可以直接用,文中有资源链接

前端使用 Lottie-web 处理动画

引入 lottie-web

npm install lottie-web

封装 Lottie 组件

很多大佬都有封装过,也有在 npm 上发布 lottievue-lottie

我就不在文章中贴代码了,对源码感兴趣可以戳下方链接,源码中有详细注释

推荐一个网站 「codesandbox」(如果访问慢建议科学上网)

完整代码 & 在线体验地址: codesandbox.io/s/friendly-…

下载动画资源

useanimations 建议科学上网下载图标

flighticon

lordicon

演示