点赞 + 关注 + 收藏 = 学会了
本文简介
本文可在公众号「德育处主任」免费阅读
偶尔间在网页上看到一些很炫酷的小动画，好比loading殊效，还能控制这个动画的状态，真的觉得很神奇。
大部分做后端的不想碰前端，做前端的不想碰动画殊效。
实在啊，很多时间不须要自己写炫酷的殊效，会调用第三方库已经挺厉害的了。好比今天要先容的 Lottie。
Lottie 是什么？
Lottie官网 https://airbnb.io/lottie/
Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库，它可以解析利用 Bodymovin 导出为 JSON 的 Adobe After Effects 动画，并在移动设备和 Web 上本地渲染它们！
After Effects 是什么？Bodymovin 又是什么？
别怕，这些我也不会。作为前端，我会拿别人做好的东西来用
简单来说，Lottie 是 Airbnb 开发的动画库，特别适合前端开发人员。它可以轻松实现复杂的动画效果，不须要手写大量代码，只需引入现成的 JSON 文件即可。
今天不讲iOS，不讲Android，只讲怎样在前端利用 Lottie。
安装 Lottie Web
要在前端项目中利用 Lottie，要么用 CDN 的方式引入，要么通过 NPM 下载。
CDN
在这个网址可以找到 Lottie 的各个版本的JS文件： https://cdnjs.com/libraries/bodymovin
我利用的是 5.12.2 这个版本
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- #lottie {
-
- width: 200px;
- height: 200px;
- }
- </style>
- </head>
- <body>
- <div id="lottie"></div>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
- <script>
- var animation = lottie.loadAnimation({
-
- container: document.getElementById('lottie'), // 渲染动画的容器
- renderer: 'svg', // 渲染方式
- loop: true, // 是否循环
- autoplay: true, // 是否自动播放
- path: './Animation_1.json' // 动画 JSON 文件的路径
- });
- </script>
- </body>
- </html>
NPM
用下面这个命令将 Lottie 下载到你的项目里。
动画资源下载
前面先容到，动画是用 AE 做好，然后用 Bodymovin 插件将动画转换成一个 JSON 文件，前端就可以利用 lottie-web 将这个 JSON 文件的内容转换成图像渲染到欣赏器页面上。
如果想要现成的动画资源可以在这些地方找找
- lottiefiles：https://lottiefiles.com/
- iconfont的lottie模块：https://www.iconfont.cn/lotties/index?spm=a313x.activity_lists.i3.11.50913a81XAlei7
- Creattie：https://creattie.com/
- Lottielab（自己编辑、下载）：https://www.lottielab.com/
我这里也给各人预备了一个动画文件，各人可以拿它来练手。
- 【百度网盘】链接: https://pan.baidu.com/s/1Qnp3BAAT7r7ja7_gzYcXSw 提取码: d7gt
- 【阿里云盘】链接：https://www.alipan.com/s/sfMVak2XhBf 提取码：35kw
实现第一个 Lottie 动画
我通过 React 脚手架创建了一个 React 项目来举例分析怎样利用 Lottie，在 Vue 里的用法也是一样的。
- import React, { useEffect, useRef } from 'react';
- import lottie from 'lottie-web';
- import animationData from './assets/animations/Animation.json';
- function App() {
- const containerRef = useRef(null);
- useEffect(() => {
- const anim = lottie.loadAnimation({
- container: containerRef.current,
- renderer: 'svg',
- loop: true,
- autoplay: true,
- animationData: animationData
- });
- }, []);
- return <div ref={containerRef} style={
- {width: "300px", height: "300px"}}></div>;
- }
- export default App;
然后引入 lottie-web 以及放在前端项目里的 Animation.json 动画文件。
最后调用 lottie.loadAnimation() 来启动动画。它将一个对象作为唯一参数。
- container：动画容器，这个例子通过 React 提供的语法获取到 DOM 元素。
- renderer：渲染方式，可选 svg、canvas 和 html。
- loop：是否循环播放。
- autoplay：是否自动播放。
- animationData：本地的动画数据的对象。
这里须要注意，animationData 吸收的动画对象是存放在前端项目标 JSON 文件，如果你的动画文件是存在别的服务器，须要通过一个 URL 引入的话就不能用 animationData 来吸收了，而是要改成 path。
[code][/code]
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
