AE导出动画文件应用在web上

473 阅读1分钟

需求:制作一个跑步的人物动画,在web上播放 系统环境:mac 工具:adobe after effects 2024

借用一下网上的对比图

image.png

GIF,Apng,webp 都是一张动态的图,导出直接就可以直接使用。

PNG就是精灵图(雪碧图),存css操作 bodymovin是导出json,要播放器JS SVGA 自然是svga的了,要播放器JS

image.png

导出精灵图要AE使用CSS-Sprite-Exporter.jsx 脚本。 脚本可以直接导入,注意分辨率不要太大,导出会出现空白的文件夹,这样是失败的,正常输出是images和一个html

image.png

bodymovin导出的json,默认是有images文件夹,把图片分离出来,您可以转换成base64

image.png

svga直接导出就行了

image.png

有些动画不支持直接转换。需要导出PNG,再以PNG作为动画帧。

image.png

会导致一个文件夹,里面放着一堆PNG,然后导入到新的AE合成 Option + ] 剪辑到所有图层剩下一帧 再重新排序

image.png

这样就PNG模型下的动画,直接导出SVGA就可以了

小插曲: 在使用AE插件DeeKay (人物骨架动画插件)下载安装包 直接放进 /Library/Application Support/Adobe/CEP/extensions

重启动一下AE,就可以在窗口->拓展 看得到。发现要下载预设包,下载很慢,下载完发现有404的图片,导致脚本错误,上网找了预设包,直接覆盖以下文件就解决了。这是Mac预设包的路径 /Users/ocean/Library/Application Support/MDS/DeeKay_Tool_Extention