lottie web动画加载

最新推荐文章于 2025-03-11 21:51:30 发布

榆木脑袋敲啊敲

最新推荐文章于 2025-03-11 21:51:30 发布

阅读量2.5k

点赞数

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

本文链接：https://blog.youkuaiyun.com/gaoqiff/article/details/106035233

版权

本文介绍如何利用Lottie库在Web上加载由Adobe After Effects创建并导出为JSON的动画，实现跨平台的灵动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<title>test animation</title>
<!--https://github.com/airbnb/lottie-web/tree/v5.6.9/build/player/lottie.min.js-->
<script src="./lottie.min.js"></script>
<style>
    #container, #container1{
            width: 200px;
            height: 200px;
        }
</style>

<body>
    <div id="container"></div>
    <div id="container1"></div>
</body>

</html>
<script>

    window.onload = animate_path;
    //path路径加载
    function animate_path() {
        let animation = lottie.loadAnimation({
            container: document.getElementById('container'),
            renderer: 'svg',
            loop: true,//循环加载
            autoplay: true,//自动播放
            path: './gatin/data.json',//如果没有图片做动效,全是设计师用画的矢量图形
        })
        animate_animationData();
    }
    //json数据加载