當(dāng)你無(wú)聊時(shí),可以玩玩 GitHub 上這個(gè)開源項(xiàng)目
“
閱讀本文大概需要 3 分鐘。
據(jù)說(shuō)，無(wú)聊是創(chuàng)造力的源泉。最近，一個(gè)名為「Pose Animator」的項(xiàng)目人氣暴增，打開以后，我們發(fā)現(xiàn)這又是一個(gè)能讓人自?shī)首詷?lè)，并且絲毫察覺不到時(shí)間流逝的神奇工具。
短短三天內(nèi)，這個(gè)項(xiàng)目就在 GitHub 上獲得了 1.9k 的 Star 量，在推特上也獲得了 3.4k 的點(diǎn)贊。
除了這個(gè)偏分劉海的紅衣少女，你還可以選擇把自己變成小浣熊或者貓頭鷹：
當(dāng)然，性別也是可以選擇的，在這一欄選擇「boy」就能切換到精神小伙了。
或許是在家無(wú)聊，一些網(wǎng)友也開始了瘋狂的演示（如何換裝本文第二部分有介紹）：
有人說(shuō)，不如把這個(gè)與 v2loopback 結(jié)合一下，用在 Zoom 里，想必那些冗長(zhǎng)的會(huì)議也沒有那么難熬了……
項(xiàng)目地址：https://github.com/yemount/pose-animator/
Pose Animator 是什么？
項(xiàng)目作者是一位叫做 Shan Huang 的小姐姐，她畢業(yè)于 CMU，現(xiàn)在是谷歌的 Creative Technologist。
簡(jiǎn)單來(lái)說(shuō) Pose Animator 會(huì)使用拍攝的 2D 矢量圖，并基于 PoseNet 和 FaceMesh 的識(shí)別結(jié)果，實(shí)時(shí)對(duì)結(jié)果及包含的曲線進(jìn)行動(dòng)畫處理。Pose Animator 從計(jì)算機(jī)圖形學(xué)中借鑒了「基于骨骼」的動(dòng)畫思想，并將其應(yīng)用于矢量字符。
在此骨骼動(dòng)畫里，通常展現(xiàn)的任務(wù)角色由兩部分組成：
用于繪制該角色的曲面
一組分層且相互連接的「骨頭」，其用途是使得曲面能夠移動(dòng)，同時(shí)也可活躍起來(lái)。
在 Pose Animator 中，曲面是由 SVG 文件中的 2D 矢量路徑所定義。對(duì)于「骨骼」結(jié)構(gòu)而言，Pose Animator 提供了預(yù)設(shè)定的骨骼層次表示形式，該表現(xiàn)形式同時(shí)也是基于 PoseNet 和 FaceMesh 的關(guān)鍵點(diǎn)而進(jìn)行設(shè)計(jì)的。在輸入的 SVG 文件中以及字符插圖中指定了此骨骼結(jié)構(gòu)的初始姿勢(shì)，同時(shí)通過(guò) ML 模型的識(shí)別結(jié)果來(lái)更新實(shí)時(shí)骨骼位置。
感興趣的讀者可以通過(guò)以下兩個(gè)一靜一動(dòng)的 Demo 進(jìn)行體驗(yàn)：
動(dòng)態(tài)：https://pose-animator-demo.firebaseapp.com/camera.html
靜態(tài)：https://pose-animator-demo.firebaseapp.com/static_image.html
如何運(yùn)行？
安裝依賴項(xiàng)同時(shí)準(zhǔn)備構(gòu)建目錄：
yarn查看文件更改，并啟動(dòng)開發(fā)服務(wù)器：
yarn watch值得一提的是，Chrome 以及 IOS Safari 都支持上述 Demos，Android 上的 Chrome 雖然還未測(cè)試過(guò)，但項(xiàng)目開發(fā)者表示應(yīng)該也同樣支持。
如何使得自己的設(shè)計(jì)具有動(dòng)畫效果？
所需工作并不復(fù)雜，下列新人教程可以說(shuō)是非常友好，短短幾步即可完成。首先，你需要下載示例骨架 SVG 工具，同時(shí)需要在矢量圖形編輯器中創(chuàng)建一個(gè)新文件，并將上述下載中名為「骨架」（skeleton）復(fù)制進(jìn)你所創(chuàng)建的文件中。
不建議在此文件組上有添加、移除或是重命名等修改，PoseAnimator 會(huì)依賴這些原始命名路徑從而讀取「skeleton」的初始位置，修改會(huì)很容易導(dǎo)致報(bào)錯(cuò)。
接下來(lái)，在「skeleton」文件組旁創(chuàng)建新的文件組，并將其命名為「illustration」，可以在此文件組中放置任一插圖的完整路徑。展開所有子文件組，確認(rèn)「illustration」中僅包含路徑元素，但目前并不支持復(fù)合路徑。其文件結(jié)構(gòu)圖應(yīng)該如下圖所示：
? ? [Layer 1]? ? |---- skeleton? ? |---- illustration? ? ? ? ? |---- path 1? ? ? ? ? |---- path 2? ? ? ? ? |---- path 3
通過(guò)移動(dòng)節(jié)點(diǎn)將「skeleton」組中的示例「skeleton」嵌入至「illustration」中，進(jìn)而導(dǎo)出 SVG 文件。之后打開 Pose Animator 相機(jī) Demo（上述 Demo 鏈接），將 SVG 文件拖放至瀏覽器選項(xiàng)中就能順利實(shí)現(xiàn)。詳情可參照 GitHub 項(xiàng)目地址。?
轉(zhuǎn)載來(lái)源
公眾號(hào)：機(jī)器之心
推薦閱讀
1
2
別再造假數(shù)據(jù)了，來(lái)試試 Faker 這個(gè)庫(kù)吧！
3
200 行代碼實(shí)現(xiàn)一個(gè)滑動(dòng)驗(yàn)證碼
4??
如何用一條命令將網(wǎng)頁(yè)轉(zhuǎn)成電腦 App
評(píng)論
圖片
表情