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

    System Detail 1. Context Switches / Interrupts type: GraphUnit: shortLabel: CounterContext switches ...

  2. mysql 建立索引的原则（转）

    索引查询是数据库中重要的记录查询方法,要不要进入索引以及在那些字段上建立索引都要和实际数据库系统的查询要求结合来考虑,下面给出实际中的一些通用的原则: 1. 在经常用作过滤器的字段上建立索引: 2. ...

  3. 使用 Visual Studio Team Services 和 IIS 创建持续集成管道

    若要将应用程序开发的生成.测试和部署阶段自动化,可以使用持续集成和部署 (CI/CD) 管道. 本教程介绍如何在 Azure 中使用 Visual Studio Team Services 和 Win ...

  4. Oracle EBS OPM 取消生产批

    --取消生产批 --created by jenrry SET serveroutput on; DECLARE p_batch_header_rec gme_batch_header%ROWTYPE ...

  5. Oracle EBS AP 取消付款

    --取消付款 created by jenrry 20170425 declare l_return_status varchar2(50); l_msg_count number; l_msg_da ...

  6. linux内核完全剖析——基于0.12内核-笔记（2）-统一编址和独立编址

    IO是什么 ? IO(Input and Output)是输入输出接口.是CPU和其他外部设备(如串口.LCD.触摸屏.LED等)之间通信的接口.一般的,我们说的IO就是指CPU的各种内部或外部外设. ...

  7. Python抓取zabbix性能监控图

    一.通过查询zabbix db的方式通过主机IP获取到所需要的graphid(比如CPU监控图.内存监控图等,每个图对应一个graphid),最后将图片保存到本地 注:该graph必须要在 scree ...

  8. 关于QT的QCombox的掉坑出坑

    最近项目中开发在用到QCombox,然而在开发中,踩到了一个坑,花了一个晚上,一直在想,好在最后找到问题所在了. 这是业务的流程.直接说重点:QCombox在下拉窗更新数据的时候,会默认把下拉窗的第一 ...

  9. 李嘉诚 《Are you ready》

    当你们梦想着为伟大成功的时候,你有没有刻苦的准备? 当你们有野心作领袖的时候,你有没有服务于人的谦恭? 我们常常都想有所获得,但我们有没有付出的情操? 我们都希望别人听到自己的话,我们有没有耐性聆听别 ...

  10. ISO8583组包、解包

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace POS. ...