• <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • 您的意见是我们 UI 中国进步的动力!
    点击立即反馈按钮,发表您的意见!
    立即反馈
    QQ群反馈
    您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
    群号:302892100
    备注:反馈问题后@管理员能让我们及时了解您的意见

    成长值达到300分以上才可以发?#21152;矗

    收集成长值 先看看别人的即刻>

    SVGA礼物动效设计指南

    原创文章 分类: 教程 版权:
    12638 477 497 39
    2019-04-25
    129.1
    首页推荐

    希望这篇文章能对大家有所帮助,如果有什么表达有问题的地方?#38431;?#22823;家指正…


    首先想说下为啥要写这篇文章,最近接到个项目任务制作直播间礼物赠送视觉效果,由于之前没有接触过此类设计,因此在多方打听,并在网上到处探索后发现SVGA是个不错的选择,在与开发同学沟通并尝试了另外几?#25351;?#24335;输出文件后,我们最终敲定了用SVGA。


    在网上搜索了很多相关资料学习,发现网上关于SVGA的资料相当少,而且很大部分还是介绍关于开发的,关于设计制作的少的可怜,这也是我打算写这篇内容的的原因,我觉?#27809;?#35768;应该有这么一篇文章,帮助到一些正在做这个事儿的设计同学,如果有什么表达有问题的地方?#38431;?#22823;家指正…



    礼物动效输出方法


    A:导出关键帧动画制作礼物动效

    缺点:需要把?#35745;?#24102;到安装包中,增大了安装包体积

        B:使用属性动画

    缺点:开发代价较大,每一套礼物动画基本都不一样,开发人员需要去细细调参,花在业务上编码的时间会变得非常有限,从代码复用率极低

        C:输出GIF文件

    缺点:输出效果差,并且资源占用高

        D:使用SVGA,SVGA支持位图,并且输出后直接封?#25353;?#21253;好的,直接给开发SVGA文件就OK,并且SVGA更贴合直播类应该场景,SVGA所提供的动态文本、动态图像功能都是其它库所不能提供的,在实现炫酷动画的基础上,性能表现也比?#20064;簟?/p>

    SVGA是开源工具可以跨平台使用,支持Android、iOS、React Native、Web、微信小程序,但是在微信小程序上表现会差一些。



    什么是SVGA


    SVGA 是由YY团队开发出来的一种跨平台的开源动画格式,同时兼容 iOS / Android / Web。SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率,动画设计师专注动画设计,通过工具输出svga动画文件,提供给开发工程师在集成 svga player 之后直接使用。


    SVGA 不同于 Lottie,Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现,而 SVGA 则将这些逻辑免去。也因此,SVGA 可以同时支持 Flash。SVGA 做的事情,?#23548;?#19978;,非常简单,Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素(位图、矢量),并将其在时间轴中的每帧表现(位移、缩放、旋转、?#35813;?#24230;)导出。 Player 会负责将这些信息还原至画布上。



    AE基础属性制作输出 SVGA


    ?#25910;?#24120;用的动效制作软件是After Effects,因此主要讲如何通过AE制作导出SGAV动效,利用AE制作基础属性动画,基础属性动画包括(位移、缩放、旋转、?#35813;?#24230;)。


    第一步:从sketch或者PS中将礼物和礼物效果元素切图导出,根据个人需可以将礼物拆分成几块?#30452;?#23548;出,方便AE中制作动态效果。


    Image title


    第二步:将导出的切图素材导入AE中,利用AE制作基础属性动画,制作完成后结果如下

    Image title

    第三步:将背景隐藏在窗口-扩展中?#19994;絊VGAConverter_A


    Image title


    第四步:用SVGAConverter_AE插件导出SVGA文件,输出SVGA时记得把背景调成?#35813;?#32972;景,输出后如下


    Image title


    通过下图可以看到SVGA输出格式后文件大小仅为145KB,如果是序列帧的话文件大小高达10几M


    Image title



    AE预设效果制作输出 SVGA


    接触过SVGA的同学应该都知道,SVGA支持位图、矢量和一些基础属性动画,很多时候我们制作礼物特效的时候,都是用自己做好的位图素材导入AE进行一些基础属性的动画制作,这次?#21307;?#21033;用序列帧位图制作出一些更炫的礼物特效。


    第一步:在AE中用预设效果制作出自己满意的礼物特效

    Image title

    第二步:将制作的特效动画导出序列帧,然后在将序列帧?#26377;?#23548;回AE中,新建预合成将每一帧拼接起来,这样做的目的是因为SVGA无法识别AE的表达式和效果预设,所以我们将特效转为序列帧后在重新放进AE,序列帧是位图所以SVGA可以识别并导出特效。


    Image title


    第三步:接下来将制作好的序列帧预合成放置到礼物特效合成中,打开SVGA插件输出SVGA礼物特效动画。

    Image title

    AE插件制作输出 SVGA


    这次我用AK大佬的插件saber为大家做案例,saber是一款很不错的光效制作插件,也比较容易上手,视觉表现力也非常棒,本篇文章主要是将SVGA,所以就不给大家具体说明saber如果做礼物特效了。


    第一步:根据礼物的轮廓利用saber插件制作出火焰燃烧效果。

    Image title

    第二步:?#36879;?#25165;所说的预设效果特效动画一样,我们通过AE将特效动画导出PNG序列帧,然后在将序列帧导回AE,并将每一帧拼接起来,这里有个小?#35760;?#32473;大家说下,用过saber的同学都知道saber的用法是利用AE的图层样式“屏幕”将光效合成在图里,其实saber?#37096;?#20197;导出?#35813;?#32972;景的PNG的,方法很简单,将saber当前图层复制一层,然后对复制出来的副本进行用亮度遮?#24103;?/p>


    Image title


    第三步:接下来将制作好的序列帧预合成放置到礼物特效合成中,打开SVGA插件输出SVGA礼物特效动画。

    Image title

    总结


    最后聊一下关于用其他软件制作的礼物动画,根据上面所说的几种方法可以发现,我们想要在SVGA中想要得到更好的效果,就是将制作的特效输出为序列帧后在AE中重新拼接起来,换一种说法就是我们可以不仅限于AE来制作,?#37096;?#20197;使用C4D或者其他设计软件来做,只需要我们将最终效果已序列帧的形式进行输出即可。


    并且我们?#37096;?#20197;利用位图、基础属性和插件相结合来做,值得注意的是如果视觉效果做的太过复杂会导致文件过大,同时也会产生性能方面的问题,在制作的过程中大家还时要把握好一个?#21462;?/p>



    参考资?#24076;?/p>

    SVGA:http://svga.io/designer.html

    https://juejin.im/entry/59f1648f5188254115700ee6

    https://juejin.im/entry/59f6c0ec6fb9a0451d40bfbf

    https://blog.csdn.net/gutaocslg/article/details/79908414




    希望这篇文章对大家有所帮助

    老铁双击666


    V









    Tomato_

    取是能力 · 舍是境界

    1379粉丝/17关注

    2017年度最佳作品集TOP50得主2016年度最佳作品集TOP50得主当?#20160;?#35753;lv.2助人为乐小有名气
    去年和今年一些作品整理2017作品部分精选

    扫描二维码
    去手机端查看海报

    Tomato_

    TA已经获得15枚勋章啦

    • 成就勋章

      • 特别勋章

      • 身份勋章

    • 已拥有

    • 作品

      创造者才是真正?#21335;?#21463;者。

    • 经验

      经验是一所好学校,可它的学生却经常旷课。

    • 活跃

      大神都是从围观群众开始的

    • 拓展

      作品、经验、活跃还不能满足你?

    京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

    北京快乐8奖金
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>