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

    http://www.ai-start.com/dl2017/html/lesson4-week2.html  达叔深度学习笔记 http://cs231n.github.io/convolution ...

  2. [CentOS7] [VMWARE] 增加磁盘空间后扩大逻辑分区

    Learn to rescan disk in Linux VM when its backed vdisk in vmware is extended. This method does not r ...

  3. MySQL优化之Explain命令解读，optimizer_trace

    简述: explain为mysql提供语句的执行计划信息.可以应用在select.delete.insert.update和place语句上.explain的执行计划,只是作为语句执行过程的一个参考, ...

  4. [原创]使MySQL注释语句在后台能够输出的方法

    开启general log或slow log的时候,前端发出的sql语句中的注释都别屏蔽掉了. 本意加注释我们想通过注释来快速知道sql是由哪个业务模块发出的.这点对dba和研发很有帮助. 一种变通的 ...

  5. Dictionary CovertTo List

    示例代码 假设有如下一个Dictionary 要转换成List Dictionary<string, string> dicNumber = new Dictionary<strin ...

  6. 向kindle传送文件

    自从有了kindle以后,只要不是pdf的电子书,基本上都用kindle来看了,毕竟水墨屏还是很护眼的,但是这就带来了向kindle传输文件的问题 绝大部分的电子书用邮件推送就可以解决了,但是还有一些 ...

  7. JVM & GC 笔记

    0. 说明 转载并修改自JVM 1. JVM 1.1 什么是JVM JVM为Java虚拟机(Java Virtual Machine) Runtime data area,运行时数据区. 包含5个区域 ...

  8. js 排序，去重

    前几天 有一个需求要做一个 勾选的按钮 ,用的前端框架时 extjs   . 需求是这样的:选择数据后点击勾选 会把数据 放到一个全局变量里,然后点击另外一个提交按钮 弹出一个窗口 加载这些已经勾选的 ...

  9. python解析式

    一.列表解析式 列表解析是外面一对中括号,它返回的是列表. 一般形式为:[expr for item in itratoble] print([i+1 for i in range(10)]) #结果 ...

  10. AndroidStudio编译error:app:validateReleaseSigning'Keystore file not found for signing config 'release

    使用AndroidStudio编译时提示error: Error:Execution failed for task ‘:app:validateReleaseSigning’. > Keyst ...