中国程序媛出品,2D插画实时变动画,网友已经玩疯了!

（给前端大学加星标，提升前端技能.）

整理：开源最前线

https://github.com/yemount/pose-animator

最近，一个名为Pose Animator的开源项目在Github上火了，目前已经在Github上收星4.2K，而且稳稳霸住了Github周榜第二的位置。

简单来说，这是一个Web动画工具，你可以将自己变成任何一个插画形象，无论你怎么动，屏幕里的形象也会完成和你一模一样的动作，就像这样：

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

再比如下面的这位小姐姐，让自己的插画作品和自己共舞应该是不错的体验吧：

Pose Animator怎么做到的？

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

在骨骼动画中，角色分为两个部分：

• 用于绘制模型的曲线
• 用来对表面进行动画处理的骨架

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

Pose Animator目前支持单姿态、单脸检测，可以在桌面版Chrome和 Safari上运行。

值得一提的是，Pose Animator创建者是一位中国程序媛Shan Huang，目前就职于谷歌，本科毕业于卡内基梅隆大学，专业是计算机科学，辅修人机交互。以下是Shan Huang开源的项目列表：

最后附上相关地址：
Demo测试地址：

• 实时camera：https://pose-animator-demo.firebaseapp.com/camera.html

• 通过静态的图像演示：https://pose-animator-demo.firebaseapp.com/static_image.html

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

分享前端好文，点亮 在看