lottie web动画加载

最新推荐文章于 2024-06-18 23:46:31 发布

榆木脑袋敲啊敲

最新推荐文章于 2024-06-18 23:46:31 发布

阅读量2.4k

点赞数

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

本文链接：https://blog.csdn.net/gaoqiff/article/details/106035233

版权

<!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数据加载

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

榆木脑袋敲啊敲

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
lottie web动画加载

<!DOCTYPE html><html><title>test animation</title><script src="./lottie.min.js"></script><style> #container, #container1{ width: 200px; height: 200px; }</style><.
复制链接

扫一扫