After Effects - Bodymovin 插件验货及感受
以下言论仅代表个人观点!在此感谢那些神一样存在的大牛!
最近在设计圈里,空降了一个叫 Lottie的项目开源库(背景就不介绍了,感兴趣的可以去调查一下)!结合AE插件-Bodymovin可以实现一些酷炫吊炸天的动画效果!最重要的是再也不用拎着刀和开发宝宝们决战紫禁之巅了!
本人设计师一枚,Lottie是代码开发宝宝们研究的,所以这里主要介绍一下Bodymovin这个NB的插件,在应用中的一些问题和解决办法!
插件安装地址:https://helpx.adobe.com/creative-cloud/kb/installingextensionsandaddons.html
这是原文地址:https://github.com/bodymovin/bodymovin
正好最近要上一版产品改版后的引导页设计,正好验验货,看看是不是如同传说中的那般神奇!于是乎:
作业流程
- 根据PM提供的方案和策略,找放大点,梳理逻辑
- 在AE中建立动画
- 利用AE中的bodymovin插件导出HTML和json文件
- 交付开发
测试
经过多轮测试,发现以下问题
测试1
问题 -- 位图无法显示,遮罩蒙版失效,包括文字!
解决 -- 尽量采取路径绘制,避免闭口路径,文字转区!
测试2
问题 -- 导出图片文件质量低
解决 -- Ps中重新导出png,同命名替换
测试3
问题 -- 高斯模糊、描边不显示、渐变(外加的图层样式都不支持)
发现 -- AI格式的icon在AE中可以转曲
通过路径的绘制!整体质量提高!
支持的 After Effects 功能
图层
- 固态图层
- 形状图层
变换
- 锚点
- 位置
- 缩放
- 旋转
- 不透明度
描边(形状层)
- 描边颜色
- 不透明度
- 描边宽度
- 线段
- 虚线
填充(形状层)
- 颜色
- 不透明度
修剪路径(形状层)
- 修剪路径开始
- 修剪路径结束
- 修剪路径偏移
- 路径
- 组变换(锚点,位置,比例等)
- 矩形(所有属性)
- 椭圆(所有属性)
- 一组中的多个路径
关键帧插值
- 线性插值
- 贝塞尔曲线
- 连续贝塞尔曲线
- 自动贝塞尔曲线
- 定格
当前不支持 After Effects 功能
- 图像层
- 文本(“可从文字创建形状”)
- 摄像机灯光图层
- 表达式
- 3d层
- 渐变(颜色滤镜)
- 多边形形状(可以转换为矢量路径)
- 形状叠加处相交无法使用(比如转曲后的“口”导出后会呈实心矩形状)
- 图层形状特效
建议
文件
如果你有任何图像或AI图层,并且没有转换为形状(我建议你转换它们,右键单击每个图层,并执行:“从矢量图层创建形状”),他们将保存到相对于目标json文件夹的图像文件夹。请小心不要覆盖同一位置上的现有文件夹。
性能
尽量不要使用巨大的形状在AE只掩盖它的一小部分
数量很多的属性会造成浏览器渲染速度下降(如将形状的段数节点增加)
总结
整体来说还是非常棒的!毕竟现在还不是很完善,有些功能点还是不支持,但是相信,不就得将来来,这些就不再是问题了!要知道,在这之前,我可是通过画动画分解图来和开发宝宝们沟通的!
适配方式是走的web页的适配方式 也就是加载的html页面 对于有的尺寸两边显示不全的问题,是通过改变背景色来解决的!(这样也就限制了一些设计元素)
iOS整体运行没有问题!流畅!
安卓 4.1.2 以下版本有问题:2.3 报了异常,白屏!4.0 比较卡!其它的还算顺畅!
After Effects - Bodymovin 插件验货及感受相关推荐
- 前端解放生产力之–动画(Adobe Effects + bodymovin + lottie)
大概很久很久以前,2017年,参加了第二届中国前端开发者大会(FDCon2017),除了看了一眼尤雨溪,印象最深刻的就是手淘渚薰分享的关于H5交互的内容了.时光荏苒,最近再次接触,简单回顾一下. 示例 ...
- ae插件:Bodymovin for Mac
Bodymovin是一个非常有用的插件,可以将 After Effects的动画导出为高质量的SVG.JSON和HTML代码.它的主要优点是可以将复杂的动画效果转换为轻量级的矢量图形,使得动画在网页和 ...
- lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量
lottie 动画 A quick getting started guide 快速入门指南 I recently took on a project where the team wanted to ...
- ae制h5文字动画_大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
- android ae动画教程,【博文精选】使用After Effects输出代码原生动画
由于技术限制,大多动效设计师都不具备使用代码的能力,输出的动效demo对于前端开发同学来说,只能作为参考,且部分效果也不具备代码实现性.对于UI开发等前端设计与开发的同事来说,gif动画文档数据量大, ...
- AE 以及 Bodymovin的安装
AE制作一个简单的动画,并用Bodymovin导出教程: http://blog.csdn.net/sinat_24196195/article/details/74933005 AE安装(mac) ...
- AE快速景深模糊插件:Rowbyte Fast Bokeh for Mac
Fast Bokeh是After Effects的插件,可使用深度贴图创建平滑的景深散景模糊.它非常快,正确处理边缘并且易于使用. 传送门:https://mac.orsoon.com/Mac/170 ...
- 电影级视觉特效插件:Red Giant VFX Suite for mac
VFX Suite破解为After Effects中的逼真视觉效果复合提供了强大的工具包.使用Supercomp,光和大气效果可以以比使用简单的2D图层堆栈建模更自然的方式与所有图层和场景元素进行交互 ...
- AE插件-快速景深模糊插件 Aescripts Fast Bokeh Pro v2.0.7 WIN
Fast Bokeh 是 After Effects 的插件,它使用深度图创建平滑的景深散景模糊. 它非常快,可以正确处理边缘且易于使用. 模糊半径独立 Fast Bokeh 的性能仅取决于图像大小, ...
- Unity3D 200个插件免费分享
插件清单: 2D_Toolkit_1.51 动画开发插件包 FingerGestures 触摸插件 ORK_Okashi_RPG_Kit Unity3D角 ...
最新文章
- Linux大神必会操作——系统排错
- 广数系统980tdb系统说明书_汽车离合操纵系统随车检测工具使用说明书
- 开启Mysql远程登录账号
- 助力在线教育,阿里云推出百万专项扶持基金计划
- python中split拆分数组_Python 数组分割
- zipparameters 使用_zip4j的简单运用
- Hibernate Search v.4.2.0.CR1 发布
- 使用python制作ArcGIS插件(5)其他技巧
- python3怎么使用qstring_PyQt的QString和python的string的区别
- 百度小程序-swiper组件
- 【ZigBee】JN5169 ZigBee3.0设备入网过程
- 昆虫繁殖科学家在热带森林中发现了一种特殊的昆虫,这种昆虫的繁殖能力很强。 每对成虫过x个月产y对卵,每对卵要过两个月长成成虫。 假设每个成虫不死,第一个月只有一对成虫,且卵长成成虫后的第一个月不产卵(
- python深度学习tensorflow和fme结合,实现档案扫描件数据自动分类
- 杭电一学生还没毕业年薪已过百万,带十几人的研发团队
- 运用java打印出菱形
- 德国的共享杯,共享碗--还有什么不能共享?
- 蓝桥杯——原理图,与非门,或非门
- Codeforces Round #406 (Div. 1) A. Berzerk 记忆化搜索
- String常用的api(最全)
- 广度优先搜索(Breadth-first search)
热门文章
- 电脑各类快捷键及运行命令大全
- dw向右滚动字幕HTML,DW滚动文字代码肿么添加?
- http://www.eoeandroid.com
- 分析微信聊天记录(1)——获取微信聊天记录
- 360se html怎么删除,删除360浏览器的方法 如何删除360浏览器?
- 【转】RHadoop实践系列之二:RHadoop安装与使用
- 从零开始学习OpenWrt完美教程
- Tomcat 内存溢出问题与解决方法
- php导出excel代码,php导出excel的实例代码
- 互联网晚报 | 7月27日 星期三 | 微信安装包11年膨胀575倍;阿里申请香港纽约双重主要上市;苹果应用商店被曝大量色情应用...