lottie动画的使用
用途：用来做动画。
优缺点：（copy的）
优点：
由于将动画变成了json字符串，相比几M体积的gif图，等质量下的压缩率达到80%及以上。
支持云端动画资源加载，上线新的动画效果不需要发版
支持实时渲染 After Effects 动画，让 app 加载动画像加载图片一样简单。
因为Lottie是利用json文件生成动画，从而避免了不同分辨率、不同设备尺寸上面动画效果存在差异的问题。
只需要进行一动画绘制，生成一次json文件，跨端使用（android、ios、web）
Android: API16+
IOS : IOS8+ /MacOS 10.10+
WEB：调用Bodymovin提供的js库 — bodymovin.js
拿到动画.json文件后，研发可以灵活的自行修复动画的颜色、路径等数据，自行扩展
拥有完整丰富的API，除了常规的播放、控制进度、暂停控制，还可以缓存、添加额外的原生UI
在未开启硬件加速的情况下，帧率、内存，CPU都比属性动画差，开启硬件加速后，性能差不多。
缺点：
Lottie尚不支持效果菜单中的表达式或任何效果。
使用alpha遮罩会影响性能。 如果你使用的是alpha遮罩或alpha倒置遮罩，遮罩的大小会对性能产生更大的影响。
Lottie还不支持阴影，颜色叠加或笔触等图层效果。
导出比您想要支持的最宽屏幕更宽的动画，使开发者在Android上使用centerCrop类型或在iOS上使用aspectFill内容模式。
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="scripts/bodymovin.js"></script> <title>Document</title> <style> html { margin: 0; padding: 0; background-color: black; } body, html { width: 100%; height: 100%; overflow: hidden; background-color: #000; } #svgContainer { max-width: 100%; max-height: 100%; background-color: #000; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <div id="svgContainer"></div> </body> <script> /* Shapes */ var svgContainer = document.getElementById("svgContainer"); var animItem = bodymovin.loadAnimation({ wrapper: svgContainer, animType: "svg", loop: true, path: "https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json", }); </script> </html>
react工程中：
安装：
npm i lottie-web --save
引入：
import { createElement, useEffect } from "rax";
import View from "rax-view";
import Picture from "@ali/rax-picture";
import Modal from "rax-modal";
import bodymovin from "lottie-web"
import "./index.less";
function CertificateModel(props) {
const { visible, close, activityInfo } = props;
function loadingBg() {
bodymovin.loadAnimation({
wrapper: document.getElementById("container-bg"),
animType: "svg",
loop: false,
autoPlay: true,
path: "https://dev.g.alicdn.com/alisports-fe/assets/0.0.88/card-Game/gaizhang.json",
});
}
useEffect(() => {
loadingBg()
}, [])
return (
<Modal
visible={visible}
onHide={() => { }}
onShow={() => { }}
onMaskClick={close}
contentStyle={{
position: "absolute",
width: "auto",
height: "auto",
background: "none",
}}
>
<View className="modal-container">
<div id="container-bg" />
<View className="container-box">
<Picture
className="container-img"
source={{
uri: activityInfo?.credentialUrl || 'https://img.alicdn.com/imgextra/i3/O1CN01iK5xKM1xJmhFkERfU_!!6000000006423-2-tps-600-800.png',
}}
resizeMode="cover"
/>
</View>
<View className="container-icon" onClick={() => close()} />
</View>
</Modal>
);
}
export default CertificateModel;
参考文档：https://github.com/airbnb/lottie-web
Lottie材料网站：https://lottiefiles.com/
参考demo:
1.https://github.com/airbnb/lottie-web/blob/master/demo/bodymovin/index.html
2.https://codepen.io/airnan/pen/MPmQQB
