写在开头:文章中出现的问题,仅限Bodymovin5.6.3版本;After Effect 2019版本。如果在后续版本中没有出现,请自行忽略。
坑点1——开始时的画板尺寸
新建AE文件时,建议以动画区域的1倍图尺寸建立画板。若使用图片素材,为保证清晰度,需使用2倍或3倍图。
坑点2——动画文件的图片素材
动画文件若使用图片素材,导出json文件时,生成image文件夹用于放置动画中的图片素材。
iOS环境下可直接识别@2x与@3x的图片,也就是导出 json的image的文件目录下可以放入img_0@2x和img_0@3x的图片素材,程序可以自动识别图片后缀,并分配到对应的机型(引用:AE-bodymovin 安装与使用)。安卓环境建议直接使用3倍图。
若动画文件使用图片素材,通过Bodymovin选择“图片资源设置/将图片资源转化为base64代码并一起保存到JSON文件中”选项,将图片素材包进json文件中,iOS低系统版本会出现崩溃情况。建议单独导出图片资源。
坑点3——动画中的文字
若动效中包含文字,建议在AE中将文字图层创建为形状。若通过Bodymovin中的“字体图形化”工具会出现原本居中对齐的文字变为左端对齐的现象(安卓环境,iOS未知)。
坑点4——高斯模糊
Lottie不支持导出高斯模糊效果,若制作阴影效果,需将阴影部分单独切图,以图片素材导入AE中。
坑点5——渐变填充汉化
Lottie支持导出图形的渐变填充效果,但由于After Effect使用汉化版本,图形填充属性名称应由“渐变填充 1”修改为“Gradient Fill 1”即可显示正常。但填充渐变颜色在iOS环境中不显示整个填充图形(安卓环境正常),建议使用单色填充。
坑点6——开发控制动画属性
Lottie支持开发控制动画的属性(包括动画速度、持续时长、是否重复执行、是否反向执行、是否缓存动画等),从而制作有交互的动效。
例如:下拉刷新动画,可以根据下滑动作控制动画速度;下载过程等待动画,根据下载进程呈现不同状态。
必看“芝士点”导航
bodymovin更新信息(github)
AE导出json工具-bodymovin(Lottie)汉化(知乎)
AE动画还原神器Lottie+Bodymovin踩坑记(简书)
Lottie源码——给开发看(github)
那些年被Lottie坑过的地方(知乎)