做一个简单的记录，直接贴代码吧，主要还是设计师提供的那个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. [Python_6] Python 配置 MySQL 访问

    0. 说明 Python 访问 MySQL 数据库,需要安装 MySQL 的 Python 插件. 1. 安装 MySQL 插件 pip install PyMySQL 2. 编写代码 # -*-co ...

  2. C++进阶书籍（转）

    推荐的阅读顺序:level 1从<<essential c++>>开始,短小精悍,可以对c++能进一步了解其特性以<<c++ primer>>作字典和课 ...

  3. Mojave使用pyenv安装python-zlib错误

    mojave使用pyenv编译python出现 zipimport.ZipImportError: can't decompress data; zlib not available错误 解决方案: ...

  4. 详解动态规划（Dynamic Programming）& 背包问题

    详解动态规划(Dynamic Programming)& 背包问题 引入 有序号为1~n这n项工作,每项工作在Si时间开始,在Ti时间结束.对于每项工作都可以选择参加与否.如果选择了参与,那么 ...

  5. 【Python】【unittest】unittest测试框架中setup,teardown与setupclass,teardownclass的区别

    # -*- coding:utf-8 -*- import unittest def runTest(testcaseclass,testcase=[]): suite = unittest.Test ...

  6. 小程序报错数据传输长度为 xxx 已经超过最大长度 xxx

    这个错误通常在通过base64给images赋值时发生,setData()微信设置的一次最大传输长度为1M,所有如果编码后的base64字符串长度超过了1M就会报这个错误. 如何解决? 我们可以采取曲 ...

  7. BZOJ4735:你的生命已如风中残烛(组合数学)

    Description 众所周知,萌萌哒六花不擅长数学,所以勇太给了她一些数学问题做练习.但是今天六花酱不想做数学题,于是他们开始打牌. 现在他们手上有m张不同的牌,牌有两种:普通牌和功能牌.功能牌一 ...

  8. mpvue使用vant Weapp运行npm run build命令打包后失效

    最近在使用mpvue开发微信小程序,在开发过程中使用有赞的小程序ui框架—— vant Weapp ,至于如何使用在我个人博客中有一篇关于如何使用vant Weapp ,需要的同学请点进这里自行查看. ...

  9. 天地图api地址

    天地图地址 http://lbs.tianditu.com/api-new/examples.html 参考资料 http://lbs.tianditu.com/api-new/class.html

  10. 【转】form data和request payload的区别

    HTML <form> 标签的 enctype 属性 在下面的例子中,表单数据会在未编码的情况下进行发送: <form action="form_action.asp&qu ...