[其它]Lottie动画使用指南 #11

cookiepool · 2019-10-08T06:20:23Z

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 id="anima" 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。
Vue-Lottie
React-Lottie

The text was updated successfully, but these errors were encountered:

cookiepool added the 前端相关前端相关 label Nov 17, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[其它]Lottie动画使用指南 #11

[其它]Lottie动画使用指南 #11

cookiepool commented Oct 8, 2019 •

edited

Loading

[其它]Lottie动画使用指南 #11

[其它]Lottie动画使用指南 #11

Comments

cookiepool commented Oct 8, 2019 • edited Loading

cookiepool commented Oct 8, 2019 •

edited

Loading