赞助商
立即赞助

用起点读书的实战案例,教你从AE制作到落地开发的方案

UI设计3年前 (2021)发布 流光
10.8K 0 0

导语

画可辅助视觉制作焦点,引导注意的方向,越来越为广大视觉设计师青睐。从设计工具上来看,既有Framer.js、Origami, 有交互原类 Principle、Flinto,还有 Figma 自带画演示功的工具,但是对于一些视觉特效、非逻辑表达类画,设计师通会借助 AE 成。

遗憾的,从 AE 制作到落发,至今也一种完备且熟的跨平台解决方案。本文将起点读书中使过的从 AE 到落地经验梳成,对分析同方案的差异和优劣,辨析还原程和性表现,希望给同行设计师一些参考和借鉴。

关键词

  • 图片格式动画
  • 跨平台决方案

行业与现状

1. 视觉设的转变

从 Facebook 2019半的 All White 的改版看,传统意义视觉范畴的 色彩、图形、质感被程度的简化提炼:

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ Facebook All White改版

在 All White 表象下,设计师解决问题不再是如何将页绘制更加漂亮,而是着眼于信息本身,思考是如何过我们专业性帮助品更好传内容。

视觉计从来不只是解决美丑,它是关于秩序的计,解决的是如何提炼重点、革除冗余、理的引导用户的注力方面的问题。从 拟物  扁  All White ,透过现象本质,视觉在产品计中的装饰被逐渐减弱,转向以内容为中心,参和见证着这转变。

2. 起点读书中的动效

起点读书 7.0 之后,更加关注内容层面的计,使用动画辅佐视觉、传递情。从动画计落地,如何在紧张短暂的开发周期内上线一直是一个考验,对此,曾尝过多方案,过不少弯路。

拨开乌云见天,守得云开见月明。我们将之前的经验梳理出来,予人玫瑰的同时,也是一次自我复盘。

图片格式动画

1. PNG

PNG 序列帧动画是一种比较始的动画类型,通过续切换一组解的动画序列形成动画。后来为提高性能,发展出雪碧图(灵图),将所有帧动画并在一张大图上,通过位移实现动画帧切换。

点读书早期使用序列帧:

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ 点读书打赏

PNG 虽然实现方式较为原始,但确是一种最为稳妥的解决方案,除了图片体积太大,没有别的缺点,想必大分项目中都使过,这里多赘述。

APNG 从 PNG 基础拓展出的,一支持24 色彩通道 8 透明通道的动画格式,对透明通道的支持非常优秀。

DEMO: https://tinypng.com/images/apng/panda-waving-2x.png

美中不足的是,IE 浏览器不支持 APNG,生尚可,一项目中用的少,期待 APNG 未来兼容性能有所改善。

2. GIF

GIF 是除 PNG 之外另外一种比较传统的动画格式,仅支持 8bit 彩色,不支持半透通道,出现的年代久远,压缩术比较差,动画边界有显的杂边,一用在对动画度要求不高的地方。

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ GIF vs. PNG

我们比一下上面 PNG 序列帧转为 GIF 之的表现。从文件积上看,GIF 比 PNG 序列小 76% 。但是,从动画细节上看,GIF 的边界粗糙有锯齿,且无法消除。

对于较简单的画,如果只有2个择,在没有透明通道的情况,择 GIF 好于 PNG 。但是,从开发角看,一些复杂的 GIF 有时会引起周期性的重绘,占较多的系统存,有一定性险。

3. WebP

WebP 是 Google 开发的一款于改善 GIF 的图格式,支持 24bit 彩色,够呈现透明通道,兼容性较好,在项目中的较多。

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ 画一:WebP vs. GIF

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ 画二:WebP vs. GIF

我们比较一下 WebP  GIF 的差异到底哪里:

  • 件体积上,WebP 似乎没有明显的优势,对上两组画,很难讲 WebP 一定更好。
  • 效果呈,WebP 支持了真的 alpha 通道(8bit), GIF 只 1bit,所以 WebP 的细节一好。
  • 兼容性上,WebP 虽不如 GIF, 也算支持良好,不影响使用。

综,WebP 算一种完的 “GIF” 。如果对文件体积不敏感,且好的动画解决方案时,使用 WebP 不错的选择。

除了 WebP,有 WebM ,多见于游戏类网站,比如《炉石传说》 Landing Page https://hs.blizzard.cn/landing ,WebM 仅支持Web,原生不支持。

WebP 导出工:

https://github.com/bigxixi/webp_apng_exporter_for_AE (文件以在浏览器预览)

WebM 导工具:https://www.fnordware.com/WebM/ WebP

4. 小结

通过上对分析,图片格式画的体积都较大。综合的还原效果、兼容性和性,WebP 最佳,GIF 几乎和质量无缘,PNG 过于原始。

跨平台解决方案

1. Lottie

Lottie 库和插件是 Airbnb 2017年前的一款跨平台的动画决方案,设计师通 bodymovin 从 AE 中将动画导出 json 文件,开只需将将其导资源文件夹直接引用即。

 UI 

Lottie 早了解决矢图形类动画的问题。从官方社区看,我们能易发 Lottie 的矢基因,社区作品多图形类动画。

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ Lottie 社区设师 高岡 圭太 作品

Lottie 发布后处于持续更新,从 Github 上主干合并频率来看,大概,从新版本发布频率来看,月个 bug fix,隔月发布个新版本,任何 issue 都可以很快响应和解决。

支持部分图片动画

Lottie 早期版本是不支持图片类动画,导出 json 后会自动生成个 img 资文件夹,播放 .json 文件时,需要解压资压缩到本地目录才能正常播放。从 bodymovin V 5.1.15 后,Lottie 将图片转为 base 64 编码,使用符代替图像地址,并封装在 json 里,接播放个 .json 文件,不用再拖着个资文件夹了。

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ Bodymovin 5.5.9 资文件设板

Lottie 当前对图片类动画的支持依然会有一些问题,有候需要仔细排查出问题的图层,并对照官方文档 https://airbnb.io/lottie/#/supported-features,灵活调整动画替代方案。如果你对 Lottie 开发兴趣,这有一段 Lottie 安卓开发工程 Gabriel Peal 的访谈: https://fragmentedpodcast.com/episodes/82/

2. PAG

PAG https://pag.im/ 是腾讯开发者推出的一款面向生开发的动画解决方案,为计提供 AE 导出插件和面预览工,支持 AE 一切效。Lottie 当前对图片类动画的支持依然会有一些问题,有候需要仔细排查出问题的图层,并对照官方文档 https://airbnb.io/lottie/#/supported-features,灵活调整动画替代方案。如果你对 Lottie 开发兴趣,这有一段 Lottie 安卓开发工程 Gabriel Peal 的访谈: https://fragmentedpodcast.com/episodes/82/

为 AE 而生

PAG 将动画渲染成图片序列帧,无论是表达式、粒动画还是 3D插件,只要 AE 做的出,PAG 都支持。另外,PAG 还完美支持透通道,动画体积非常。

点读书今年上半年接 PAG 的 SDK,最早用品荣誉徽章的展示:

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ 点读书荣誉徽章 PAG 文件对比

对于位图画,PAG 有2种导形式:视频序列帧和位图序列帧,视频序列帧小于位图序列帧,上图为例,视频序列帧83k,位图序列帧 234k,前者后者小 64%。

使用场景,视频序列帧用于展示型、模态型页面,图序列帧用于对实时渲染求较高的 Feeds 型页面,如果用作列表动画,可能会出卡顿。

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ 起点读书作品徽章 PAG vs. WebP

我们再比较下 PAG 和 WebP,首先,者用眼几乎看不出显示异,是从体积上看,PAG 仅为 WebP 十分,具有碾压优势。

PAG vs. Lottie

PAG 除了特效类动画支持可圈可,矢量动画支持也是常优秀,甚至强于 Lottie。以个生长动画为例,Lottie 文件 14k,而 PAG 文件有1k。

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ 起读书投月票提醒

另外,PAG 的开发者还提供工方便计调整和预览动画参数,不懂 AE 的开发不是好测:)

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ 大的面预览工 PAGViewer

PAG 出现的比,目前仅 MAC 电脑从 AE 导出,系统只兼容到 Android 4.4 以上,低版需要有兜底方案。另外,PAG 对 Web 的开还未完成, 当前也没有正式开源,目前优先腾系业务接,预计明年将正式对外开源。

3. SVGA

SVGA 是 YY 直播的开工程师 2017 年的一套跨平台动画决方案。SVGA 不支持复矢量图形动画,对位图动画的支持超 Lottie。

为改善 Lottie 为生

SVGA 最初的目标是弥补和改善 Lottie 。笔者通反复测试现,SVGA 录的是动画元素在时间轴上每帧的表现,支持的动画类型比 Lottie 更, 几乎支持一切 AE 基础类动画。但是更新频率比慢,今年只3-4个版。

SVGA & PAG

SVGA 对基础类动画的支持非常优,但是笔者现 SVGA 不支持特效类动画。

用起点读书的实战案例,教你从AE制作到落地开发的方案

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ 起点读书角色送礼 PAG vs. SVGA(by 亚宁)

以上图为例,SVGA 仅留基础的缩放动画,却丢失光效和粒子效果。

另外,SVGA 支持态插入图片,例如面左图中的户头像就是态插入的,在一些直播类、游戏类产中较见。

用起点读书的实战案例,教你从AE制作到落地开发的方案

△ SVGA 和 PAG 对于态编辑方面的支持演示

后,PAG 的发者受此启发,借鉴并优化了这种动态编辑的功能,保留动画效果提下,不仅可以替换图片内,还可以动态修改文本内以及字体小,比 SVGA 丰富。

小结

通过以比较分析,如果只接入一套动画库,那么可以考虑 PAG ,PAG 原的表甚至可以取 Lottie  WebP,但, libpag for Web 发完之,需借其他方案协同;非腾讯系产品可以待明 PAG 源,当可用 WebP、Lottie  SVGA 替。

结语

以起点读书一动画落方案的一点验,希望对家所帮。从以视觉表中,到以传达内中,我们也探索、试改变,动画设只解决问题的一小,未起点读书还会持续提升用户体验努力,希望给用户多的惊喜,好的阅读体验。

欢迎关注作者微信公众号:「阅文体验设计YUX」

用起点读书的实战案例,教你从AE制作到落地开发的方案

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

动效导出类型 一般情况下我们导出的动效可以分为三种类型。 1. 纯矢量图形动效 此类动效常用于图标、加载、启动页等。 2...
AE动效
大家好,我是彩云。在动画落地的过程中,配合Lottie插件输出JSON动画文件是大家常用的方法。今天这篇分享,将会讲到Lottie这...
AE动效
编者按:UI中动效设计本没有那么玄乎,作为 Google 旗下 Material Design 团队中动效设计的负责人之一,Jonas Naimark 对于动...
AE动效
疫情期间,在线生活迎来爆发 ,视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。 短视频行业的日活用户规...
AE动效
上一篇文章《比阿里犸良还强大!Lottie 动效设计完全指南(基础篇)》已经系统地为大家讲解了 Lottie 动效的基本知识,相信很...
AE动效
功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使...
AE动效
10个动效案例,让大家避开动效误区。 一、走路 在做走路动画的时候,除了要把脚与地面的接触做出来,更应该要注意的是身体不...
AE动效
Motion Graphic 也称为 Mg 或者 Mograh,通常翻译为动效或者动态图形。 动效是什么? Motion Graphic 也称为 Mg 或者 Mogra...
AE动效