Lottie 动画使用指南
Lottie 动画是爱彼迎出品的能运行在 H5、Android 和 iOS 上的特效动画，废话不多说，直接开整。
注意：本文只介绍在页面引入脚本的方式，vue 和 react 上暂时没尝试过，不过官方有教程。
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.anima {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="anima"></div>
<script src="./lottie.min.js"></script>
<script>
let elem = document.getElementById('anima');
console.log(elem)
let animation = lottie.loadAnimation({
container: document.getElementById('anima'), // Required
path: 'http://192.168.12.101/notification.json', // Required
renderer: 'svg/canvas/html', // Required
loop: true, // Optional
autoplay: true, // Optional
name: "Hello World", // Name for future reference. Optional.
});
</script>
</body>
</html>
这儿需要注意一下，建议在演示动画的时候去下载一个 xampp 来搭建一个本地服务器，把相关的文件都扔在 xampp\htdocs 文件夹下，然后从浏览器里面输入本地地址进入页面，不然直接打开本地文件会出现跨域报错问题，比如我现在的地址是： http://192.168.12.101/lottie.html 。
这里附上官网的单页面使用教程，涉及 vue 和 react。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： Vue 使用记录分享
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论