做一个简单的记录，直接贴代码吧，主要还是设计师提供的那个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

bodymovin实现将AE动画转换成HTML5动画的更多相关文章

  1. Bodymovin：Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...

  2. 大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...

  3. 看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\canvas\html5动画）

      名词解解释 adobe After Effects AE:adobe After Effects,adobe公司的专业视频制作软件. Bodymovin插件预览 Bodymovin:是一个AE的插 ...

  4. HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

    接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...

  5. Flash生成HTML5动画方法

      方法一:利用“swiffy”将Flash转换成HTML5动画. 首先,我们需要下载一款基于“Flash”程序的插件,名称为“swiffy”,这是一款由谷歌推出的一个Flash扩展,可以通过“Fla ...

  6. 绝对震撼 7款HTML5动画应用及源码

    1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真.刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当 ...

  7. 分享9款很有创意的HTML5动画

    1.HTML5 SVG Loading 动画加载特效 这是一款基于HTML5/CSS3和SVG的Loading加载动画特效,一共有4种不同的动画效果.每一组Loading动画都非常可爱,他们都非常欢快 ...

  8. 超酷创意HTML5动画演示及代码

    HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...

  9. html5中将图片的绝对路径转换成文件对象

    html5中将图片的绝对路径转换成文件对象 将图片的绝对路径转换成base64编码,请看这篇文章 我们先来理解基本知识点: 1. 理解HTML5中的FileList对象与file对象. 在HTML5中 ...

随机推荐

  1. Oracle 与 mysql 建立透明网关

    1.1.1.   文档编写目的 项目上需要做与Mysql数据库的对接,然而Oracle与Mysql数据库是异构的,因此这里采用透明网关的方式来解决. 另,项目上的环境为APP:12.2.6 ; DB: ...

  2. Oracle EBS INV 挑库发放物料搬运单

    create or replace PROCEDURE XX_TRANSACT_MO_LINE AS -- Common Declarations l_api_version NUMBER := 1. ...

  3. 关于Apache连接数限制的设置

    昨天晚上收到监视团队的电话,说web服务器连不上.(作为DBA,这貌似超出了我的工作范畴啊...) 于是马上VPN连上服务器,发现网络负载均衡下的两台Apache服务器都没有响应,而服务器OS层面上正 ...

  4. Python初学者第三天 运算符、while循环

    3day Python基础语法 1.运算符:算数运算符.比较运算符.赋值运算符.逻辑运算符 A.算数运算符:a=10,b=3 + 加   a+b - 减  a-b * 乘  a*b / 除  a/b ...

  5. Spark 集群搭建

    0. 说明 Spark 集群搭建 [集群规划] 服务器主机名 ip 节点配置 s101 192.168.23.101 Master s102 192.168.23.102 Worker s103 19 ...

  6. maven 错误列表

    1.编译错误 qcadoo-maven-plugin>mvn clean install No compiler is provided in this environment. Perhaps ...

  7. linux 下获取文件最后几行

    在Linux下,获取文件倒数几行的命令是: tail -n 10 your_filename     #获取倒数10行

  8. Dalvik指令备忘

    跳转指令 if-eq vx, vy, 目标 如果vx == vy注2,跳转到目标.if-ne vx,vy, 目标 如果vx != vy注2,跳转到目标. if-lt vx,vy, 目标 如果vx &l ...

  9. November 10th, 2017 Week 45th Friday

    A little bit of mercy makes the world less cold and more just. 多一点怜悯就可以让这个世界少一点冷酷而多一点正义. Maybe there ...

  10. Mysql表类型(存储引擎)的比较

    面试官问:你知道mysql有哪些存储引擎,区别是啥? 我:一脸闷逼,于是乎下来补一补,以作备查 1.和大多数数据库不同,MySQL 中有一个存储引擎的概念,针对不同的存储需求可以选择最优的存储引擎. ...