用Lottie制作动画,我的月薪翻了一番!!

原创文章 分类: 教程 版权:
9165 328 308 25
2018-06-14
92.4
首页推荐

Lottie是Airbnb发布的开源动画库. 帮助动效落地。学会使用Lottie,会极大地提高工作效率。

Lottie是一种新的开发动画的方式. 学会使用Lottie,会极大改善你和开发小哥哥撕逼的情况, 因为动画我们都给做好了他只需要给播放一下就好了!! 下面的效果可以轻松实现.


Image title


官网地址:https://airbnb.design/lottie/


Image title



Image title

Image title

Image title

Image title

Image title

Image title



Lottie的优势



1. 开发无需编写动画,只需加载


2. Android, iOS, 和React Native多平台支持


3. Path,flat等风格动画实现完美


4. 可手动设置进度,绑定手势,事件等


5. 可网络加载,动态控制播放速度等


6. 性能好,显示效果完


...



Lottie的劣势



1. 能在AE中实现的效果非常有限


2. 对AE使用要求高一点, 动画更加依赖设计师


3. 使用位图后,资源消耗大


...


了解Lottie的应用范围



首先我们得知道Lottie的边界在哪里,是否采用这个方案,制作的动画能不能完美实现,那么我们必须从文档开始


1. 对Android和iOS的支持范围(这和我们的产品要覆盖的用户群体息息相关)



1)  Lottie支持API 16及以上版本(也就是Android版本至少得是4.1 Jelly Bean糖豆)


2)  Lottie支持iOS 8+




2. 了解支持的AE特性(**我大概总结下)**



1)  基本的形状都支持.填充支持渐变,


2)  mask 大部分混合效果不支持(少用mask,影响性能)


3)  Mattes 用alpha matte就好(少用,影响性能)


4)  merge Path(合并路径) 也尽量避免使用,应用Android只支持4.4以上,iOS都不支持.


5)  图层效果和效果等都几乎不支持哦


6)  文字最好在转动画前就转为形状(因为iOS不支持)


7)  表达式不支持


8)  预合成现在已经支持


...


从AE开始


1. 安装必备的工具



After Effects(尽量选择17以后的版本)


原版Bodymovin(如何安装插件网上已经很多,只是老版本AE和新版AE安装方式有些区别,这个插件价格你自己定,填0就是免费!!!),这里同时有个汉化版本的汉化版Bodymovin


下载 Lottiefiles preview app(这个Android版本的app功能要更强大一些)




2. 安装bodymovin插件


插件下载地址已经在上面提到了,选择哪个版本看你,我一般都选新的. 下载下来格式是后缀为.zxp的文件,这里我们需要安装一个Adobe官方的插件管理工具 ZXP Installer进行安装, 这个很简单,但是不知道我安装后无法识别到我电脑上的ae软件.



Mac OS上安装


1.将.zxp文件重命名为.zip

2. 解压缩zip文件

3. 在Finder(访达)中 使用快捷键 ⌘+shift+G,输入 ~/Library/Application Support/Adobe/CEP/extensions 到达相应文件夹

4. 将刚刚的解压的文件移入这个文件夹


Windows上安装


1. 将.zxp文件重命名为.zip

2. 解压缩zip文件

3. 将解压文件夹拖入 C:/Program Files(x86)/Common Files/Adobe/CEP/extensions/

4. 在HKEY_CURRENT_USER/Software/Adobe/CSXS.5中创建一个注册表项“PlayerDebugMode”,其字符串值为1(要创建和修改注册表项,您可以在Windows菜单中搜索“regedit”程序)


3. 这个是我制作的一个AE动画 

Image title

Image title


Image title


可以看到我基本是用的AE的五大属性(位置,缩放,旋转,透明度,锚点)以及修剪路径,和路径做的动画,因为我看了Lottie的文档知道这样去做最为安全


4. 表达式转为关键帧



刚刚截图也发现,我有用表达式. Lottie本身不支持表达式的. 但是一些微动效果(比如抖动这类),我们用表达式做出来更方便,效果更好.这里有个插件能将表达式烘焙转为关键帧,那么也就解决我们的问题了.


下载表达式烘焙插件 Easy Bak

将下载文件夹中的Easy Bake.jsxbin文件移入/Applications/Adobe After Effects CC 2018/Scripts/ScriptUI Panels中,然后打开AE-首选项-常规-允许脚本写入文件和访问网络.这样你的插件才可以正常工作.  

Image title


安装的插件会出现在红色的位置

Image title


打开你的AE文件中的合成, 点击Bake(其它不用调节), 完成可以看到,所以表达式都被关闭,替代他们的是排列紧密的关键帧.关键这个插件还可以Unbake,点击就可还原表达式,屌不屌!!!

Image title

Image title


5. 导出Lottie需要的json文件



这里我们的动画部分都基本完成了, 整个动画是图标变换

这里需要使用到第二个工具 bodymovin,这里我用汉化版(前面有提到下载地址)来说明:

Image title


选择要导出的合成,进入设置

Image title


这个汉化版已经说明了每个选项的作用了, 按照我之前听过一个大佬说过,软件如果有默认选项,那么选默认总是没错的. 这里我们之间选择默认的第二个,其它只是特殊需求情况下需要改选的.


点击渲染, 这里我保存在桌面, 出现了一个后缀.json的文件

Image title


不要关闭软件,我们先预览看看,依旧使用这个插件,旁边的 预览按钮

Image title


拖动下面的按钮,查看真个帧率下,显示是否正常.


最好利用官网的预览功能再次查看(因为涉及到平台,你得在iOS和Android下查看),打开Lottiefile 进行预览

Image title

Image title

Image title


之后用你的手机,扫描右边的二维码进行预览(商店搜索Lottie Preview,分别用Android和iOS进行测试),如果动画有问题,继续回去看看AE用了什么不支持的属性,然后调整输出,重新导出,再次检测.


到这里,整个Lottie的动画导出就结束了.接下来只要将你的json文件交付给开发小哥哥就好了, 他们会在代码中添加Lottie库来加载我们制作的动画.下图是本人用framer实现的实际原型效果(后面可能会出相关教程哦) 
Image title
需要的插件,   在公众号回复  Lottie插件  即可下载

更多设计干货与资讯, 尽在海华社Hiwow, 不关注血亏。

Image title



海华社

欢迎微信交流:632901180

1195粉丝/38关注

Hello ThereOffers Temple

海华社

海华社

欢迎微信交流:632901180

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN