当你无聊时，可以玩玩 GitHub 上这个开源项目...

我不是女神ヾ 2023-02-12 11:25 3阅读 0赞

公众号关注 “五分钟学算法”

设为 “星标”，一起交流成长！

![format_png][]

转自机器之心

> 据说，无聊是创造力的源泉。

最近，一个名为「Pose Animator」的项目人气暴增，打开以后，我们发现这又是一个能让人自娱自乐，并且丝毫察觉不到时间流逝的神奇工具。

![format_png 1][]

短短三天内，这个项目就在 GitHub 上获得了 1.9k 的 Star 量，在推特上也获得了 3.4k 的点赞。

![format_png 2][]

除了这个偏分刘海的红衣少女，你还可以选择把自己变成小浣熊或者猫头鹰：

![format_png 3][]

![format_png 4][]

当然，性别也是可以选择的，在这一栏选择「boy」就能切换到精神小伙了。

![format_png 5][]

或许是在家无聊，一些网友也开始了疯狂的演示（如何换装本文第二部分有介绍）：

![format_png 6][]

*倒不失为一个放松身心的好方法。*

有人说，不如把这个与 v2loopback 结合一下，用在 Zoom 里，想必那些冗长的会议也没有那么难熬了……

![format_png 7][]

项目地址：https://github.com/yemount/pose-animator/

**Pose Animator 是什么？**

项目作者是一位叫做 Shan Huang 的小姐姐，她毕业于 CMU，现在是谷歌的 Creative Technologist。

![format_png 8][]

简单来说 Pose Animator 会使用拍摄的 2D 矢量图，并基于 PoseNet 和 FaceMesh 的识别结果，实时对结果及包含的曲线进行动画处理。Pose Animator 从计算机图形学中借鉴了「基于骨骼」的动画思想，并将其应用于矢量字符。

![format_png 9][]

![format_png 10][]

在此骨骼动画里，通常展现的任务角色由两部分组成：

*  用于绘制该角色的曲面
 *  一组分层且相互连接的「骨头」，其用途是使得曲面能够移动，同时也可活跃起来。

在 Pose Animator 中，曲面是由 SVG 文件中的 2D 矢量路径所定义。对于「骨骼」结构而言，Pose Animator 提供了预设定的骨骼层次表示形式，该表现形式同时也是基于 PoseNet 和 FaceMesh 的关键点而进行设计的。在输入的 SVG 文件中以及字符插图中指定了此骨骼结构的初始姿势，同时通过 ML 模型的识别结果来更新实时骨骼位置。

感兴趣的读者可以通过以下两个一静一动的 Demo 进行体验：

*  动态：https://pose-animator-demo.firebaseapp.com/camera.html
 *  静态：https://pose-animator-demo.firebaseapp.com/static\_image.html

**如何运行？**

安装依赖项同时准备构建目录：

yarn

查看文件更改，并启动开发服务器：

yarn watch

值得一提的是，Chrome 以及 IOS Safari 都支持上述 Demos，Android 上的 Chrome 虽然还未测试过，但项目开发者表示应该也同样支持。

**如何使得自己的设计具有动画效果？**

所需工作并不复杂，下列新人教程可以说是非常友好，短短几步即可完成。首先，你需要下载示例骨架 SVG 工具，同时需要在矢量图形编辑器中创建一个新文件，并将上述下载中名为「骨架」（skeleton）复制进你所创建的文件中。

![format_png 11][]

不建议在此文件组上有添加、移除或是重命名等修改，PoseAnimator 会依赖这些原始命名路径从而读取「skeleton」的初始位置，修改会很容易导致报错。

接下来，在「skeleton」文件组旁创建新的文件组，并将其命名为「illustration」，可以在此文件组中放置任一插图的完整路径。展开所有子文件组，确认「illustration」中仅包含路径元素，但目前并不支持复合路径。其文件结构图应该如下图所示：

通过移动节点将「skeleton」组中的示例「skeleton」嵌入至「illustration」中，进而导出 SVG 文件。之后打开 Pose Animator 相机 Demo（上述 Demo 链接），将 SVG 文件拖放至浏览器选项中就能顺利实现。详情可参照 GitHub 项目地址。

--------------------

### **推荐阅读** ###

• [C++是如何从代码到游戏的？][C]• [告诉你一个学习编程的诀窍（建议收藏）][Link 1]• [自学编程的八大误区！克服它！][Link 2]• [新手如何有效的刷算法题（LeetCode）][LeetCode]• [10款VS Code插件神器，第7款超级实用！][10_VS Code_7]• [在拼多多上班，是一种什么样的体验？我tm心态崩了呀！][tm]• [写给小白，从零开始拥有一个酷炫上线的网站！][Link 3]

--------------------

欢迎关注我的公众号“**五分钟学算法**”，如果喜欢，麻烦点一下“**在看**”~

![format_png 12][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy91RFJrTVdMaWEyOGhFM0I2bGs2UnNVNEFCN01pY2FLekJCRjNEMDBmbDZYdWdVYTg1MGh5V3RFZlBNQllhWFU5dGVBblNjdXJiaEI0UXo4UllKOXJpY2J4US82NDA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOUtWZlNCWHY3Y3VhWDlDTUtOeUw2ZVB2aWNWNFpSb2ZIaWJmcFNWaGlhNWR5MTVlYlNpYU1raWFYNFBnLzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOW43ejVCVUpuaWFibWhhUlMyaEJqSjBGTGg1bEp1OGxLNmlhSWZSRXNtY2lhWkwyYVRqelVRanNYZy82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOXVoRlpyQ2JEY2d2TU8xWUtLMmxnR0lpY2xmbUlmamR2ZDBPTk16elpNWUhxZnVITU8xM1lhVXcvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOXk0aWNqNGxwcTRwRlloT2hpYlFNTFZsV2lhOGliUzNYanZyOUFQdzhQWFN6Y1lVcHdSUko1VjZoY3cvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOVhyU1FiUm94NVZyeUpWOXc4cTVGaWNzbUxkbk5TbVpoSVBxNFNZR1FhamtaRUVKMHh6MGliNjZBLzY0MA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOVJoMG5FTzBHaWF2VGxKaWFBUHh6aWFlT1lGNERITDhpY3JmSW56WlNNZzY0NzZGRkZoVjNiaWJTZDhnLzY0MA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOVM0cm5HVEVpY2FJa0hqYUd0VHJvT3NVSEhwQklaU1BOUXNhalFKajJpY0JuYXRkbkhHM1ZRRTRBLzY0MA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOWZXOWljdXRaWWJJeDZlZWp5dzVidFBHY1dqTjJ6Z0UwTnhwYkU4QWNpY3p2TFlmOGVKUG83SXBBLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOWdBYWlhVEZ4ZEpPSDdRYXlDa0lucGhGb21jRlUwTlV6VmpvM0dQS0RHejU2cFBIWEkxVzNEUlEvNjQw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOTEwZFkxVzB0QWVDUTlUQjJOODhYVnZRU3Y1dFJXbkJUbFpwYW4wazlIaWN4ZDNoR25Wc28zbncvNjQw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9LbVhQS0ExOWdXOTVUWWdUc3c4dUx1b1BEbG5OQlRiOXVDelA3MWFDMkVzTFZaZHRuelpicFlWaWNDakYzUkttZHBYQWxaaWJOaWNLMENqTUlhb0ZJa3dLUS82NDA?x-oss-process=image/format,png
[C]: https://blog.csdn.net/kexuanxiu1163/article/details/105897849
[Link 1]: https://blog.csdn.net/kexuanxiu1163/article/details/105911378
[Link 2]: https://blog.csdn.net/kexuanxiu1163/article/details/105742893
[LeetCode]: https://blog.csdn.net/kexuanxiu1163/article/details/105742896
[10_VS Code_7]: https://blog.csdn.net/kexuanxiu1163/article/details/105721292
[tm]: https://blog.csdn.net/kexuanxiu1163/article/details/105697118
[Link 3]: https://blog.csdn.net/kexuanxiu1163/article/details/105648532
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ENjdwZWNlaWJlSVJodm5leUhtTURJTW1sOWtJYlVMUGlhUG5pYThpYW5ic1o3Q2trYlFGQTJLU3V3SzA2R3NuT3JMQ2tleHdwYUVoWU1aNHdac1BpY01Uc1ZBLzY0MA?x-oss-process=image/format,png