赞助商
立即赞助

动效不知如何落地?看完腾讯高手的经验就明白了

交互设计4年前 (2020)发布 流光
8.6K 0 0

一直有很朋问一关移动端现动效的方法,平时也给大家做一答,但是能没有么系统,次抽点时间总结归纳下方面的内容,跟大家分享下我常设计中是何完成动画现的。

实现动画的方式

设计输出的方式大概以分为位图和矢量两种,与常规的图输出并无太大的差异。位图方式:PNG序列帧、APNG、GIF;矢量方式:Lottie、SVG动画。

动效不知如何落地?看完腾讯高手的经验就明白了

当除以设计提供的方式之外,还以设计完成demo,开通代码进行现例:javascript直接现、SVG(伸缩矢量图形)、CSS3 transition、CSS3 animation、Canvas动画、requestAnimationFrame由超出个人能力范畴就不展开讲。

实现动画常用的工具

现动画,首先还是得有哪工具以及合成相关的动效,我常主要使用的工具有Principle、AE、bodymovin插件、iSparta等软件。另外最近准备学习一个新的门svg动画的软件-KeyShape。

  • Principle:可以输出GIF、视频等格;
  • AE:以输出PNG序列,结合插件以输出GIF等等;
  • bodymovin:输出json文件(也就所谓的Lottie动画);
  • iSparta:使用PNG序列成APNG、GIF图片格式除此之外;
  • Keyshape:要是可制作较强大的路径变换画,然后输svg画格式。

动效不知如何落地?看完腾讯高手的经验就明白了

格式说明

  • PNG序列:单帧图像呈现,输后会生成一个序列组的件夹;
  • APNG:实上是把PNG序列合成张可动画化PNG,类似GIF,相比GIF质量要高,图片后缀依旧是「.png」。
  • GIF:动的位图,但质量差,压缩到临界值时出现锯齿边和白边,个人比不喜欢用。
  • Json(Lottie动画):实际一用码描述的文档,通过码描述径、节点的方式完动画效果,与发实际通过码实动画类似,通过bodymovin输出后减少发实的时间,提高了发实的效率。
  • SVG动画:Lottie的方式比较类似,可以减少开发的动画工作量,可以通过keyshape计并导出,后缀为「.SVG」。

如何输出文件?

接下来讲下各个软件输出对应式的方法,际上操并不太难,动效身更重要的还是在创意身,因此当你把握方式之以考虑进行创意设计。

由于GIF文件多种具都可以输出,这里就不再作详细明

1. PNG序列

  • 在AE制作好动画
  • 通AE预渲染,选择PNG序列,直接渲染出序列帧到地文件夹
  • 导出序列帧后需行压缩,常用的tinypng,压缩后较小的文件再行交付

具下视频

2. APNG

上导出到PNG序列帧,拖拽到iSparta软件中,合成即。合成时以选择帧率、循次数(0为无循)、导出质量等。下视频

3. Lottie

  • AE中需要bodymovin的插件
  • 制作好动画后,在窗口打开插件-bodymovin、
  • 选择导出的位置,直接渲染一下,即在地生成json文件
  • 插件预览能力,但较差。可以https://lottiefiles.com/preview中行预览查看

更Lottie相关以前往https://lottiefiles.com/学习,里面有富等Lottie动画效果和一插件下载,去研究下吧

4. SVG动画

  • 载keyshape软件,属于付软件,可载14天试版
  • 可以过图形制作动效,可以设自动补
  • 导出svg文件,导出时以设置运动是循或是一次

议大家自己下载软件后尝试

5. 格大小比

过试验几格大小大概是排序依为:PNG序列>APNG>GIF(质量较)>Lottie / SVG,json文件和SVG动画文件比较接近,此可以根据实考虑决定即可,GIF虽然可以压缩到比较小,是本身图片质量也较,此议慎考虑。

动效不知如何落地?看完腾讯高手的经验就明白了

应用案例

效在UI设计中的应场景很多,这里梳了一,之前我在项目中尝试过的效,给大分享一些案例,希望可对大有启发。

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

动效不知如何落地?看完腾讯高手的经验就明白了

最后总结

学习用什工导出什格式的文件只是第一步,更重要的还是如何制造出一个有创的动效,因此不要过于调工,更多应该培养思考计的习惯。

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

相关文章

在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计
编者按:本文总结了微交互的基础知识和三大作用,作者用大量优秀的微交互案例演示让你直观感受到微交互的强大,适合对微交互...
交互设计
我们在进行设计的时候,往往遇到以下的场景: 这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给...
App设计
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更...
动效设计
我在上一篇文章《动效设计没那么难!让谷歌动效设计师带你入门》当中,已经通过实际的案例,分享了动效设计并不难的原因。我...
AE
Lottie 是 Airbnb 推出的一种 SVG 动画解决方案,它可以跨平台播放,并解决了动画落地难的问题。当设计师做完动画只需使用 bo...
AE
化繁为简,是解决难题的好办法。今天的文章将会教你如何拆分一个动画,以及如何使得动画符合一般物理学规律而变得生动。 ...
AE动效
10个动效案例,让大家避开动效误区。 一、走路 在做走路动画的时候,除了要把脚与地面的接触做出来,更应该要注意的是身体不...
AE动效