bodymovin实现将AE动画转换成HTML5动画

最新推荐文章于 2021-09-23 15:42:50 发布

weixin_34128237

最新推荐文章于 2021-09-23 15:42:50 发布

阅读量719

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/liliangel/p/10096996.html

版权

做一个简单的记录，直接贴代码吧，主要还是设计师提供的那个json

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #f7f7f7;
            }
            
        </style>
        <script src="https://www.twobike.cn/static/lib/bodymovin/bodymovin.min.js"></script>
    </head>
    <body>
    
        <div class="body-movin" id="bodyMovin">
            
        </div>
    </body>

    <script>
        var animData = {
              wrapper: document.getElementById('bodyMovin'),
              animType: 'svg',
              loop: true,
              prerender: true,
              autoplay: true,
              path: "https://www.twobike.cn/static/lib/bodymovin/loading-bike.json"
          };
          bodymovin.loadAnimation(animData);
    </script>
</html>

demo地址

https://www.twobike.cn/demo/20181210/body-movin.html

官网地址

https://www.lottiefiles.com/?page=1

转载于:https://www.cnblogs.com/liliangel/p/10096996.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34128237

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bodymovin实现将AE动画转换成HTML5动画

做一个简单的记录，直接贴代码吧，主要还是设计师提供的那个json<!DOCTYPE html><html> <head> <style> body { background-color: #f7f7f7; } ...
复制链接

扫一扫