借助Lottie实现前端svg动图效果

最新推荐文章于 2025-06-07 03:51:52 发布

方安乐

最新推荐文章于 2025-06-07 03:51:52 发布

阅读量850

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/yangguangxiadewo/article/details/135414454

链接：Lottie简介 + 结合到vue3中使用_vue lottie-CSDN博客

知识常学常新，今天看同事写的项目，全部用svg实现的，太酷炫了。然后就发现一个宝藏插件Lottie，利用它就可以不用自己手搓svg实现svg酷炫动图效果。

小伙伴快来看下吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg animate</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.1/lottie.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="animation"></div>
</body>
<script>
    const animation = bodymovin.loadAnimation({
        container: document.querySelector('.animation'), // 需要渲染动画的dom元素
        path: './氧气.json', // 动画文件
        renderer: 'svg', // 渲染方式
        loop: true, // 是否循环播放
        autoplay: