需求:制作一个跑步的人物动画,在web上播放 系统环境:mac 工具:adobe after effects 2024
借用一下网上的对比图
GIF,Apng,webp 都是一张动态的图,导出直接就可以直接使用。
PNG就是精灵图(雪碧图),存css操作 bodymovin是导出json,要播放器JS SVGA 自然是svga的了,要播放器JS
导出精灵图要AE使用CSS-Sprite-Exporter.jsx 脚本。 脚本可以直接导入,注意分辨率不要太大,导出会出现空白的文件夹,这样是失败的,正常输出是images和一个html
bodymovin导出的json,默认是有images文件夹,把图片分离出来,您可以转换成base64
svga直接导出就行了
有些动画不支持直接转换。需要导出PNG,再以PNG作为动画帧。
会导致一个文件夹,里面放着一堆PNG,然后导入到新的AE合成 Option + ] 剪辑到所有图层剩下一帧 再重新排序
这样就PNG模型下的动画,直接导出SVGA就可以了
小插曲: 在使用AE插件DeeKay (人物骨架动画插件)下载安装包 直接放进 /Library/Application Support/Adobe/CEP/extensions
重启动一下AE,就可以在窗口->拓展 看得到。发现要下载预设包,下载很慢,下载完发现有404的图片,导致脚本错误,上网找了预设包,直接覆盖以下文件就解决了。这是Mac预设包的路径 /Users/ocean/Library/Application Support/MDS/DeeKay_Tool_Extention