lottie-web的使用说明

Chenming_321

于 2019-09-05 12:00:58 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js html

本文链接：https://blog.youkuaiyun.com/Chenming_321/article/details/100555327

1.h5；
犸良demo地址
准备好json 文件；

<!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>lottie Demo</title>
    <!-- 第一步: 引入CDN -->
    <script src="https://gw.alipayobjects.com/os/lib/lottie-web/5.5.6/build/player/lottie.min.js"></script>
  </head>
  <body>
    <!-- 第二步: 创建容器 -->
    <div id="container"></div>
  </body>
  <script>
    // 第三步: 实例化
      var ruelsLottie =  lottie.loadAnimation({
            path:'./rules.json',  loop:true,
            autoplay:true, 
            renderer:'svg',
            container: document.getElementById("scrlBotm"), // 容器 //渲染方式，有"html"、"canvas"和"svg"三种  
      });
  </script>
</html>