美文网首页
动画 AE 原生相关

动画 AE 原生相关

作者: 主音King | 来源:发表于2019-12-06 11:21 被阅读0次

    行业与现状
    动画可以辅助视觉制作焦点,引导注意的方向,为广大视觉设计师青睐。从设计工具上来看,既有Frame.js、Origami,也有交互原型类Principle、Flinto,还有Figma自带动画演示功能的工具,但是对于一些视觉特效、非逻辑表达类动画,设计师通常会借助AE完成。

    从AE制作到落地开发,没有一种完备且成熟的跨平台解决方案。从AE到X的落地经验,对比不同方案的差异和优劣,辨析还原度和性能表现。

    图片格式动画,跨平台解决方案,从Facebook2019上半年的All White改版来看,传统意义上视觉范畴的色彩、图形、质感被最大程度简化和提炼,设计师解决的问题不再是如何将页面绘制更加漂亮,而着眼于信息本身,思考的是如何通过我们专业性帮助产品更好的传达内容。

    视觉设计从来不只是解决美丑,它是关于秩序的设计,解决如何提炼重点、革除冗余、合理的引导用户的注意力方面的问题。从物理到扁平到All White,透过现象看本质,视觉在产品设计中的装饰感被逐渐减弱,转向以内容为中心。

    图片格式动画
    PNG序列帧动画是一种比较原始的动画类型,通过连续切换一组分解动画序列形成动画。后来为提高性能,发展出雪碧图(精灵图),将所有帧动画合并到一张大图上,通过位移实现动画帧切换。

    PNG虽然实现方式比较原始,但却是最为稳妥的解决方案,除了图片体积太大,没有别的缺点。

    APNG是从PNG基础上拓展出来的,是一个支持24位色彩通道和8位透明通道的动画格式,对透明通道的支持非常优秀。

    IE浏览器不支持APNG,原生可以,一般项目中用的很少,APNG需要提升兼容性。

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

    从文件体积上,GIF比PNG序列小了76%,但是,GIF的边界粗糙有锯齿,且无法消除。

    对于比较简单的动画,如果只有2个选择,在没有透明通道的情况下,选择GIF好于PNG,但是从开发者角度,一些复杂的GIF有时会引起周期的重绘,占用较多的系统内存,有一定风险。

    Webp是Google开发的一款改善GIF的新动图格式,支持24bit彩色,能呈现透明通道,兼容性好,在项目中用的比较多。

    文件体积上,WebP似乎没有明显优势,呈现效果上,WebP支持真正的a lpha通道(8bit),而GIF只有1bit,所以WebP的细节一定更好。兼容性上,WebP虽不如GIF,但支持良好,不影响使用。

    WebP是一种更完美的GIF,如果对文件体积不敏感,且没有更好的动画解决方案时,使用WebP是个不错的选择。

    除了WebP,还有一种WebM,多见于游戏类网站,比如<炉石传说>的Landing Page,WebM仅支持Web,原生不支持。WebP导出工具文件可以在浏览器预览。[WebM导出工具](https://www.fnordware.com/WebM/ WebP)

    图片格式动画的体积都比较大。综合的还原效果、兼容性和性能,WebP最佳,GIF几乎和质量无缘,PNG过于原始。

    跨平台解决方案
    Lottie库和插件是Airbnb于2017年前后发布的一款跨平台动画解决方案,设计师通过bodymovin从AE中将动画导出json文件,开发者只需将导入资源文件直接引用即可。为UI而生,Lottie最早是为了解决矢量图形类动画的问题。Lottie的矢量基因,社区作品大多是图形类动画。
    Lottie发布之后处于持续更新,github主干合并频率大概一周一次,从新版本发布频率看,每月一个bugfix,隔月发布一个新版本,任何issue都可以很快响应和解决。
    支持部分图片动画,Lottie早期版本是不支持图片类动画的,导出json之后会自动生成一个img的资源文件夹,播放.json文件时,需要解压资源压缩包到本地目录才能正常播放。从bodymovin V5.1.15之后,Lottie将图片转为base 64编码,使用字符代替图像地址,并封装在json里,直接播放一个.json文件,不用再拖着一个资源文件夹了。
    Lottie对当前图片类动画的支持依然会有一些小问题,需要仔细排查出问题的图层,官方文档,灵活调整动画替代方案。Lottie安卓开发工程师Gabriel Peal访谈

    PAG是腾讯开发者退出的一款面向原生开发动画解决方案,为设计师提供AE导出插件和桌面预览工具,支持AE一切特效。

    为AE而生,PAG将动画渲染成图片序列帧,无论是表达式、粒子动画还是3D插件,只要AE做出,PAG都支持。另外,PAG还完美支持透明通道,动画体积非常小。对于位图动画,PAG有2种导出形式:视频序列帧和位图序列帧,视频序列帧小于位图序列帧64%
    在使用场景上,视频序列帧适用于展示型、模态型页面,位图序列帧适用于对实时渲染要求较高的Feeds型页面,如果用作列表动画,可能出现卡顿。
    PAG和WebP二者看不出显示方面的差异,从体积上看,PAG仅为WebP的十分之一,具有碾压优势。
    PAG除了对特效类动画支持好,对矢量动画的支持也是非常优秀,甚至强于Lottie。Lottie文件和PAG文件大小14:1,PAG更小。
    PAG的开发者还提供工具方便设计师调整和预览动画参数,PAG出现的比较晚,目前仅支持MAC电脑从AE导出,系统兼容到Android4.4以上,低版本需要兜底方案。另外PAG对Web的开发还未完善,当前也没有正式开源,预计明年将正式开源。

    SVGA是YY直播的开发工程师2017年发布的一套跨平台动画解决方案。SVGA不支持复杂矢量图形动画,对位图动画支持超过Lottie。
    为改善Lottie而生,目标是弥补和完善Lottie,SVGA记录的是动画元素在时间轴上每帧的表现,支持动画类型比Lottie更多,几乎支持一切AE基础类动画,但是更新频率比较慢,今年只发3-4个版本。
    SVGA对基础类动画支持非常优秀,SVGA不支持特效动画(光效、粒子效果等),SVGA支持动态插入图片。PAG借鉴优化了动态编辑功能,保留动画效果前提下,不仅可以替换图片内容,还可以动态修改文本内容以及字体大小,比SVGA更丰富。

    如果直接入一套动画库,可以考虑PAG,PAG在原生上的表现甚至可以取代Lottie和WebP,但是在libpag for Web开发完成前,需要借助其他方案协同;非腾讯系产品可以期待明年PAG开源,当前可用WebP、Lottie和SVGA替代。

    阿里新出的犸良动画是基于Lottie开发的,特效还挺不错的。

    来自

    相关文章

      网友评论

          本文标题:动画 AE 原生相关

          本文链接:https://www.haomeiwen.com/subject/foujgctx.html