header_v0.7.32

如何跟开发小哥一起实现你的Loading动效

195天前发布

原创文章 / UI / 教程
XU小欧 原创,如需商业用途或转载请与XU小欧联系,谢谢配合。

在做移动端APP的工作中,大家或多或少会遇到 这里需要做一个 炫酷的Loading!那里做个 惊喜的效果!最后设计出来后,开发小哥看后摇摇头,你这个木法实现,然后你一脸黑线。。。。

本文主要介绍如何将你 设计好的动效 让开发小哥完美实现!

文笔不好,若有不明白之处,大家可以留言指出,谢谢~


末尾有转载高能干货!

01b458c694b3a801219c77aad18f.jpg



这里我说下开发常用的3种格式:

  1. 视频(MP4)

  2. PNG-序列

  3. GIF



先来看看它们的优劣:

0c3158c50b6fa801219c77e26702.jpg



小总结一下 :

MP4:用于设计比较炫酷的Loading,时常:3秒或更长。

PNG:用于设计简单,时常:3秒内.

GIF:暂时我没发现有哪个APP用 GIF展示动效的。



815e58c6954aa801219c7715ab65.jpg

我想大家已经知道如何取决于用哪种 格式来给开发小哥了。

但是如何做出来给开发小哥呢?



主讲重点:MP4

PNG-序列、GIF大家应该比较熟悉,这里就省略不讲了。废话不多说,开始!



我做动效主要用AE,可以导出多种格式,方便处理,下面将以我的工作项目为例来进行讲解。


设计稿:


真机实现效果:


步骤1:将你的动效在AE中设计好;


我是以iPhone6的尺寸来设计的,设计过程省略...  设计完成792d58c50f47a801219c77951185.jpg

1cd658c50f99a801219c77f6e5a6.jpg


这一步有童鞋问我,为什么要用750*1334当背景呢?

因为这个动效MP4 是直接叠在最底层的, 上方的tab、标签啥的等等 控件都是 可操作的,


注:你也可以设置一个 小尺寸,比如:400*300的,但是要考虑到 MP4背景不透明,如果APP的背景是全白,那么你视频的背景也得是全白才行~


就好比说,你这个 loading动效是 整屏而且带背景的,就可以设置 750*1334的尺寸,直接让开发小哥放在底层就好了。当然,你也可以用1080*1920的,只不过占用内存稍微大一点点,但是750*1334的也足够清晰,根据你们自己的要求来选择。(仅针对iOS) 


对于安卓,直接放大750*1334 成 1080*1920就行了,毕竟安卓机 不是2K屏幕,就没有苹果的Retina屏看着清晰。


步骤2:保存好你的 AE工程文件;


275758c51007a801219c77bcc05e.jpg


步骤3:重点来啦!!!


用Adobe Media Encoder 打开  加载动画.aep

dba958c51021a801219c7702050d.jpg

打开后,点击   匹配源-高比特率,  进行参数调整。

ec4b58c68f80a801219c77549f83.jpg


预设那里,大家可以根据实际情况来选择;一定要记得改成自己的设计尺寸


61b058c6912ca801219c77ea1f04.jpg


调节 比特率设置  是控制大小的关键所在


483858c691bea801219c77af6fec.jpg


导出后,就算是有12秒的视频,也才824KB的 ,是不是 感觉小的一比啊!1M都不到!!!

ac2358c697c6a801219c7745cc07.jpg



8ead58c692b2a801219c779e96ed.jpg

然后你就可以把MP4 直接扔给 开发小哥,安心工(mo)作(鱼)去了~

完美解决Loading动效的开发,开发小哥开心,你也开心~

其实还是 沟通 最重要啦~ 多跟小哥们闹闹磕,加深加深感(ji)情(qing), 工作上也会配合的更加默契和融洽。


最后在哔哔一句,虽然是这里是 loading动效,但是,其他用途也可以用这种方法哦~



下边这个就厉害了,你只需要用AE做,其他的交给开发小哥哥就行。

请到原作者博客下看吧~ 


Lottie- 让Android动画实现更简单

Lottie- 让Android动画实现更简单  ←点这里跳转




59f458c69618a801219c77f21c81.jpg

都看到这里了,你是不是发现你欠我一个赞了? 别看了,赶紧的!


112

    文章信息

    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功