bodymovin实现将AE动画转换成HTML5动画
做一个简单的记录，直接贴代码吧，主要还是设计师提供的那个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动画的更多相关文章
- Bodymovin：Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画
转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...
- 大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
- 看逐浪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的插 ...
- HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...
- Flash生成HTML5动画方法
方法一:利用“swiffy”将Flash转换成HTML5动画. 首先,我们需要下载一款基于“Flash”程序的插件,名称为“swiffy”,这是一款由谷歌推出的一个Flash扩展,可以通过“Fla ...
- 绝对震撼 7款HTML5动画应用及源码
1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真.刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当 ...
- 分享9款很有创意的HTML5动画
1.HTML5 SVG Loading 动画加载特效 这是一款基于HTML5/CSS3和SVG的Loading加载动画特效,一共有4种不同的动画效果.每一组Loading动画都非常可爱,他们都非常欢快 ...
- 超酷创意HTML5动画演示及代码
HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...
- html5中将图片的绝对路径转换成文件对象
html5中将图片的绝对路径转换成文件对象 将图片的绝对路径转换成base64编码,请看这篇文章 我们先来理解基本知识点: 1. 理解HTML5中的FileList对象与file对象. 在HTML5中 ...
随机推荐
- 如何监视 Azure 中的虚拟机
通过收集.查看和分析诊断与日志数据,可以利用很多机会来监视 VM. 若要执行简单的 VM 监视,可以在 Azure 门户中使用 VM 的“概述”屏幕. 可以使用扩展在 VM 上配置诊断以收集更多指标数 ...
- Windows Server查看和记录远程登录信息的方法
前两天我的一台Windows Server 2012R2的服务器中了传说中的cryptowall病毒,所有数据文件都被加密,需要我支付1个比特币才能解码.幸好服务器上没什么重要的文件,还好我没钱,我选 ...
- Another reason why SQL_SLAVE_SKIP_COUNTER is bad in MySQL
It is everywhere in the world of MySQL that if your replication is broken because an event caused a ...
- Centos7源码安装httpd2.4版本web服务器
我们的系统平台是在centos7.5的环境下安装httpd2.4版本的软件,2.4版本的软件有一个特征就是需要安装arp包以及arp-util包才可以. 1.首先是下载httpd2.4版本的包,以及安 ...
- DevExpress09、SimpleButton、CheckButton、DropDownButton、HScrollBar控件和VScrollBar控件
SimpleButton控件 使用SimpleButton控件, 创建一个Button按钮, 可以通过其Image属性添加图片: 该控件与WinForm自带的Button按钮类似: 效果如下: Che ...
- XtraEditors四、TextEdit、ButtonEdit、PictureEdit、RadioGroup、PopupContainerEdit
TextEdit控件 以文本框的形式绑定各种形式的选择框: 文本框设置 输入 密码 字符 时, 要有 * 号掩盖输入的字符, 代码如下: textEdit1.Properties.PasswordCh ...
- 用ASP.NET Web API技术开发HTTP接口
开发工具 Visual Studio 2013 SQL Server 2008 R2 准备工作 启动Visual Studio 2013,新建一个ASP.NET Web应用程序,命名为SimpleAP ...
- 关于 X509Certificate2 找到文件路径的问题
由于微信退款功能需要用到证书,当调用 X509Certificate2 的时候,会提示找不到文件而报错. X509Certificate2 cert = new X509Certificate2(文件 ...
- 为什么web3 1.0 的接口有personal_*和eth_*的，两者有什么不同
看https://github.com/ethereum/EIPs/pull/712 Why personal_* namespace instead of eth_* namespace? I be ...
- 基于window 7安装ubuntu 18.04双系统
window7下安装ubuntu双系统 1.首先下载ubuntu镜像文件 进入ubuntu官网,http://releases.ubuntu.com/18.04/.下载最新镜像,ubuntu-18.0 ...