<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          無(wú)聊嗎?來(lái)玩玩 GitHub 上這個(gè)開(kāi)源項(xiàng)目

          共 2069字,需瀏覽 5分鐘

           ·

          2021-06-03 13:13


          來(lái)源:機(jī)器之心(almosthuman2014)

          參與:Jamin、蛋醬

          據(jù)說(shuō),無(wú)聊是創(chuàng)造力的源泉。

          大家好,歡迎來(lái)到 Crossin的編程教室 !

          之前有一個(gè)名為「Pose Animator」的項(xiàng)目在網(wǎng)上人氣暴增,打開(kāi)以后,我們發(fā)現(xiàn)這又是一個(gè)能讓人自?shī)首詷?lè),并且絲毫察覺(jué)不到時(shí)間流逝的神奇工具。


          目前這個(gè)項(xiàng)目在 GitHub 上已獲得了 8k 的 Star 量,在推特上也獲得了 3.4k 的點(diǎn)贊。


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


          當(dāng)然,性別也是可以選擇的,在這一欄選擇「boy」就能切換到精神小伙了。


          或許是在家無(wú)聊,一些網(wǎng)友也開(kāi)始了瘋狂的演示(如何換裝本文第二部分有介紹):

          倒不失為一個(gè)放松身心的好方法。

          有人說(shuō),不如把這個(gè)與 v2loopback 結(jié)合一下,用在 Zoom 里,想必那些冗長(zhǎng)的會(huì)議也沒(méi)有那么難熬了……


          項(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)畫(huà)處理。Pose Animator 從計(jì)算機(jī)圖形學(xué)中借鑒了「基于骨骼」的動(dòng)畫(huà)思想,并將其應(yīng)用于矢量字符。


          在此骨骼動(dòng)畫(huà)里,通常展現(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)開(kāi)發(fā)服務(wù)器:

          yarn watch

          值得一提的是,Chrome 以及 IOS Safari 都支持上述 Demos,Android 上的 Chrome 雖然還未測(cè)試過(guò),但項(xiàng)目開(kāi)發(fā)者表示應(yīng)該也同樣支持。

          如何使得自己的設(shè)計(jì)具有動(dòng)畫(huà)效果?

          所需工作并不復(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」,可以在此文件組中放置任一插圖的完整路徑。展開(kāi)所有子文件組,確認(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 文件。之后打開(kāi) Pose Animator 相機(jī) Demo(上述 Demo 鏈接),將 SVG 文件拖放至瀏覽器選項(xiàng)中就能順利實(shí)現(xiàn)。詳情可參照 GitHub 項(xiàng)目地址。

          如果文章對(duì)你有幫助,歡迎轉(zhuǎn)發(fā)/點(diǎn)贊/收藏~


          _往期文章推薦_

          用Python實(shí)現(xiàn)抖音尬舞機(jī)




          如需了解付費(fèi)精品課程教學(xué)答疑服務(wù)
          請(qǐng)?jiān)?strong style="max-width: 100%;overflow-wrap: break-word !important;box-sizing: border-box !important;">Crossin的編程教室內(nèi)回復(fù): 666

          瀏覽 47
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  酒店操美女 | 欧美狂操| 日韩有码一区 | 亚洲色吧色婷婷 | 一级黄理论片 |