如何像苹果公众号的动图一样清晰？5种方法教你搞定！
公众号做久了，谁还没有在图文中插入过动图？
尽管公众号可以上传的图片大小限制不断放开，由 2M 到 5M 再到现在的 10M，但我们上传的动图还是糊的一塌糊涂。
同样是动效，为什么苹果以及其他大品牌的总是那么清晰？一句话解释的话，那是因为它们的很多动效不仅仅是一张动图那么简单。
看来一句话是解释不清楚了，想要各种动效保持高清，我们得分情况来看。
一多层图片（按图层拆分）
来自「Apple」公众号：
点此查看原文
虽然公众号上传图片的限制放大到了 10M，但为了用户的阅读体验，老沙还是建议尽量把图片大小控制在 6M 以内，不然用户在网速较慢的情况下打开图文半天看不到内容，很可能转身就走。
很多小伙伴也明白这个道理，会通过缩小尺寸、抽帧等方法压缩图片，但清晰度总是不尽人意。
其实一张动图太大并且在压缩后之所以不能保持清晰，很重要的一个原因是图片中的颜色太丰富。
如果一张动图中只有一小部分动，那我们就可以将动的部分拆分出来，拆解成几张小动图和静态图，然后分别上传到公众号中重新组合在一起。
前面苹果的例子就由下方两张图片组合成的：
根据拆解的层数和尺寸，我们可以选择使用 iPaiban Pro 黑科技编辑器中的以下组件进行制作。
组件：无缝图(自上传图标,自定义位置)
编号：10291（组件）
组件：双层图片
编号：10319（组件）
组件：三层图片
编号：10323（组件）
组件：三层图片(第二层自定义大小及位置)
编号：10777（组件）
组件：多层图片
编号：10325（组件）
其中「双层图片」「三层图片」和「多层图片」组件，每一层图片的尺寸需保持一致，「无缝图(自上传图标,自定义位置)」和「三层图片(第二层自定义大小及位置)」组件中的第二层图片可任意调整位置和大小。
二串联播放GIF（按时间拆分）
来自「腾讯」公众号：
▲点击查看原文
如果是视频转换或直接录制的动图呢？不能按层拆分我们还可以按时间拆分。
比如一段时长 6s 的动图，我们可以拆分成每 2s 一段，然后使用 iPaiban Pro 黑科技编辑器中的下方组件进行串联组合。
组件：自动-串联播放GIF动图
编号：10466（组件）
需要注意的是，这种只适合动图单次播放的情况，一般放在图文开头。
像前面腾讯图文中的开头动画，就是由多个GIF串联组合成的：
三序列帧
来自「Apple」公众号：
▲点击查看原文
动图和视频说到底是由一张张连续的静态图片组成的，如果我们想要一个极致高清的动态效果，可以使用 iPaiban Pro 黑科技编辑器中的下方组件进行制作。
组件：序列帧动效
编号：10375（组件）
选择组件后，上传多张连续动作静态图，即可生成高清的动态效果。
四静态图+SVG动效
来自「Apple」公众号：
很多规律性的简单动效，其实不是动图而是代码控制静态图实现的。
像上面的宫格弹跳动效，我们使用 iPaiban Pro 黑科技编辑器的下方组件即可制作。
组件：宫格式弹跳切换图片(向上、基础版)
编号：10318（组件）
除此之外浮动、旋转、轮播、洗牌、渐变切换等动效我们使用编辑器都可以制作，在「组件」-「自动」分类中可找到相关组件。
五矢量素材+SVG动效
来自「TUDOR帝舵」公众号：
▲点击查看原文
很多像线条轨迹移动这样覆盖全文的动效，则是由矢量素材利用代码实现，这类动效因为较为复杂，目前只能是定制。
大致原理是先让设计师通过 Ai 绘制矢量图形，然后转成 SVG 代码，工程师再技术控制让人物、物品动起来，沿着绘制的轨迹移动。
最后，我们再回到开头的问题：同样是动效，为什么苹果以及其他大品牌的总是那么清晰？
还是那句话，它们的很多动效不仅仅是一张动图那么简单。明白了其中的原理，我们利用 iPaiban Pro 黑科技编辑器或者定制就可以做到。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）