集团官网
  • 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资

移动端实现动效如何设计实现?

编辑:云和数据 日期:2022-07-25 17:06

关于移动端实现动效,日常设计中是什么方法完成动画实现?实现动画的方式:设计输出的方式大概可以分为位图和矢量两种,与常规的图片输出并无太大的差异。位图方式: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中进行预览查看

4、SVG动画

下载keyshape软件,属于付费软件,可以下载14天试用版,可以通过图形制作动效,可以设置自动补间,导出svg文件,导出时可以设置运动是循环或是一次。

5、格式大小比

通过试验几种格式的大小大概是排序依次为:PNG序列>APNG>GIF(质量较差)>Lottie / SVG,json文件和SVG动画文件比较接近,因此可以根据实际考虑决定即可,GIF虽然可以压缩到比较小,但是本身图片质量也较差,因此建议慎重考虑。

移动端实现动效如何设计实现?学习用工具导出需要的格式的文件只是第一步,重要的是实现有创意的动效,不要过于强调工具应该培养自己思考设计的习惯。除了设计提供的方式之外,还可以设计完成好demo开发通过代码进行实现。更多关于UI培训的问题,欢迎咨询云和数据官网云和数据拥有多年IT培训服务经验,采用全程面授高品质、高体验培养模式,助力更多学员实现高薪梦想。

相关内容

相比Angular和React,Vue.js插件有哪些优势? 目前市场三大前端主流框架分别是Angular、React和Vue.js。Vue之所以被开发者青睐,主要是Vue秉承了Angular和React框架两者的优势,并且Vue的代码简洁、上手容易,在市场上也得到大量应用。下面将对Vue的特性进行简单介绍。1.轻量级Angular的学习成本高,使用起来... Java数据库入门:常见的数据库产品有哪些? 在Java的学习中,经常会接触各种各样的数据库,随着数据库技术的发展,数据库产品越来越多,如Oracle、DB2、MongoDB、SQLServer、MySQL等,今天笔者就针对主流的数据库产品做一些详细的介绍。1.Oracle数据库Oracle数据库管理系统是由甲骨文(Oracle)公司开发... 什么样的人适合学Java编程? 当前Java依旧是大型软件服务器开发的首选编程语言,国内的抖音、京东、快手、今日头条等APP全都是Java编写的后台,可以说Java编程语言无处不在!应用领域广,自然企业所需人才也多。许多想进入Java开发行业的同学经常会问,我适不适合学Java?Java到底难不难学?今天笔者告诉你,以下几类... CSS层叠性和继承性的概念有什么不同? CSS是层叠式样式表的简称,层叠性和继承性是其基本特征。对于网页设计师来说,应深刻理解和灵活运用这两个概念。1.层叠性层叠性是指多种CSS样式的叠加。例如,当使用内嵌式CSS样式表定义<p>标记字号大小为12m,外链式定义<p>标记颜色为红色,那么段落文本将显示为12p... 参加IT培训机构的学习,要注意哪些事项? 随着IT行业的快速发展,其人才需求也与日俱增,在需求大于供给的市场环境下,IT从业人员的薪资也随之而越来越高。于是很多人因为对自己本行业的不满意,或者对高薪的向往而通过IT培训机构转行IT。随着转行人数的增加,IT培训机构的数量也在不断增长,甚至根据技术的不同,出现了各种细分语言的IT培训机构... html语言与javascript有什么关系? 什么是HTML?HTML称为超文本标记语言(HyperText Markup Language),是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字...
×