做一个简单的记录，直接贴代码吧，主要还是设计师提供的那个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. SqlServer中sqlmaint 实用工具和xp_sqlmaint扩展过程

    sqlmaint 实用工具可以对一个或多个数据库执行一组指定的维护操作.使用 sqlmaint,可以运行 DBCC 检查.备份数据库及其事务日志.更新统计以及重建索引.所有数据库维护活动都会生成报表, ...

  2. 转：winform 打包自动安装数据库

    vs2005 打包,并自动安装SQL数据库.创建部署项目    1.   在“文件”菜单上指向“添加项目”,然后选择“新建项目”.    2.   在“添加新项目”对话框中,选择“项目类型”窗格中的“ ...

  3. extern “C”的作用详解

    extern "C"的主要作用就是为了能够正确实现C++代码调用其他C语言代码.加上extern "C"后,会指示编译器这部分代码按C语言的进行编译,而不是C+ ...

  4. MongoDB基础之 用户和数据库基于角色的访问控制

    mongod 关键字参数:--auth 默认值是不需要验证,即 --noauth,该参数启用用户访问权限控制:当mongod 使用该参数启动时,MongoDB会验证客户端连接的账户和密码,以确定其是否 ...

  5. Rafy框架

    l  什么是Rafy框架? -------- Rafy 是一个面向企业级开发的插件化快速开发框架. l  Rafy的优点是什么? ------快速开发.产品线工程.一套代码可同时生成并运行 C/S.单 ...

  6. Hive 整合Hbase

    摘要 Hive提供了与HBase的集成,使得能够在HBase表上使用HQL语句进行查询 插入操作以及进行Join和Union等复杂查询.同时也可以将hive表中的数据映射到Hbase中.     应用 ...

  7. vue2.0学习笔记之组件

    [易错点]:  1.   组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2.   组件名称采用横杠间隔命名时,第一个字母大写会报错.   写法一:全局 ...

  8. Centos7 Nginx 开机启动

    Centos 系统服务脚本目录: 用户(user) 用户登录后才能运行的程序,存在用户(user) /usr/lib/systemd/ 系统(system) 如需要开机没有登陆情况下就能运行的程序,存 ...

  9. BZOJ2095:[POI2010]Bridges(最大流,欧拉图)

    Description YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个小岛之间不会有两座桥,并且从一个小岛可以到另外任意一个小岛.现在YYD想骑单车从小岛1 ...

  10. C++的技术探究

    C++深究 函数指针 double pam(int, double); // prototype double (*pf)(int, double); // declare function poin ...