恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
居然还有人问动效怎么实现?我再教最后一次
0.0°
2021-03-26 原创文章 经验/观点 举报 34580 1230 639 34


这一次是一个非常非常干的干货,手把手教你如何配合开发将小动效在页面中展示出来。

关于如何做动效,网上有相关的课程和文章,我在这里就不说了,因为我可能做的也没人家好(偷笑),但是当你做完之后如何交付给开发,如何调试出比较好的效果,我这里可以分享一下我的经验和踩过的雷。

当然,如果和你配合的开发是个很厉害的大佬,你也可以直接跳过了,因为厉害的大佬可以自己写动效,写的可能还比你做的好(我就这样被虐过)。

巴拉巴拉废话一堆,现在进入正题,我会分别告诉大家小动效在小程序端和APP端如何导出,配合开发去落地,主要就是使用APNG格式的图片JOSN动画文件


小程序端


首先小程序是基于各个平台的开发框架进行开发的,实现技术类似于HTML,和APP在技术上有本质的区别,所以在APP上适用的方法不一定在小程序上适用。

虽然有些简单的小动效开发可以自己直接写出来,但是开发大大说,写太多会影响小程序的性能,那就需要我们来帮忙解决了。

APNG图片介绍

一般情况下我们会使用GIF动图来实现动效,但是GIF图片的缺点就是不清晰、有锯齿、不支持半透明。这里给大家介绍另外一种图片格式「APNG图片」。

简单来说,APNG 支持全彩和半透明,无杂边问题,文件体积小。缺点就是兼容性差,但是在小程序端是默认兼容的,这便是极好的。


简单介绍完APNG,我再给大家推荐一款我使用的制作APNG图片的软件「iSparta」。下载地址:http://isparta.github.io/index.html



实操案例


下面我会用一个小案例来演示怎么制作ANPG动图。


第一步:导出序列帧

如果你是用PS制作动效,做的是帧动画,那么需要你把每一帧都单独导出一张图片。

如果你是用AE制作动效,那么就需要你将AE的动效导出成PNG序列。


☆注意点

1、选择导出【png序列】,通道要选择【RGB+Alpna】

2、可以设置帧序列的数量


导出结果对比

帧速率越高动画就会越流畅,但是针对简单的小动效,适当降低帧速率也不会有特别大的影响,所以可以根据实际情况来选择导出的帧速率。


第二步:将序列帧导入软件

将已经导出的序列帧再导入到iSparta软件中,序列帧要按顺序命名好。


☆注意点

导入之后需要设置帧频,控制动效速度的快慢。


看一下不同的设置最终的效果:


导出的文件后缀仍然是「文件名.png」,所以在交付的时候要区分清楚。

如果想要预览,可以在之前的下载网站,有一个在线查看器,可以预览效果。


压缩小技巧

导出之后的文件在对比之后,发现虽然效果比GIF图片要好,但是文件的体积却比GIF图片大一点,这里可以直接使用「iSparta」中自带的压缩设置来压缩,但是有时候我会觉得压缩的质量不太好。那么重点来了,我会先把序列帧图片在「tinypng」压缩网站上进行压缩,然后再导入到「iSparta」软件中进行APNG图片制作,过程虽然麻烦,但是效果好。


上面一切都完成之后,就可以直接把这个图片交付给开发了,小程序端可以直接使用,亲测可用。



APP端

APP端的小动效可以通过GIF图、序列帧、Lottie库等方式来实现,GIF图和序列帧开发都很容易使用,但是Lottie库需要开发去看一下文档,学习一下如何使用这个库。

之前项目中,开发都以项目时间紧张为由,让我们导出GIF图或者序列帧来实现小动画,最近在一次优化Loding动画的需求中,终于说服了开发试一试Lottie库。


Lottie库介绍


那么如何用AE制作JSON动画文件呢?我们需要用到一个AE插件【Bodymovin】,这个插件可以帮助我们直接导出JSON文件。

至于下载及安装的办法我也是看的网上大佬的教程,跟着大佬的步骤一步一步来的。

这是学习下载及安装帖子:https://zhuanlan.zhihu.com/p/26304609

如果不能下载和安装的话,另外再推荐一个AE插件的网站:https://www.lookae.com/?s=bodymovin

 

现在我们默认已经下载和安装好了,就可以开始动手导出JSON文件了。

 

实操案例

下面我会用之前的小案例来演示怎么导出JSON文件。


第一步:设计制作动效

首先你要先用AE制作好你需要的动效


☆注意点

1、动效需要都是矢量图形绘制,最好不要引入位图文件,如果引入要注意将图片一起给到开发

2、AE中有些效果Bodymovin导出并不支持,所以小动效不要过于复杂


第二步:导出文件

动效设计好之后就可以启动Bodymovin插件,直接导出。

如果你想查看导出的效果,记得导出的时候要在设置里面选择「Demo」,一起导出,就会有个demo的文件夹,点击里面的文件就可以直接查看。

我们虽然可以使用demo进行查看,但是还是不知道线上的效果,如果你和开发大大关系好,可以直接发给开发在真机上看一下效果,如果你不想麻烦开发大大,可以自己用下面这个网址,自己在浏览器中在线预览。

一个预览网站:https://lottiefiles.com/preview

再一个预览网站:https://svgsprite.com/tools/lottie-player/?render=canvas


最后再对比一下文件大小:


对比之后发现JSON文件体积最小,而且开发可以控制大小、速度、循环次数之类的,方便又智能,是比较推荐在APP端使用的。

 

小结

本次我主要就是介绍一下APNG格式的图片和JOSN动画文件的相关内容以及导出方法,虽然步骤看起来很简单,但是在导出之后要预览效果,然后更加预览的效果再调整动效,是一个不停反复的过程,经过几次反复之后才会得到一个比较好的结果。

另外,我这里仅仅是针对比较简单的小动效,如果是比较复杂的动效应该也可以试试,但是我还没有实际操作过,所以不知道真实的效果如何。

在我写这篇文章的时候,我又去查看了一些资料,了解到除了这两种方法,还有其他方法可以将小动效落地实现出来,但是我没有使用过,所以也就不胡乱介绍了,大家还有其他好的方法可以一起来交流。


以上就是我平时工作中具体操作的动效实现,你学废了吗?


下期预告:偷偷告诉你关于画图标的“武林秘籍”



Powered by Froala Editor

更新:2021-03-26

收藏

1230人已收藏

评分:

完整度:4星

启发性:4星

勤奋性:4星

排版布局:4星

推荐:
动效落地方法,还是挺详细的,可以学习一下!

IAM仓仓君

大人,时代已经变了~wx:IAM-CCJ

  • 24

    作品

  • 1159

    粉丝

  • 86

    关注

  • 你一定要了解的分析法则,教你如何分析工作中的需求
  • 坊间流传的交互七大定律,你都知道几条呢?
  • 五步教你画图标,看看我的“独家秘籍”
  • 尼尔森可用性原则是什么“鬼东西”(下)

    猜你喜欢

      2021-03-26 原创文章 经验/观点 举报 34580 1230 639 34

      居然还有人问动效怎么实现?我再教最后一次

      0.0°

      你确定要举报居然还有人问动效怎么实现?我再教最后一次

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年03月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      639
      1230
      34

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录