admin管理员组文章数量:1566353
4399游戏盒(安卓版APP)项目接手已久,想输出一些小经验分享给大家,以下是写了一个很简单的lottie应用。
一直以来,在 Android、iOS、React Native 上实现一套复杂动画是一件蛮困难而且耗时的事。开发者们不仅要为各种屏幕尺寸加载一大堆素材,还得写成百上千行生硬、难维护的代码。正因如此,绝大部分 App 都不愿意使用动画 —— 尽管动效对用户体验来说是一个强大的工具。接下来一起get下“超炫”的新技能~
Lottie是什么?
Lottie 是在 Android 和 iOS上 原生渲染 的After Effects(AE)动画,Lottie是 Airbnb 开源的支持Android 和 iOS 的动画库,它可以解析 AE 动画中用Bodymovin 导出的json文件,并在移动设备上利用原生库进行渲染 !
所有的这些动画都是在 After Effects 中创建,使用Bodymovin导出,无需额外的工作,Bodymovin 是一个AE 的插件,导出效果文件作为json和一个javas cript web 播放器,在其之上,Lottie将它扩展到 Android,iOS和React Native。
以下是Airbnb上的一些开源动效:
关于在APP内的动效实现,传统的实现方法是提供GIF图,但我们常常会遇到问题:
1.导出有锯齿
2.为了控制文件大小,压缩损失图片质量,动效也不敢做太多帧数
(尤其是安卓的APP安装包体,我们的图片资源更需要控制文件大小)
AE导出json文件的优点:
1.动效更顺滑
2.文件小,输出的image只有涉及动效的图层素材,动效是生成代码进行渲染实现的
需要使用的工具:
1.Adobe After Effects CC 2015以上版本(非简化版,简化没有【扩展】功能)
2.bodymovin插件【win版附件内可下载】
3.AI 或 PS 做前期的设计稿
有哪些动效是安卓客户端无法识别进行渲染的?
1.动效不能使用遮罩
2.不能使用三维
3.不能使用锚点
游戏盒APP上的使用实例:
评论点赞动效
我页顶部H5活动预加载loading
商店兑换成功打钩动效(AE里纯形状制作,导出是代码,无需素材图)
设置页推出权限功能时 增加了权限图标与设置图标的切换
*图标三维变换导出后,安卓上无法渲染成功*
新春版的引导图里首次尝试了lottie实现动效(设计稿是用AI制作,也同样支持导入到AE里制作动效)
bodymovin大杀器_应用在“游戏盒APP-我页”活动中简单的操作步骤来一波:
具体操作:
导出的文件是这样:
images里包括了 背景图+按钮
到这步基本是完成了,但“images”里的切图,我们要检查它是否是完美,尤其是按钮上有大投影什么的,更需要替换原图,AE导出的图会把渐变投影处理得比较黑~
以上便完成了最简单的动画输出
我页活动的元素可以做更多的动画,在导入AE的时候,支持导入ps里的整个文件图层,ps更新设计稿,AE里也同步更新,发挥你的想象力,做出更好玩的动画。
最后附关于lottie的相关链文,有兴趣可以多了解一些:
版权声明:本文标题:android 动画变成素材,AE技法-把AE动画转换成Android原生动画,撂倒GIF做动画 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1725689791a1036952.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论