html如何加载ae做好的,AE转JS动画,lottie.js和bodymovin的简易使用心得
PS:描述不清或者描述错误请见谅...
AE动画转换JS动画使用了lottie.js库
制作流程:
1、设计师使用PS或者AI制作静态设计稿;
2、设计师对设计稿图层进行分类
3、导入AE制作
4、AE导出文件,对应使用的AE插件为bodymovin
5、前端开发 接收设计师发来的文件,提取相关代码,写入需要使用的页面。
前端的工作:
1、设计师发来的文件里,通常包含data.js和demo.html,如果bodymovin导出时没有勾选图片转换为base64的话会多出一个images文件夹存放图片文件,注意,在新版本的bodymovin 里导出的是data.json和demo.html,前端工作量会小一点。
2、样式方面:
#lottie{
width: 100px;
height: 100px;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
}
需要为动画设置一个容器,定义宽高,transform为强制开启GPU渲染,容器设置ID
3、引入库文件
4、提取动画数据
(1)data.js 和 demo.html 存在的情况下:
let animationData = {......};
let params = {
container: document.getElementById("lottie"),
renderer: "canvas",
loop: true,
autoplay: true,
animationData: animationData
}
let anim = lottie.loadAnimation(params);
(2)data.json 和 demo.html 存在的情况下:
let animationData = {......};
let params = {
container: document.getElementById("lottie"),
renderer: "canvas",
loop: true,
autoplay: true,
path: "data.json"
}
let anim = lottie.loadAnimation(params);
data.json存在时不需要提取animationData !
container:为预留的动画容器;
renderer:为动画模式,html为纯dom结构动画,canvas为画板动画,svg为svg动画;
loop:为循环
autoplay:为自动播放
animationData:为动画数据,该内容与data.js内容一致,所以data.js 可以不使用;
path:为动画数据,与animationData不可同时使用,数值为data.json的路径
常用方法:
输出动画时长秒:
console.log("时长(s):" + anim.getDuration(false));
输出动画时长帧:
console.log("时长(帧):" + anim.getDuration(true));
暂停:
anim.pause();
播放:
anim.play();
停止:
anim.stop();
销毁动画实例:
anim.destroy();
正/反向播放:
anim.setDirection(parm);
parm: 1为正向,-1为反向
播放速度:
anim.setSpeed(num);
例子,用同一个按钮切换播放/停止的方法:
document.getElementById("btn").onclick = function(){
if(anim){
anim.destroy();
anim = undefined;
}
else{
anim = lottie.loadAnimation(params);
}
}
html如何加载ae做好的,AE转JS动画,lottie.js和bodymovin的简易使用心得相关推荐
- webview重新加载(reload)或者发起 redirect request导致js和objc代码之间的bridge失联解决方案(亲测有效)
webview重新加载(reload)或者发起 redirect request导致js和objc代码之间的bridge失联解决方案(亲测有效) 参考文章: (1)webview重新加载(reload ...
- python 加载动图_在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)...
大数据文摘授权转载自数据派THU 作者:MOHD SANAD ZAKI RIZVI 本文主要介绍了: TensorFlow.js (deeplearn.js)使我们能够在浏览器中构建机器学习和深度学习 ...
- webview重新加载(reload)或者发起 redirect request导致js和objc代码之间的bridge失联解决方案(亲测有效)...
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationTy ...
- getelementbyid获取不到js加载的元素_Selenium元素定位不到?JS注入轻松搞定!
在使用Selenium做web自动化测试过程中,经常会遇到一些组件无法通过Selenium直接识别和处理,比如<input>标签组合的下拉框,比如日期控件.面对这些元素,我们可以引入JS注 ...
- webview加载百度失败_移动AI系列百度paddle.js在助力开发智能化的微信小程序
本文作者为百度 APP 移动研发部高级研发工程师,百度 Web 前端智能化方向主要成员.过去一段时间,曾负责百度多模视觉搜索前端业务及多模视觉搜索的前端性能优化等相关工作.划重点:文末有照片! 早在今 ...
- html 加载pdf文件内容不显示不出来,pdf.js首次加载pdf文件时找不到pdf文件,刷新后才能出现pdf文件...
前台点击文件学码的定一近,更工广款近,更工广款近,更名后,后台通过openoffice将doc文件转为pdf格式文件,然后存放在服务器tomcat'中,pdf.js首次加载服务器中tomcat中的转化 ...
- django里面的css无法加载,django使用admin后台,一部分 css和js文件无法加载-无法打开文件...
解决使用admin功能时, 一部分 css和js文件无法加载 原因是由settings.py修改debug = true 为 debug =false 引起的, 1.在settings.py添加如下 ...
- vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
- RequireJs按需要加载angular模块和依赖,并且用r.js压缩打包js和css文件实现加载优化(图文)。
RequireJS 是一个JavaScript模块加载器,使用RequireJS加载模块化脚本将提高代码的加载速度和质量.而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路 ...
- ae文件怎么变成html,AE转JS动画,lottie.js和bodymovin的简易使用心得
PS:描述不清或者描述错误请见谅... AE动画转换JS动画使用了lottie.js库 制作流程: 1.设计师使用PS或者AI制作静态设计稿: 2.设计师对设计稿图层进行分类 3.导入AE制作 4.A ...
最新文章
- 2021年9月最新的保姆级计算机视觉学习路线
- 解密初、中、高级程序员的进化之路
- percona mysql5.7进程出现大量unauthenticated user解决记录
- GridView导出到Excel或Word文件
- Android httpUrlConnection的基本使用
- 网络编程之---广播和IP多播
- 无线路由器参数设置精通技巧
- sql中替换逗号为换行符_使用T-SQL将逗号或其他定界符转换为SQL Server中的表或列表
- ubuntu系统编译sh出错 默认dash不是bash
- 死在路上的创业者们:如何跨越市场推广之坎?
- SQL将本地图片文件插入到数据库
- 实现统计二叉树叶子节点个数的算法
- Wordpress鼠标指针样式自定义
- CF755F PolandBall and Gifts
- 《outliers》/《异类》读后有所思
- 量子力学奇妙之旅-算符和电子自旋
- easyui treegrid php,Easyui 之 Treegrid 笔记
- 不忘初心,勇攀高峰!低代码公司流辰信息紧抓机遇,努力超前冲!
- vos怎样停止、启动和重启服务器?
- 传奇单机架设登录器配置教程