lottie-web的使用说明

最新推荐文章于 2024-05-16 23:38:10 发布

Chenming_321

最新推荐文章于 2024-05-16 23:38:10 发布

阅读量4.7k

点赞数

分类专栏： vue js html

本文链接：https://blog.csdn.net/Chenming_321/article/details/100555327

版权

js 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

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>

vue端
2-1：npm install lottie-web；

import 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',
    clearCanvas: 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)
  }
});

具体详情戳 ==> lottie-web

Chenming_321

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
5
评论
lottie-web的使用说明

1.html；犸良demo地址准备好json 文件；<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
复制链接

扫一扫