SVGA礼物动画设计指南(二)经验/观点

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

AE制作SVGA动画主要采用两种方式:1、用基础属性做礼物动画,制作出的礼物内存消耗小,制作复杂效果设计成本高;2、添加序列帧动画特效,制作出的礼物内存消耗大,制作复杂效果设计成本低,因为可以利用插件或素材进行制作。如果项目需求不是特别急的情况下,建议大家还是尽量采用基础属性动画进行礼物制作,如果需要加入序列帧动画特效的话,一定要控制好序列帧大小,避免造成礼物内存消耗过大,从而影响产品稳定性。

小结:

SVGA动画在目前直播礼物设计方面相比Lottie更有优势,由于SVGA对位图的素材提取有优势,因此我们可以用位图素材做出一些有趣的基础属性动画,同时我们也可以用序列帧位图做一些特殊效果动画,增强礼物的视觉表现力,需要注意的是大家一定要控制好礼物的内存消耗,不能盲目加入大量序列帧动画,从而影响产品稳定性。

用AE基础属性(位置、缩放、旋转、透明度)动画制作礼物,利用基础属性动画制作礼物是比较常见的一种制作方式,其实我们看到的一些特殊效果其实也可以用基础属性做,需要设计师多思考举一反三,比如我们常见的粒子效果,它有优势也有缺点。

优点:基础属性动画制作的动画比较稳定,输出SVGA文档时基本不会出现一些莫名其妙的报错或动画问题,另外基础属性动画输出的礼物通常内存占用小,在较负责的业务场景,例如直播间中,用户可能大量刷礼物时不会因为礼物内存消耗问题影响产品稳定性。

缺点:制作特效绚丽和较复杂的礼物时需要较高的设计成本。

SVGA相比Lottie来说对位图资源更有优势,因此通过我们可以利用序列帧位图素材资源做一些基础属性动画较难制作的特殊效果,可以通过AE插件或AE自带特效控件进行制作后输出序列帧导入AE输出,值得注意的是序列帧特效会导致输出的礼物内存消耗变大,序列帧动画在AE中的应用方法:1、先将输出好的序列帧素材导入AE中,新建预合成将序列帧素材放入预合成中,并将每个序列帧素材图层剪切为一帧;2、从上往下全选序列帧素材右键在“关键帧辅助”中找到“序列帧图层”;3、在对话框中直接”点击确认

AE脚本动画是一种比较快速出效果的方法,可以直接套用脚本中的成名动画效果添加到礼物中,增加礼物特效氛围,脚本动画需要输出为序列帧后位图才能输出SVGA动画,否则SVGA输出时无法识别动画效果。

优点:因为直接套用的效果库中的特效,可以快速出效果设计成本低。

缺点:需要把特效单独输出序列帧后在使用,因为是使用的序列帧来做SVGA动画特效,因此礼物内存消耗比完全由基础属性制作的礼物内存占用大。

AE插件动画也是一种出效果比较快的一种方式,而且插件动画相比预设动画灵活性更高,可以根据礼物主题进行针对性创作,插件动画的输出也需要像脚本动画一样,输出为序列帧位图后才能输出SVGA动画,否则SVGA插件输出时无法识别动画效果。

优点:AE插件动画相比脚本动画具更强的灵活性,可根据礼物主题针对性创作。

缺点:学习成本高,如果用插件来制作礼物特效你至少要掌握一款制作特效插件的工作方式,插件特效也需要输出序列帧位图来制作礼物,因此礼物的内存占用也会偏高。

SVGA也可以制作三维礼物,利用序列帧位图的原理,设计师可以在三维软件中做好三维效果后输出为序列帧导入AE中添加氛围效果进行输出。

优点:用3D软件制作的礼物具有更强的立体感和空间感,这是在AE里较难做到的,三维礼物视觉冲击更强。

缺点:C4D制作礼物学习成本高,至少需要掌握一定的建模和渲染知识,同时还需要了解C4D动态效果的制作方法,和脚本、插件动画一样需要输出成序列帧来制作礼物,礼物的内存占用会偏高。

粒子效果是AE插件的一种特效制作方式,为什么要把粒子效果单独拿出来说呢,首先粒子效果比较常见,粒子效果通常对礼物起到氛围烘托作用,其次粒子是序列帧中非常占用内存的元素,接下来为大家说下粒子制作方式,大家可以根据业务需求节点调整输出方案。

1、用AE插件进行输出,插件制作设计成本相对低一些,通常使用“Particular”插件来制作,制作完成后输出为序列帧位图后放回AE中输出SVGA动画,通常这种方式输出SVGA会导致内存消耗很大,建议大家在输出时粒子序列帧时缩小它的尺寸大小,粒子是氛围营造元素模糊一点对整体效果影响不大,另外如果序列帧过多可以采用抽帧的方式(隔几帧删一张位图)

2、用基础属性动画制作粒子效果,这种做法内存消耗低,但设计成本相对来说会高很多,因为你需要用基数属性来将一个个元素来模拟粒子的效果。

SVGA中也是可以使用AE蒙版动画的,不过它只能识别路径蒙版,并且路径动画也有限制,只能识别“相加”属性如果没有制作好,会导致输出SVGA动画时出现错误的动画,如果你是直接给素材建立路径蒙版,那你需要一帧一帧去调整路径蒙版,工作量变的很大,作者是用另外一种方式,例如:给徽章做扫光1、先将素材导入AE;2、扫光素材打预合成(注意预合成的画板大小应和徽章素材画板一样大)在用钢笔工具勾出徽章轮廓给刚才打的扫光预合成做一个路径蒙版;3、在预合成中给扫光素材做“位移”动画但是有一点大家需要注意的是,预合成里的位图元素不能做“旋转”和“缩放”的属性变化,否则输出SVGA时会出问题。

SVGA动画的制作方式多种多样,无论你是用AE基础属性动画制作还是用AE的脚本和插件,或者三维软件制作,这些都是制作方式,具体用什么方式来做取决于业务的需求节点以及设计师对礼物的创作要求,最后说一下无论怎么样做,礼物是服务于产品的因此一定要考虑到产品稳定性的问题,对于不同的业务场景(直播间、IM、一对一视频…等)以及用户手机的性能,要合理控制好礼物内存消耗,避免因为礼物内存消耗严重造成的应用闪退和卡顿现象。

压缩位图资源是控制SVGA礼物动画内存消耗的有效方法,通过压缩位图资源我们可以大大缩减礼物内存消耗的问题,压缩位图资源的几个方法:

1、减少位图素材资源的留白区域,尽可能让切图贴合位图素材切

3、在保持主视觉元素清晰的情况下,将辅助类元素缩小位图素材原始尺寸,在AE中制作时放大,可能会有一些模糊,因为是辅助类元素对礼物整体影响不会很大,具体缩小多少视情况而定。

关于序列帧动画输出SVGA礼物会出现闪烁丢帧的情况,主要出现在序列帧元素比较复杂的情况,比如做粒子类效果时经常会出现这种情况,如果不知道如何解决,将导致设计师礼物设计时受很大限制,序列帧动画闪烁问题处理方式1、分别给每个素材图层做三帧“透明度”属性“0-100-0”2、将所有关键帧转为定格关键帧。

序列帧做礼物特效时,经常会出现内存过大的现象,为了尽可能控制礼物内存消耗,可以采取抽帧的形式,将现有序列帧进行隔几帧删一帧的方式控制序列帧帧数来尽可能控制礼物内存消耗,需要注意的是,序列帧删的太多导致礼物帧数过低,可能会导致序列帧效果不自然。

有些设计师为了偷懒,用大量序列帧做礼物特效,会导致两个结果:

1、礼物内存消耗非常大,影响产品性能稳定性

在使用序列帧做礼物时素材一定要做好分类和命名,尽量避免两个素材用同一个命名,当礼物动画中序列帧存在不同素材使用同一个命名输出时会导致礼物素材出现问题。

在制作SVGA礼物时,经常会遇见一些问题导致礼物输出和落地时出现问题,特别是礼物内存消耗问题,如果产品业务以直播间为主的话,要对礼物的内存做好控制,避免直播间大量刷礼物时导致内存消耗过大影响产品稳定性,一些用户硬件设备比较老旧的话会使应用程序闪退甚至导致手机死机,因此在制作SVGA礼物时要结合产品业务场景做好内存优化,也可以多和开发沟通看能否对现有缓存机制进行优化,提高产品稳定性

SVGA动画在直播间打赏礼物中应用比较广,礼物打赏动画也是在项目中使用SVGA频率较高的场景。

悬浮球动画也是社交直播类产品应用比较广的地方,用SVGA动画制作悬浮球的运营活动入口,和重要的ICON相比静态图在直播间这种热闹场景中更能吸引用户眼球。

4.3会员徽章动画

用SVGA动画制作会员徽章动画,使用动态形式表现会员徽章能更好的体现出尊贵感。

用SVGA动画制作会员标签动画,在用户列表中更能体验出VIP用户与普通用户的差异化,让VIP用户有更强的尊贵感。

SVGA还有一个很棒的地方,可以制作匹配和飘屏类动画效果,开发可以调用相应方法替换SVGA中的图层文件。(比如:在匹配时不同用户的头像和名称以及用户上线通知等)

THE END
1.印章制作软件下载印章制作软件哪个好印章制作大师印章制作可以让用户根据自己的需求制作属于自己的印章的软件。利用印章制作软件可以对印章文字大小,字体,还可以对某些文字进行旋转,加粗,移动等微调操作。制作完成后的印章还可以保存为bmp,jpg,gif,png,emf等常见图片格式。印章制作软件功能包括:艺术印章、公章、私章http://mip.downza.cn/zt/1428.html
2.做公章软件排行榜前十名手机印章设计app推荐公众号文章排版app公务员做题app章丘公交车实时查询app做美食的app学习办公软件oa办公软件手机办公自动化软件广州公交app办公基础软件办公记事软件常用办公室软件公益游戏平台办公记事本软件公交车实时到站软件企业办公软件手机免费办公文档软件办公协作软件查询公交到站时间app公共汽车到哪了app智慧办公apphttps://m.pianwan.com/s/zj-1479809
3.logo制作大师播放器官方版下载logo制作大师大小:21.05M 语言:简体中文 类别: 实用工具 系统:Android 厂商:日照阿帕网络科技有限公司使用手机助手 logo制作大师是专门为用户提供智能化设计图标的手机软件,在这里用户可以使用软件在线进行全新的logo设计,这里拥有超多600个不同的图标模板,软件该可以进行图标搭配,转换功能。 logo制作大师官方介绍 https://m.onlinedown.net/soft/10088443.htm
4.印章软件免费下载安装电子印章生成器app下载印章软件是一类专门用于设计和制作各种印章图案的应用,软件中提供丰富的图形元素、字体选择、图层管理以及各种设计工具,使用户能够方便地创建个性化的电子印章设计。 本站为有需求设计制作印章的用户整理了印章制作软件大全,收录了多款专业的印章制作软件,如sedwen图章制作软件、印章大师、印章生成器app等,欢迎前来按需下载!https://www.32r.com/zt/yzzzrj/
5.免费徽章Logo设计DesignEvoLogo制作工具DesignEvo的徽章logo设计软件让你能够轻松地制作出徽章logo。快使用数百万图标和上百种艺术字体来设计你的徽章logo吧。http://www.designevo.com/cn/create/logos/emblem.html
6.徽章标LOGO设计免费生成器徽章标LOGO免费设计在线生成标智客徽章标LOGO在线设计软件为企业在线生成徽章标LOGO图片,提供徽章标品牌标志生成模板、徽章标标志图片素材下载,是LOGO免费在线生成平台!https://www.logomaker.com.cn/logo/tag/764/
7.徽章设计的要求有哪些徽章设计要考虑什么→MAIGOO知识1、徽章设计软件的选择 徽章设计一般是用电脑软件设计的,常用的有coredraw、illustrator等矢量绘图软件,如果需要制作立体徽章,还可以选用3D MAX软件。 2、徽章设计与徽章工艺的关系 徽章的种类众多,不同种类的徽章采用的徽章制作工艺也有所不同,想要设计一款珐琅徽章,但如果你把徽章的颜色设计的很复杂,而且有渐变色,那https://www.maigoo.com/goomai/235158.html
8.徽章设计软件徽章在线设计今天看来仍然现代感十足,设计中的经典!中国铁路徽章194[阅读详情] 96544次 2019-08-07 手机logo在线制作 |徽章图案在线生成器 |在线徽章设计生成器 |徽章设计素材 |徽章设计软件 |logo制作神器 |logo制作 |网站logo设计 |苹果logo 共1页,4条 https://logo.xwzn.cn/special/mtsjrj/
9.鱼爪logo设计生成器app下载鱼爪logo设计生成器app安2、包含了超多的设计功能和免费素材,让大家轻松设计logo。 3、强大的编辑功能和专业的设计工具让你轻松打造优质的logo。 软件优势 1、是一款集logo设计、商标设计、logo制作、图标设计、标志设计的logo生成器。 2、也是一款徽章设计、logo水印、商标制作、图标制作的logo设计软件。 https://www.crsky.com/soft/497350.html
10.幼儿园中班美术活动我的徽章教学设计含教学反思.docx幼儿园中班美术活动我的徽章教学设计一教学背景本次教学活动是在幼儿园中班美术活动中展开的。中班幼儿的年龄在45岁之间,刚刚能够较为熟练地使用简单的工具进行绘画和手工制作。因此,本次教学活动需要在考虑幼儿年龄特点的基础上,针对性地设计教学活动,https://www.renrendoc.com/paper/294046434.html
11.免费下载印章生成器免费制作印章的软件器在线制作免费印章生成器在线制作公章在线印章制作生成免费图章制作软件免费版印章图片生成器电子公章在线制作生成器免费印章设计电子公章制作印章网图章生成器 印章电子章在线生成器免费怎么制作电子印章在线制作公章在线印章生成器公司印章生成器ps印章制作公章在线生成器公章生成在线印章制作印章制作一键生成器在线制作印章个人http://sukoutu.com/newseals_06
12.图标制作软件有哪些图标制作软件哪个好用图标制作软件是一种用于设计和制作专业图标的软件。它通常提供了各种功能和工具,帮助用户创建高质量和独特的图标。图标制作软件可以应用于许多领域,例如应用程序开发,网站设计,品牌建设等。使用图标制作软件,用户可以创建自己的独特图标,以使其与众不同,并增强其品牌识别度。本专题为大家整理了硕思logo设计师、NiceLabelhttps://www.mydown.com/ku/2265.shtml
13.Logo设计软件海报制作名片大师水印工具一键商标设计如果您正在寻找可以快速解决徽标问题的方法,我们的徽标制作应用程序将提供最快捷、最简单的解决方案。 我们的客户使用我们的徽标制作器来做什么: - 创造小型企业徽标创意 - 创造励志名言 - 用于 Facebook 帖子 - 制作名片 - 制作传单 - 制作个性化卡片 - 设计 T 恤徽标模型 - 装扮博客 - 创建快速模型 - 创建独https://itunes.apple.com/cn/app/id878042995
14.Logo设计软件海报制作名片大师水印工具一键商标设计IOS版下载图形设计: - 由专业图形设计师创建的 4000 多个预制设计模板 - 10000 多个免版税图形 - 包含 1000 多种字体 - 100 种复古、水彩和魅力叠加层 - 访问热门照片网站(Pixabay 和 Unsplash)进行搜索和下载200 万免版税图片 编辑功能: - 易于使用的界面 - 高级图层编辑:您可以锁定/解锁、翻转、复制和更改徽章、装饰http://www.166n.com/app/878042995/diy
15.计算机应用基础第5章演示文稿制作软件PowerPoint2016在线免费PowerPoint 2016(以下简称为PowerPoint)是Microsoft Office 2016的组件之一,是一款功能强大的文稿演示和幻灯片制作放映软件。PowerPoint可以设计制作集文字、图形、图像、声音及视频剪辑等多媒体元素于一体的演示文稿,通过一幅幅色彩艳丽、动感十足的演示画面,生动形象地表述主题、阐明自己的观点。此外,它还可以用计算机配合大https://fanqienovel.com/reader/7103803191648586755
16.幂果logo设计软件下载幂果logo设计电脑版下载v1.3.7软件优势 1、集logo设计、商标设计、logo制作、图标设计、标志设计的logo生成器。 2、可以使用它进行徽章设计、logo水印添加、商标制作、图标制作等。 3、利用多种图形组合、360度图案的旋转、缩放等功能编辑出独特的Logo。 4、可以自定以更该图标的背景,添加图片到图标中,编辑文本内容等。 https://www.ddooo.com/softdown/180868.htm
17.关于举办第二十一届湖南省中小学电脑制作活动的通知6.电脑艺术设计(符号标志) 本年度主题为:我为活动添风采。 电脑制作活动已连续举办二十届,基于活动一直秉承的“实践、探索、创新”的主题,设计“实践”、“探索”、“创新”纪念徽章(可选择其一进行设计,也可设计多个)。 需通过电脑设计制作,运用图形、图像处理软件完成。作品应强调对艺术设计中图形、文字、色彩三大https://www.i3done.com/news/2020/2381.html
18.logo设计软件免费版logo设计免费生成器下载推荐理由:i云电app,素材丰富的电竞徽标设计软件,提供丰富素材,在线制作logo,使用简单,轻松设置,多种素材免费使用,为广大电竞爱好者带来更便捷的电竞徽标设计体验。 下载Logo商标设计app 2022-07-0962.6M v2.1.0 最新版 推荐理由:Logo商标设计app下载,一款智能高效的logo商标在线编辑生成工具,通过Logo商标设计app用https://www.qqtn.com/qqkey/lsmtxdzb
19.高中毕业简历(精选9篇)众多的形式无外乎是对版面视觉形式语言及形状语法的探索与尝试,我们可以由此创造出许多风格迥异的版面形式类型,更可以通过对版式形式“语法”的学习来真正懂得设计的限制与自由。 简历媒介传播多元化 随着近年来计算机软件技术的普及、多媒体技术的发展以及网络技术的成熟,人与人之间沟通交流的方式发生了质的转变。进而使https://www.360wenmi.com/f/file6a2mtjxl.html
20.360手机助手手机软件下载手机游戏下载安卓软件安卓游戏logo设计是一款集logo设计、商标设计、logo制作、图标设计、标志设计的logo生成器,也是一款徽章设计、logo水印、商标制作、图标制作的logo设计软件。利用多种图形组合、360度图案的旋转、缩放等功能编辑出独特的Logo,还在苦苦搜索logo design吗?使用logo设计软件,你可以在很短时间内设计出漂亮的Logo,创建自定义、创意和美http://zhushou.360.cn/detail/index/soft_id/3906552
21.招聘计划书(精选17篇)在招生前,我们在学校食堂、教室、宿舍楼张贴公告,向全校征集有骑行经验或对骑行有浓厚兴趣的同学,并尽可能与他们深入了解,希望找到更多对协会有益的信息,热烈欢迎所有同学加入我们,收集象征协会的标志,如徽章、制服、旗帜等的设计制作。 2、干部选拔 为了协会更好的发展和壮大,协会组织选拔干部,选拔更有资格的学生担任https://www.yjbys.com/hr/zhaopin/3039279.html
22.PS样机教程!超精致样机让你的设计与众不同(附1G样机素材下载关于教程 AI肖博士开年第一篇教程,视频&文章,超详细哦~ 说明:视频实操演示全部在AI软件中完成的。 上图是由追波大神George P . Wilson设计的牛年邮票,邮票看上去有油墨印刷的质感,显得非常自然与逼真。 下面,我会教大家如何在AI中制作油墨印刷质感邮票。阅读文章 >> AI教程!简单的卡通徽章插画如何绘制?手把手https://uiiiuiii.com/photoshop/1212423291.html