Lottie动态文本实战--红包动效
本文参考链接：https://zhuanlan.zhihu.com/p/102334701
Lottie 现在已开始支持 AE 里使用文本、输出文本动效json，并可动态修改文本的功能。在动态效果越来越依赖设计师的情况下，这意味着我们输出的动画效果不会只局限于固定的视频或者GIF形式，一旦业务数字和文案有所修改就必须重新输出一遍。
如下图中的红包窗弹出动效，要求是里面所有的文案都是后台动态修改的，文案根据不同的用户层级呈现出不同级别的数额（次动效已落地呈现）。
对于动态文本，我们在AE中直接用自带的文本工具，设置好需要的颜色、大小、字体等样式。下图为Lottie目前支持的文本渲染样式，最保险的是用纯色就好。
动态文本的图层命名
动态文本最好在AE里用英文命名好，方便开发后期用工具搜寻可替换的字段。如下图所示，最后一行就不够规范。
关于导出
在AE里制作完动效之后，就开始用bodymovin导出json文件。需要注意的是：动态文本是需要接后台数据端口的，因此要在设置里取消勾选 Glyphs 这一项，避免把字体转变为路径图形。若文本是固定内容，则可以勾选这一项，以增强 Lottie 在不同系统的稳定性。动效里有图片资源的记得勾选 Assets 里的 include in json 这个选项。
取消勾选 Glyphs 这个选项后，bodymovin 后面会出现一个表单，列出所有在 AE 里出现的字体，询问你：当系统内没有这种字体时，是否要替换为其他字体或者 URL。这时候大概率选 None 。因为 Google Font 需要科学上网使用，Typekit 不一定适合你的设计稿，URL 的意思是动画在客户端渲染的时候通过路径下载字体包，这个我和前端配合尝试过，似乎不太实用。所以选none。
关于预览
设计师在 Lottie file 网页端预览动画的时候是没有问题的，但在 Lottie App 端预览会发现文本出现错位现象（如下图）。
这个经过我泣血的测试发现，是 Lottie App 本身的问题，因为在 iOS 和 android 的 app 测试环境，显示是正常的（当然不包括小程序和h5）。所以文本的预览还是和开发配合，在测试端预览看有没有问题吧。
关于字体适配
1、用各个机型的默认字体
开发所使用的编程语言、加载库和开发人员本身的技术，都会影响最终动效的呈现效果。比如用flutter编写的动态出现的问题较少，无论设计师用什么字体，都能自动替换为各个机型的默认字体。
其他编程语言则容易出现需要固定字体包的情况，这时候要根据不同的机型给不同的json文件。iOS 和 Android 没有共同通用的字体，如果设计文件里用的是苹方，给 iOS 端导出一个苹方的 json 文件即可，不同给字体包。给安卓导出安卓适配的非苹方的黑体 json 文件，比较小的中文字体包是 droid。
2、用特殊字体：如果是非常规黑体的特殊字体，iOS 和 Android 都需要给字体包，但要确保这个字体包的大小在开发可以接受的限度内再使用，一般英文的字体包会比较小，所以常在数字和英文这类设计里用特殊字体。
动效的前期沟通
设计师在开始做动效前，一定要与产品、开发沟通好动效的整体规划，并且要问对人，问清楚哪些是需要接变动数据的，哪些是固定场景的，不要做出来不符合需求导致时间和效率的浪费（泣血总结）。
