提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
分享我在动效设计实际交付开发时遇到的问题和我目前找到的一些解决方案。
动效的设计阶段我们通常会使用PS/AE/C4D等设计软件,常用到的图片格式主要是GIF、PNG序列帧。我先简单介绍一下这两种格式的导出↓↓↓
GIF:
PS:文件>导出>储存为web所用格式>类型【GIF】
AE:不能直接导出GIF
C4D:不能直接导出GIF
PNG序列:
PS:文件>导出>渲染视频>选择【Photoshop图像序列】
AE:合成>添加到渲染队列>输出模块>格式选择【PNG序列】
C4D:创建动画预览>在图片查看器中保存为【静帧】
在实际开发中这两种格式的图片往往不能满足实现效果,接下来分享一些我在交付动效时遇到的问题和目前找到的解决方案。
GIF支持全透明,不支持半透明,边缘会出现杂边的问题,目前常用的处理方法是在输出时采用颜色描边或选择无杂边。
PNG序列动画对色彩还原和透明度保留效果都更好,但是文件较大,播放时容易卡顿。其中一种解决办法是将多张序列图片合成一张大图(Sprites精灵图),前端使用CSS Sprites实现动画,可以减小图片的体积和减少对服务器的请求数量。
但是在前端配合程度不高的情况下,希望设计直接给到一张动图,又该怎么办?我又找到了这两种办法↓↓↓
WEBP:是Google在2010年发布的一种图片格式,可静态可动态,文件体积更小,可无损压缩,支持透明色…这样听起来简直完美!但是…有兼容性问题,Safari和IE浏览器不支持,具体的兼容情况如下(2020年1月)↓↓↓
APNG:APNG是PNG的升级版,他的后缀名依然是.png,包含动态的情况下体积会比普通静态png大数倍,可以无损的展示动态。不过依然有兼容性问题,IE浏览器不支持,不过APNG向下兼容PNG,在不支持APNG的浏览器中显示为第一帧静态PNG图片。具体的兼容情况如下(2020年1月)↓↓↓
了解了这两种格式,可以根据项目的需要取舍选用,那么如何制作WEBP/APNG图片呢?
一,格式转换软件iSparta
二:AE插件!来自知乎《AE 导出 Apng/Webp 从未如此轻松》
我这里主要讲的是将动效导出成图片的方法,另外还有比较火的Lottie——可应用于Andriod和iOS的动画库,它通过bodymovin插件来解析Adobe After Effects 动画并导出为json文件,通过手机端原生的方式或者通过React Native的方式渲染出矢量动画。 好像更适合移动端,网页虽然也可以用这个方式,但对前端的要求高一些,在前端不配合的的情况下就是扯淡了~并且对动效设计有很多限制,能在AE中实现的效果非常有限,还有使用位图后资源消耗大等问题。
我目前找到的解决办法就是这些,希望能对同样迷惑的你有所帮助
ヘ|・∀・|ノ*~❤
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册