当你在 UI Motion Design 领域工作时，你需要克服的第一个障碍便是 —— 寻找时间、预算、以及将设计时间专注于灵感上的需求（的平衡）。因为建立工作流程和学习新技术可能是一个耗时的过程，这是一些预算紧张的项目所无法承受的。
在本文中，我将带你了解一些强大的工作流效率，它们将帮助您在导出时获得更小的 JSON ，并克服可能的性能障碍。
一、清理你的形状层并组织它们的内容
当导入复杂的插图元素到 After Effects 时，无论是通过 Overlord 或直接导入和转换的Illustrator 文档，你将要么最终得到一个合成中有非常多的形状层的结果，要么就是一个形状层（其 “Content” 部分带有不可管理的数量的子层）。如果这些层留着不管，那么你就会遇到很大的工作流程问题，这会减慢动画流程，并在最终 JSON 输出中添加不必要的数据。虽然会在动画流程的前端部分增加生产时间, 但是，适当地组织所有层次并尽可能多地删除 “Group” “Fill” “Stroke” “Merge Path” 这些参数（它们默认为子层的一部分）,将为您节省在动画阶段的宝贵时间以及允许您更容易地导航文件。从 Bodymovin 导出的 JSON 将包括所有这些层和参数引用的数据，尤其在处理复杂的合成时，它们可以随着时间的推移而显著增加。
让我们举个例子:
当 “小猫” 被导入 After Effects 并开始制作动画时，文件组织的区别是这样的:
从图中你可以看出：首先，我命名了每一层及其子层。这似乎是显而易见的，但有些动画师为了节省时间往往会省略这一步。最佳实践应该是尽可能多地命名，这样你就不会在自己的文件中浪费时间，特别是在处理这么多层时。
其次，我尝试根据我设计的如何制作动画来分组道具。将 “Helmet’” “Ear lines” “Snout” 等组合在一个名为 “Head’” 的图层下，允许我改变锚点，调整图层的位置/旋转等，这样做，所有的子图层都将包含在父变换中。更重要的是, 这种分组允许我使用一个层的基础 “Transform” 属性内的关键帧参数, 而不是形状子层的 “Transform” 的属性, 前者具有更强大的工具来编辑曲线以及分离位置上 X 和 Y 维度的能力。
这是动画 101 ; 这里没有最新进展。
然而，在 Bodymovin 中，所有的层和它们的所有参数都保存在 JSON 中，所以如果你使用的层名如果太长的话，这将影响你的导出的数据大小。如果你没有对对象进行分组，并且有大量的 “ Fill1” 或 “Stroke1” 参数，这将影响你导出的数据大小。为了弥补这一点，将元素组合在一起，以便它们共享这些常见的 Fills 或 Strokes，可以在最终 JSON 中节省大量数据大小。
在下面的图片中，你会注意到我 在“Head stripes” 下有 3 条路径共享相同的 “Stroke1” 和 “Fill1” 。
通过这样做，我删除了 2 个对 “Stroke 1” 的引用，2 个对 “Fill 1” 的引用，以及所有（那些可能被用于定义在 JSON 中的）额外数据。虽然看起来没有那么多数据，但如果你有一个有 150 个图层的动画，它将非常快地累加起来。
更多带有冗余参数(如 “Fill 1” )的层或过长的层名将导致 JSON 在导出时膨胀，花时间组织和命名所有层将帮助你减轻不必要的数据混乱，从而导致更大的文件。
