在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
移动端实现动效如何设计落地?关于移动端实现动效,日常设计中是什么方法完成动画实现?实现动画的方式:设计输出的方式大概可以分为位图和矢量两种,与常规的图片输出并无太大的差异。位图方式: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开发通过代码进行实现
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
视觉设计培训班怎么样?有哪些优势?
如今,无论是大街小巷随处可见的广告宣传,还是现代人随时不离手的智能手机,都充斥着各式各样的视觉设计,可以说我们的现代社会早已离不开视觉设计师。正因为如此,想要成为视觉设计师的学习者也在不断增加,但是学习视觉设计并不是什么简单的事,如果想提高学习效果和效率,最好还是报培训班比较靠谱。那么视觉设计培训班到底怎么样?又有哪些优势呢?
5296
2019-09-24 18:37:58
UI设计是做什么的?需要学什么?
如果要说哪个行业和互联网密不可分,高薪还不用敲代码的话,就不得不说UI设计这个职业了。虽然大家都或多或少听说过UI设计,但是UI设计是做什么的?需要学什么?还是有很多人完全不了解的。简单来说,UI设计师就是设计用户界面的人。想要成为一名合格UI设计师需要学习各种设计软件,还有字体设计、色彩理论、排版和视觉等设计基础知识。下面小编就来揭开UI设计的神秘面纱,和大家好好聊聊这个行业。
4640
2020-04-14 19:25:39
学习视觉设计难不难?需要多久?
如今,我们的生活和工作早已和视觉设计息息相关,一般我们说的视觉设计包括标志设计、包装设计、字体设计、图像设计、书籍设计、广告设计、界面设计等等。那么,学习视觉设计难不难?需要多久呢?其实只要你对设计感兴趣,在博学谷学习视觉设计就不会感觉很困难,至于学习时间因人而异。如果你有一定的Photoshop基础,一个月就能大概掌握视觉设计的相关技能了。
6460
2020-06-01 16:44:00
电商网页设计发展前景如何?
随着互联网的普及和电商行业的发展,各大电商平台卖家之间的竞争已经到了白热化的程度。而电商网页设计也自然而然引起了人们的重视。毕竟人都是视觉动物,电商网页设计很大程度上影响了产品的线上销售效果。那么电商网页设计发展前景究竟如何?答案是十分肯定的,无论是该行业本身,还是该行业的从业者,发展前景都将十分广阔和光明!
5224
2020-06-11 11:36:06
提高文字设计感的四大技巧
如何提高文字设计感?首先我们要知道什么样的画面会给人设计感。比如有变化才能让人感觉到这是经过精心设计过的,并且变化能带来视觉上的起伏,同时画面的细节也比较丰富,才能营造出我们所说的“设计感”。下面和大家分享几个简单实用的文字排版技巧,快速提升你的文字设计感。
3932
2020-08-14 10:07:39