Pose Animator：一个用于实时TF.js模型的基于Web的SVG动画工具

Pose Animator采用2D矢量插图，并根据PoseNet和FaceMesh的识别结果实时设置其包含曲线的动画。它借鉴了计算机图形学中基于骨架的动画的思想，并将其应用于矢量角色。

在Pose Animator中，曲面由输入SVG文件中的2D矢量路径定义。对于骨骼结构，姿势动画提供基于PoseNet和FaceMesh的关键点设计的预定义装备(骨骼层次)表示。此骨骼结构的初始姿势与角色插图一起在输入SVG文件中指定，而实时骨骼位置由ML模型的识别结果更新。

//TODO：添加博客文章链接。有关其技术设计的更多详细信息，请查看此博客文章。

它应该也可以在Android上的Chrome上运行，可能还会有更多的Android移动浏览器运行，尽管对它的支持还没有经过测试。

在您选择的矢量图形编辑器中创建一个新文件。从上面的文件中将名为‘SKOKE’的组复制到您的工作文件中。注意：请勿添加、删除或重命名该组中的关节(圆)。姿势动画器依赖于这些命名路径来读取骨骼的初始位置。缺少关节将导致错误。

但是，您可以四处移动关节以将其嵌入到插图中。请参见步骤4。

创建一个新组，并将其命名为“插图”，紧挨着“骨架”组。这是您可以放置插图的所有路径的组。[层1]|-骨架|-图解|-路径1|-路径2|-路径3。

通过四处移动关节，将“骨骼”组中的示例骨骼嵌入到插图中。

打开姿势动画器摄影机演示。加载所有内容后，将SVG文件拖放到浏览器选项卡中。你应该能看到它变得栩栩如生：D