江苏龙网

  1. 首页 > 资讯 > 科技 > >

|APP动效设计解析：从目标到落地( 四 )


|APP动效设计解析：从目标到落地
本文插图

3. WEBP与APNG
当动图色彩丰富且需要透明背景格式而序列帧文件又比较大时 ， GIF和序列帧就都不是合适的输出方式了 ， 这时可以选择用WEBP或APNG格式 。
WEBP是Google在2010年收购了On2 Technologies推出 ， 经过几个版本迭代 ， 目前已经比较稳定 ， 所有主流的浏览器都可以支持 ， 在移动应用上对安卓支持比较好 ， iOS应用通过一些代码框架也可以完美支持 。
WEBP支持的颜色与png相当 ， 并且完美的支持动图的透明通道且内存占用比GIF更低 。
APNG是Mozilla 代码社区推出 ， 基于PNG的位图动画格式 ， 扩展方法类似网页的GIF 89a ， 第一帧是标准的单幅图像 ， 动画不被支持时也可以正常显示第一帧画面 。
目前已经比较稳定 ， 所有主流的浏览器都可以支持 ， 支持的颜色与png相当 ， 也可以完美的支持动图的透明通道且内存占用比GIF更低 。
给大家介绍一个导出APNG和WEBP的常用软件isparta ， 没有操作学习成本 ， 直接可上手 。
|APP动效设计解析：从目标到落地
本文插图
【|APP动效设计解析：从目标到落地】

4. JSON
Lottie ， 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具 。 Lottie 目前提供了 iOS、Android 和 React Native 版本 ， 能够实时渲染After Effects动画特效 。
Lottie 在不需要对代码进行重写的情况下让工程师更加方便的创建更丰富的动画效果 ， Lottie还有一个可选的缓存机制 ， 对那些频繁使用的东西能够更快加载 ， 目标就是帮助开发者和设计师能够更轻松的为应用创建动画 。
Lottie依赖于AE的Bodymovin插件 ， Bodymovin可以把各种矢量元素以及位图动画导出一个json格式的文本 ， 开发工程师拿到json文件后就可以用Lottie来解析读取 。
下面以工作中的一个具体的项目来阐述下json的使用经验 。
|APP动效设计解析：从目标到落地
本文插图

（由于图片大小限制 ， 已对效果做加速播放处理）
Bodymovin并不能支持所有AE的动画属性（常见的基本都支持） ， 不支持渐变导出（位图中包含渐变完全没影响 ， 比如这个项目案例的渐变就只是位图） ， 如果你的动画有形状动画且形状填充了渐变 ， 那就没办法用json了 ， 他导出的渐变是黑白而非彩色的 。
下图是Bodymovin导出时设置的勾选注意事项 ， 设置后指定文件夹渲染导出即可 。
|APP动效设计解析：从目标到落地
本文插图

在输出json的时候 ， 不一定是要有个固定的规则 ， 具体要怎么样输出都可以通过跟开发商量看他们认知到了怎样的实现方式 。
这个登录的项目也是前后导出了不同形式的json ， 最先是每一段动作导出一个json ， 一共四段 ， 开发尝试之后实现比较麻烦 ， 觉得还是需要输出一整个连贯的动作 ， 且动作之间不必做任何时间停留 。 他们可以对json监控 ， 在动画暂停处加入交互动作 ， 最终形成一套完整的交互行为 。
json有个很大的优点——如果动画是整屏他可以适配屏幕大小 。
|APP动效设计解析：从目标到落地
本文插图

5. MP4
有些时长较长的大型动画用以上几种方式都不合适 ， 就需要用视频格式了 ， 视频也是被广泛兼容的格式 ， 再经过压缩后文件也不至于过大 ， 视频也是一种有损的输出格式且对透明通道的支持不好 ， 一般不选用此格式 。
AE直接导出的视频文件非常大 ， 给大家推荐一个视频压缩的软件Total Video Converter ， 非常好用提供了很多输出格式 ， 一般选常用的MP4格式 。


推荐阅读


上一篇：|抢先布局百元级5G手机，realme产品更清晰，动作会更大

下一篇：厂探零零发|超级蘑菇工厂的演变，背后的专业精神，可见一斑