lottie-web 的使⽤说明
1.h5；
准备好json ⽂件；2. vue端
2-1：npm install lottie-web；具体详情戳 ==><!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="gw.alipayobjects/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: ElementById("scrlBotm"), // 容器 //渲染⽅式，有"html"、"canvas"和"svg"三种        });  </script></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24import lottie from 'lottie-web'var animation = lottie.loadAnimation({  container: element, // the dom element  renderer: 'svg',  loop: true,  autoplay: true,  animationData: animationData, // the animation data  rendererSettings: {    context: canvasContext, // the canvas context    scaleMode: 'noScale',    cl
earCanvas: false,    progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.    hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)  }});
1
2
3
svg canvas4
5
6
7
8
9
10
11
12
13
14
15
16

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。