【】适合H5页的几种动效格式 - 互动创意
产品交互
【】适合H5页的几种动效格式
- insen 发表于2022年7月26日

json.jpg

1 JSON

输出

将AE制作好的动效通过Bodymovin插件渲染导出JSON文件,JSON文件可以通过官网进行效果预览,兼容iOS/Android/web。这里要注意该插件对AE部分效果是不支持的

bodymovin_v5.10.0.zip
文件大小:18,977 Kb更新时间:2022-12-14 10:44

特点

文件小,可制作失量和位图动效,支持部分AE表达式,提供多种接口方便对动画进行交互操作,是H5交互动画的首选格式。

svga.jpg

2 SVGA

输出

用AE制作动效然后通过SVGAConverter插件,渲染导出SVGA文件,通过官网的预览功能对导出的文件进行预览,兼容iOS/Android/web。常用于礼物动效落地。

特点

简单且性能卓越,可以支持AE种的大部分效果,多用于复杂的动画效果,体积更小且还原效果较好,在矢量动画使用该格式可以最大程度减少加载量。

GIF.jpg

3 GIF

输出

用AE制作好动态效果导出序列帧,再利用PS/AN或者其他工具导出GIF图

特点

动画兼容性最好,但色彩最高仅有256,画面品质较差容易掉帧,透明背景周围会有明显的锯齿毛边,在对图像质量有要求的项目中不推荐使用该格式。

PNG.jpg

4 PNG序列

输出

用AE制作好动态效果导出序列帧,可以利用图片压缩工具对序列图片进行压缩,减小体积大小。将序列图打包成图集,配合css动画可实现简单高效的动画效果。

特点

内存占用高,大量帧数会使得加载量倍增,色彩支持1600万种颜色,图像质量最高,适合应用在高精度短时长的动画中。

APNG.jpg

5 APNG

输出

将AE输出的序列图通过 iSparta 进行转换得到APNG格式的动态图。或者利用AE脚本BX-Webp/Apng Exporter 直接导出APNG

特点

本质上属于PNG的扩展格式,相比与PNG格式,APNG有用一样优异的图像质量,且不需要借助脚本代码即可实现序列帧的动画效果,但对WEB浏览器兼容性较差,使用前需要做好兼容性测试。

2

评论