恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
用PAG解锁动效新姿势
1.2°
原创文章 / 经验/观点 / / 举报
168 3 1 0

2022-01-14

      作为一名“失踪人口”,上次发帖还是在18年的时候,还没缓过神,这几年就过去了。仔细想想,这几年的工作内容包罗万象:视频模板音兔、3D礼物动画、虚拟角色avatar、游戏宣传PV、NFT等,也算是经历了项目的摧残,熬成了一名老设计。引用一句经典的话语,“拥抱变化”,我想一名成熟的设计,无疑得是能在多种项目中摸爬,练就一身武艺。

      在之前的项目中,作为一名多媒体设计,无法避免的得和开发打交道的,那么经典三件套:GIF/序列帧/lottie也都有在各种项目中运用,关于三者的优劣特色,网络上好文数不胜数,就不赘述了,这次主要是想分享今年项目引入的新技术,也是本文重点讲解的工具:【PAG】

项目背景

      《全民k歌》是国内的一款主打唱歌的移动端软件,近几年也在拥抱视频化进程,推出了歌词海报、视频动画等短视频模板功能。


在之前的模板制作过程中,我们一直遵循“古法工艺”:

      这就导致了繁琐的制作流程,反反复复的还原检查,以及和开发永远也掰头不完的一句话:你这动画曲线还原的不行啊!也有同学会在这说使用CSS动画曲线即可,但客户端受到各种因素制约,算法工程师无法直接调用,只能手搓代码去尽可能还原动画标注,但终究是很难完美实现,所以现在K歌上的歌词模板,只是设计和开发妥协的产物。

      除了动画曲线外,最终资源包还会受到文件体积限制:图片清晰度、循环帧长度、转场数量、贴图叠加图层等需要考虑的因素。这些负面影响,都在不断的为最终输出减分。因此我们一直在寻求新技术来解决这些痛点,直到看到腾讯发布的全新动画方案—PAG!


主流动画格式对比

从设计侧主要应用功能来讲,lottie和PAG能满足常规需求,其中PAG比较吸引我的功能主要3点:

  1. 1.特效图片自动合成并能输出

我们以常见的粒子为例,当制作完成后,我们尝试导出

      可以发现无论是导出json或是svga的时候,这些插件对于AE特效效果无能为力,而AE之所以强大,也是体现在其丰富的扩展插件上,如果因为无法导出这些效果而放弃使用,实在是可惜。而且这些效果的缺失,也会使得画面呈现效果大打折扣。

      如果输出PNG序列帧,再用序列帧一帧一帧的摆放到时间轨,也能用json等导出,但是为何不直接导出序列即可呢?而且万一是个几百帧的序列文件,光是摆上时间轴的工作,也是相当折磨人的。


      反观PAG这边,只需要对合成名字添加【_bmp】后缀,输出的时候即可自动转码,全自动输出,省时省力。

重要的是:支持插件效果的输出!支持插件效果的输出!支持插件效果的输出!

  1. 2.强大的压缩性能

      我们接着上面的粒子案例讲述。

      当效果完成后,落地是非常重要的过程。无法落地的动效,那只能成为飞机稿。

      上述的粒子烟花,导出序列接近7兆,即使用第三方软件压缩,也只能控制在2兆左右

      而我们用PAG去输出,只有580K

      对接过开发的同学应该都知道,开发对于文件体积的限制那可谓是做到了极致。从设计的角度而言,我们可能更关注效果,而过大的文件体积,会导致更高的性能划线,许多低端机型也许只能用降级方案,常见的就是高端机展示动画,低端机展示静帧。对于用户而言,效果的缺失自然而然也谈不上多好的用户体验。

2兆的序列帧对比580K的pag,优异的压缩性能,能照顾到更多的低端机用户。

上述的粒子是位图,PAG已经展现了优秀的压缩效率,当我们以矢量效果制作的时候,pag依然领先。

  1. 3.完善的自检工具

我们依然以小球动画为例

SVGA和lottie只能预览,无法性能评估


      而PAG的输出文件,双击预览,即可调用专用播放器,能很直观的展示持续时间、帧速率、宽高、显存性能等。

      设计和开发互相看不对眼,因素之一就在于开发吐槽设计性能消耗太大,砍掉了做好的动画。虽说很多项目在开始前会让开发介入做性能评估,但是对于能否落地,以及是否真的是因为性能消耗太大无法上线,对于设计而言都是黑盒。

      而PAG完善的自检工具,对于性能的消耗一目了然,后续只需要拟定好性能消耗划线,那么设计也能更好的根据划线去制作动画。


案例展示

下面我结合具体的模板案例,来展示一下PAG的动画优势

我们先去PAG官网下载插件:https://pag.io

选择对应的平台版本,我这边选择了MAC插件,当安装完成后,从应用程序启动PAG Viewer

点击左上角即可安装AE插件

      在AE的具体制作过程中,将固定不变的素材内容装入一个合成即可,我们并不需要更改自己的制作习惯,PAG插件在人性化上是非常值得称赞的,基本没有学习成本。

当安装上最新版的PAG插件后,选用panel导出方式

      在弹出的菜单中,我们可以把使用了插件的合成层,勾选bmp,PAG插件就会自动执行转换,把AE第三方插件效果,转换为可导出的内容,这样就做到了svga和lottie做不到的事。

下面画框内的安子代表用户素材,可替换任意图片或者视频

      音轨部分,我们和开发的沟通,因为在模板制作中,音轨文件是固定的,所以我们只需要把音效叠加在背景音乐音轨上即可,将整条音频对齐第1帧,即可让音画同步。

      整个制作流程,因为PAG能自动将特效图层转化,无需导出序列帧制作伪lottie,所以对设计师而言能省事不少,同样对于粒子、烟火等效果,也能通过_bmp标签带出,使得画面内容更加丰富。

      有空的同学可以看看pag.io/docs/install.html,里面有详细的安装过程、规范信息等,方便和开发对齐后续流程。


效率对比

在引入了PAG后,我们的制作流程也从古法工艺,进化到了现代工艺,最明显的就是效率的提升

旧制作流程

视觉定稿+设计demo+设计改稿=2天

开发文档=1天

开发还原+调试+正式发包=2-3天

所有工期加起来,也是按周为单位去计算的了,对于分分秒秒都有大事件的互联网来说,这个工期实在是太慢


新制作流程

视觉定稿+设计demo+设计改稿=2天    即可直接发布PAG包上线

并且最主要的是开发的效果只能近似,而PAG的动画能完美还原~

在引入PAG后,K歌的模板产出能力,从6天提升到了2天,效率翻了3翻(卷起来了~)


互联网行业,时间就是生命,热点都跟不上,怎么卷赢竞品?高效的产出,能更好的结合时事热点,制作出新颖的设计,为公司产品带来持久的活力。



总结

      对于动效设计来说,甚至对于所有设计来说,工具只是实现效果的一个途径,但是好的工具,事半功倍。PAG的出现,给了动效设计一个新的选择,而我们也不再局限于只能制作矢量动画,声光、烟雾、粒子、火花等等的效果,都将使我们的设计产出,更加精彩。有了PAG,动效设计将拥有无限可能。

      最后附上PAG官方的QQ交流群,各位同学如果对PAG有使用交流或者功能建议,欢迎加群探讨。让我们一起把PAG打磨的更加强大,让更多用户感受动效之美。


愿各位新年虎虎生威,2022,不负年华

Powered by Froala Editor

AE动效导出ui教程

创建于:2022-01-14
收藏

3人已收藏

OneBee

设计部垫底的存在

  • 19

    作品

  • 2058

    粉丝

  • 86

    关注

  • AE高产黑科技-调整图层
  • 祝UI中国十岁生日快乐
  • onebee 2017作品集
  • 随手记&QQ新年红包视频项目总结

猜你喜欢

    OneBee

    OneBee

    设计部垫底的存在

    2016年度最佳作品集TOP50得主人气明星当仁不让lv.2首页达人砖家
    • 2058

      粉丝

    • 3.1

      人气

    • 3180

      颜值

    作品

      OneBee

      点赞:1

      收藏:3

      评论:0

      用PAG解锁动效新姿势

      你确定要举报用PAG解锁动效新姿势

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年01月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验