1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

機器之心發表於2020-05-11
動畫
據說，無聊是創造力的源泉。
最近，一個名為「Pose Animator」的專案人氣暴增，開啟以後，我們發現這又是一個能讓人自娛自樂，並且絲毫察覺不到時間流逝的神奇工具。

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

短短三天內，這個專案就在 GitHub 上獲得了 1.9k 的 Star 量，在推特上也獲得了 3.4k 的點贊。

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

除了這個偏分劉海的紅衣少女，你還可以選擇把自己變成小浣熊或者貓頭鷹：

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

當然，性別也是可以選擇的，在這一欄選擇「boy」就能切換到精神小夥了。

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

或許是在家無聊，一些網友也開始了瘋狂的演示（如何換裝本文第二部分有介紹）：

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

倒不失為一個放鬆身心的好方法。

有人說，不如把這個與 v2loopback 結合一下，用在 Zoom 裡，想必那些冗長的會議也沒有那麼難熬了……

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

專案地址：https://github.com/yemount/pose-animator/

Pose Animator 是什麼？

專案作者是一位叫做 Shan Huang 的小姐姐，她畢業於 CMU，現在是谷歌的 Creative Technologist。

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

簡單來說 Pose Animator 會使用拍攝的 2D 向量圖，並基於 PoseNet 和 FaceMesh 的識別結果，實時對結果及包含的曲線進行動畫處理。Pose Animator 從計算機圖形學中借鑑了「基於骨骼」的動畫思想，並將其應用於向量字元。

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

在此骨骼動畫裡，通常展現的任務角色由兩部分組成：

  • 用於繪製該角色的曲面

  • 一組分層且相互連線的「骨頭」，其用途是使得曲面能夠移動，同時也可活躍起來。

在 Pose Animator 中，曲面是由 SVG 檔案中的 2D 向量路徑所定義。對於「骨骼」結構而言，Pose Animator 提供了預設定的骨骼層次表示形式，該表現形式同時也是基於 PoseNet 和 FaceMesh 的關鍵點而進行設計的。在輸入的 SVG 檔案中以及字元插圖中指定了此骨骼結構的初始姿勢，同時透過 ML 模型的識別結果來更新實時骨骼位置。

感興趣的讀者可以透過以下兩個一靜一動的 Demo 進行體驗：
如何執行？

安裝依賴項同時準備構建目錄：
yarn
檢視檔案更改，並啟動開發伺服器：
yarn watch
值得一提的是，Chrome 以及 IOS Safari 都支援上述 Demos，Android 上的 Chrome 雖然還未測試過，但專案開發者表示應該也同樣支援。

如何使得自己的設計具有動畫效果？

所需工作並不複雜，下列新人教程可以說是非常友好，短短几步即可完成。首先，你需要下載示例骨架 SVG 工具，同時需要在向量圖形編輯器中建立一個新檔案，並將上述下載中名為「骨架」（skeleton）複製進你所建立的檔案中。

1.9K star量，解救無聊網友，小姐姐的「動畫師」專案可一鍵生成個人角色

不建議在此檔案組上有新增、移除或是重新命名等修改，PoseAnimator 會依賴這些原始命名路徑從而讀取「skeleton」的初始位置，修改會很容易導致報錯。

接下來，在「skeleton」檔案組旁建立新的檔案組，並將其命名為「illustration」，可以在此檔案組中放置任一插圖的完整路徑。展開所有子檔案組，確認「illustration」中僅包含路徑元素，但目前並不支援複合路徑。其檔案結構圖應該如下圖所示：

    [Layer 1]
    |---- skeleton
    |---- illustration
          |---- path 1
          |---- path 2
          |---- path 3

透過移動節點將「skeleton」組中的示例「skeleton」嵌入至「illustration」中，進而匯出 SVG 檔案。之後開啟 Pose Animator 相機 Demo（上述 Demo 連結），將 SVG 檔案拖放至瀏覽器選項中就能順利實現。詳情可參照 GitHub 專案地址。 

相關文章