如果你之前用過 Synfig或者一直在關(guān)注開源 2D 動畫工具的進(jìn)展那么對 Friction 這個名字應(yīng)該不會太陌生。Friction 脫胎于經(jīng)典的矢量動畫工具 Synfig 項目目標(biāo)是重新梳理代碼結(jié)構(gòu)、提升交互流暢度同時保留矢量補(bǔ)間、骨骼動畫等老牌能力。最近它在圖層組織和角色動畫兩個方向上都加入了值得關(guān)注的變化一個是骨骼系統(tǒng)另一個是自由層級拖動。本文會圍繞這兩個功能展開從基礎(chǔ)概念講到具體的搭建流程再結(jié)合一個簡單的手臂擺動動畫案例把骨骼綁定、層級調(diào)整和關(guān)鍵幀動畫串起來演示一遍。如果你正在學(xué)習(xí) 2D 動畫制作或者打算在角色動畫工作流中使用 Friction這篇文章可以作為一份起步參考。1. Friction 新增骨骼系統(tǒng)與自由層級拖動背景與核心概念1.1 Friction 是什么為什么值得關(guān)注Friction 是一款基于圖層結(jié)構(gòu)的 2D 動畫制作軟件屬于開源社區(qū)里比較典型的“節(jié)點/圖層樹 時間軸關(guān)鍵幀”工作流。它和主流的逐幀繪制工具不太一樣核心優(yōu)勢在于“矢量圖形 補(bǔ)間動畫”畫面由可編輯的矢量圖層構(gòu)成不改分辨率也能自由縮放。動畫依靠關(guān)鍵幀和中間的插值自動生成不需要一幀一幀手工畫。圖層樹結(jié)構(gòu)清晰每個圖層可以有自己的父子關(guān)系、混合方式和變換屬性。對于需要制作角色動畫、MG 動畫、循環(huán)動畫的創(chuàng)作者來說Friction 最吸引人的地方是它保留了 Synfig 時代的骨骼概念又通過代碼重構(gòu)讓軟件在交互上更符合現(xiàn)代使用習(xí)慣。你可以把它理解成“一個更現(xiàn)代、更好上手的 Synfig 分支”。1.2 骨骼系統(tǒng)解決的核心問題在手繪動畫中想讓一個角色的手臂自然擺動最常見的方式是一幀一幀畫。這樣做效果精細(xì)但效率很低而且一旦調(diào)整角色比例相關(guān)幀都要重畫。如果是純圖層動畫也可以手動給手臂圖層打關(guān)鍵幀但問題在于做關(guān)節(jié)彎曲時單靠平移和旋轉(zhuǎn)很難讓上下兩段肢體自然地“連在一起”。骨骼系統(tǒng)的做法相當(dāng)于給角色搭了一套“看不見的內(nèi)部骨架”把畫面中的圖形圖層綁定到骨骼上。移動骨骼時對應(yīng)圖形會跟隨移動。旋轉(zhuǎn)骨骼時圖形會圍繞骨骼關(guān)節(jié)旋轉(zhuǎn)。多個骨骼可以共同影響一個區(qū)域從而實現(xiàn)平滑的關(guān)節(jié)彎曲。這樣一來你只需要調(diào)整骨骼的姿態(tài)圖形就會跟著變化。動畫師的工作對象從“每個圖層”變成了“每個骨骼”效率和可控性都會明顯提升。1.3 自由層級拖動是什么和傳統(tǒng)圖層管理有什么不同在 Friction 這樣的軟件里圖層面板不只是顯示順序它同時決定了渲染順序上面的圖層會覆蓋下面的圖層。父子關(guān)系子圖層會跟隨父圖層運動?？刂品秶趋馈V鏡、變換效果通常作用于整個子樹。傳統(tǒng)做法里如果你要調(diào)整一個圖層的層級位置往往需要通過右鍵菜單、快捷鍵或者“發(fā)送到最上層/最底層”之類的方式完成。步驟多而且跨組移動更麻煩。Friction 新增的自由層級拖動則直接改變了這個交互在圖層窗口中按住圖層拖拽到目標(biāo)位置就能改變堆疊順序。把圖層拖到另一個圖層之下能快速建立父子關(guān)系。支持跨容器拖拽可以從一個組內(nèi)拖到另一個組內(nèi)。多選圖層后也能批量拖動方便重構(gòu)圖層樹。這個能力最直接的價值是做角色動畫之前你可以先快速用圖形把角色畫出來然后通過自由層級拖動把它們整理成清晰的層級結(jié)構(gòu)再進(jìn)入骨骼綁定環(huán)節(jié)。它降低了“整理圖層”這個前期步驟的成本也讓后期調(diào)整層級不再那么痛苦。2. 環(huán)境準(zhǔn)備安裝與版本說明2.1 支持的平臺與獲取方式Friction 是跨平臺軟件常見安裝環(huán)境包括WindowsmacOSLinux獲取方式有兩種一種是從項目官網(wǎng)或 GitHub Releases 頁面下載最新穩(wěn)定版安裝包另一種是在 Linux 下通過包管理器安裝社區(qū)構(gòu)建版本。這里有一個通用建議正式做項目時優(yōu)先選擇當(dāng)前最新穩(wěn)定版不要使用 nightly 或帶 alpha 標(biāo)記的測試版避免骨骼系統(tǒng)、層級拖拽這類新功能在高頻操作中遇到不穩(wěn)定問題。2.2 版本差異提醒由于不同系統(tǒng)、不同發(fā)版周期下的界面細(xì)節(jié)可能略有差異本文演示時以常見默認(rèn)界面為參考。你在實際操作時如果發(fā)現(xiàn)菜單名稱、圖標(biāo)位置不完全一樣不要緊張這說明你用的版本界面有過調(diào)整。只要核心概念一致操作思路完全可以復(fù)用。我的建議是先安裝軟件并開啟默認(rèn)配置然后對照下面的順序完成準(zhǔn)備啟動 Friction確認(rèn)畫布區(qū)域正常顯示。打開圖層窗口通常位于右側(cè)或左側(cè)面板。打開時間軸面板通常位于畫布下方。確認(rèn)工具面板中有“選擇工具”“骨骼工具”“鋼筆工具”等基礎(chǔ)工具。2.3 示例項目結(jié)構(gòu)規(guī)劃為了不讓后面綁定骨骼時手忙腳亂我們先規(guī)劃好示例項目的結(jié)構(gòu)。本文后面的實戰(zhàn)環(huán)節(jié)會制作一個簡單的手臂動畫圖層樹的預(yù)期結(jié)構(gòu)如下Arm_Scene └── arm_root 圖層分組整個手臂的根節(jié)點 ├── upper_arm 上臂圖形 ├── forearm 前臂圖形 └── hand 手掌圖形 └── Skeleton01 骨架層包含 Bone01、Bone02這個規(guī)劃看起來簡單但在 Friction 中做起來非常順手尤其是當(dāng)你先畫出圖形再通過自由層級拖動把它們歸入arm_root分組時那種“先自由創(chuàng)作、再整理結(jié)構(gòu)”的體驗比舊版圖層管理舒服很多。3. 骨骼系統(tǒng)核心原理與基礎(chǔ)操作3.1 骨骼系統(tǒng)的組成與對應(yīng)關(guān)系在進(jìn)入操作之前先搞清楚骨骼系統(tǒng)的三個核心概念。第一層骨架層Skeleton Layer這是一個容器圖層內(nèi)部包含多根骨骼。每個角色組件可以單獨建一個骨架層也可以多個組件共用同一個骨架層。通常建議“一個運動單元一個骨架層”。第二層骨骼Bone每根骨骼本身并不是可見圖形而是一個帶有原點、角度和長度的矢量對象。它定義了一個“局部坐標(biāo)系”。圖形跟隨骨骼運動本質(zhì)上就是跟隨這個局部坐標(biāo)系的變化。第三層綁定與權(quán)重Binding and Weights綁定就是把某個圖層“掛”到某根骨骼下面。綁定之后骨骼運動時圖層會跟著動。權(quán)重則用來控制“跟多少”。權(quán)重越高影響越大當(dāng)兩根骨骼對同一個圖層都有權(quán)重時圖層會表現(xiàn)出柔性的過渡這是做關(guān)節(jié)彎曲的關(guān)鍵。把這三層關(guān)系放在一起就得到了一個很清晰的邏輯骨架層Skeleton Layer └── 骨骼節(jié)點Bone └── 綁定圖層Binding Layer └── 權(quán)重Weight3.2 創(chuàng)建第一根骨骼步驟詳解Friction 中新建骨骼的常見流程如下在圖層窗口中確認(rèn)選中當(dāng)前場景的根節(jié)點。右鍵選擇“新建圖層”在子菜單中找到骨架層Skeleton Layer。新建成功后圖層面板中會出現(xiàn)一個Skeleton圖層。切換到“骨骼工具”在畫布上按住左鍵拖動拉出一根骨骼。檢查骨骼骨骼通常顯示為一條帶方向的線起點是父關(guān)節(jié)末端是子關(guān)節(jié)。操作完成后圖層面板中的骨架層下應(yīng)該能看到對應(yīng)骨骼節(jié)點。如果你看不到骨骼可以檢查是否選中了骨架層或者骨骼工具是否處于激活狀態(tài)。創(chuàng)建第二根子骨骼時繼續(xù)使用骨骼工具從第一根骨骼的末端開始再次拖動軟件會自動把第二根骨骼設(shè)為第一根骨骼的子級。通過這種方式可以快速創(chuàng)建“上臂 → 前臂 → 手掌”這種關(guān)節(jié)鏈條。3.3 綁定圖層讓圖形跟隨骨骼運動骨骼創(chuàng)建完成不代表圖形會自動跟它走你還需要做綁定。綁定操作的核心是讓“圖形圖層”和“骨骼節(jié)點”建立關(guān)聯(lián)。在 Friction 中常用的綁定方式有兩種方式一基于父子關(guān)系綁定把圖形圖層拖放到骨骼節(jié)點下方使它成為骨骼的子圖層。這種方式最直觀適合綁定比較獨立的組件例如頭部、手掌等。方式二基于權(quán)重綁定在圖層的綁定參數(shù)中指定受哪些骨骼影響以及每個骨骼的影響權(quán)重。這種方式適合需要平滑變形的區(qū)域例如肘部、膝蓋、肩部。為了演示清楚下面是一個綁定動作的最小示例1. 選中 upper_arm 圖層。 2. 打開該圖層的綁定屬性面板。 3. 點擊“添加骨骼關(guān)聯(lián)”選擇 Bone01。 4. 設(shè)置權(quán)重為 1.0表示完全受 Bone01 影響。 5. 拖動 Bone01驗證 upper_arm 是否跟隨。你可能會問為什么不讓骨骼直接作為圖層父級因為直接做父子關(guān)系只能實現(xiàn)“完全跟隨”無法實現(xiàn)“部分跟隨”和“平滑過渡”。而權(quán)重綁定可以做到一根骨骼移動時相鄰區(qū)域的圖形按比例受到多根骨骼影響關(guān)節(jié)處會像真實皮膚一樣有過渡形變。3.4 骨骼的父子層級與姿態(tài)調(diào)整與圖層的父子關(guān)系類似骨骼本身也可以形成父子鏈條。父骨骼旋轉(zhuǎn)時子骨骼會繼承父骨骼的運動從而形成類似身體骨架的聯(lián)動效果。舉個例子做一個手臂鏈條骨骼1肩關(guān)節(jié) → 肘關(guān)節(jié)骨骼2肘關(guān)節(jié) → 腕關(guān)節(jié)骨骼3腕關(guān)節(jié) → 指尖當(dāng)骨骼1旋轉(zhuǎn)時整條手臂跟著動當(dāng)骨骼2旋轉(zhuǎn)時前臂和手掌發(fā)生彎曲當(dāng)骨骼3旋轉(zhuǎn)時只有手掌發(fā)生轉(zhuǎn)動。這種“局部改動自動帶動子級”的能力就是骨骼動畫的核心優(yōu)勢。在 Friction 中調(diào)整姿態(tài)時建議遵循一個原則先調(diào)整父級骨骼再調(diào)整子級骨骼。如果先旋轉(zhuǎn)了手掌再旋轉(zhuǎn)上臂往往需要在后期重新調(diào)整局部姿態(tài)反而增加工作量。4. 自由層級拖動新功能詳解4.1 為什么“自由層級拖動”如此重要圖層動畫軟件中最容易陷入的問題就是圖層結(jié)構(gòu)越來越亂。新手做角色動畫時常常一開始就創(chuàng)建很多圖層既不分組也不命名等做到一半想加骨骼或調(diào)整動畫時才發(fā)現(xiàn)圖層堆疊關(guān)系完全失控。在 Friction 中引入自由層級拖動之后整理圖層變成了一件非?！绊樖帧钡氖虑椴恍枰蜷_菜單一層層找命令。直接在圖層窗口中拖拽即可。拖動時有明確的視覺反饋可以看到目標(biāo)插入位置。支持把圖層從某個分組中拖出來再放入另一個分組。這看起來只是一個交互優(yōu)化但實際體驗提升非常大。尤其在做角色動畫時前期可以把所有零件平鋪繪制然后再通過拖拽組裝成完整的層級結(jié)構(gòu)。4.2 基礎(chǔ)拖拽操作與視覺反饋自由層級拖動的核心操作非常簡單但有幾個關(guān)鍵細(xì)節(jié)值得留意。調(diào)整堆疊順序選中圖層后按住左鍵并上下拖動當(dāng)目標(biāo)位置出現(xiàn)高亮橫線時松開鼠標(biāo)圖層就會被移動到新位置。這個操作直接改變渲染順序也就是誰在上誰在下。建立父子關(guān)系當(dāng)你把圖層拖到某個目標(biāo)圖層上并出現(xiàn)縮進(jìn)高亮?xí)r松開鼠標(biāo)被拖動的圖層會成為目標(biāo)圖層的子圖層。從此以后父圖層的移動、旋轉(zhuǎn)、縮放都會影響子圖層。從子級變回平級如果要把一個子圖層拖出來變成父圖層的兄弟只需要把它拖到父圖層之后的位置并且不要出現(xiàn)縮進(jìn)提示松開鼠標(biāo)即可。下面用一個簡單的示例說明圖層的結(jié)構(gòu)變化拖拽前 arm_root ├── upper_arm └── forearm 把 forearm 拖到 arm_root 外面 arm_root └── upper_arm forearm這種操作對后面的骨骼綁定非常友好。你可以先畫好圖形再根據(jù)“哪個部位應(yīng)該跟哪個骨骼走”來重新組織父子關(guān)系不必一上來就嚴(yán)格規(guī)劃。4.3 跨容器拖動與批量調(diào)整實際項目中圖層數(shù)量可能很多一個角色經(jīng)常包含幾十個圖層。這種情況下單獨拖動一個圖層不夠高效Friction 的自由層級拖動還支持兩種更高效的模式?？缛萜魍蟿釉试S直接把一個圖層從一個分組拖到另一個分組。比如角色身體下有一堆配件你想把其中一個配件移到另一個分組直接拖拽即可不需要先剪切再粘貼。多選批量拖動按住 Shift 或 Ctrl 鍵可以同時選中多個圖層然后整體拖到新位置。這對“把多個零件同時歸入同一個分組”非常有用。批量操作時的建議順序先用命名規(guī)則過濾出同類圖層。批量選中它們。一次性拖放到目標(biāo)分組。拖放完成后檢查整體渲染順序是否符合預(yù)期。4.4 與骨骼系統(tǒng)配合使用的場景自由層級拖動不只是整理圖層那么簡單它和骨骼系統(tǒng)結(jié)合后能顯著提高角色動畫的制作效率。典型場景你想創(chuàng)建一個帶手臂、腿、頭部、身體的角色但在繪制階段所有圖形都是獨立平鋪在畫布上的。傳統(tǒng)做法是創(chuàng)建圖層時就要規(guī)劃好分組否則后續(xù)綁定會很痛苦?，F(xiàn)在可以這樣做先平鋪繪制所有身體部位。使用自由層級拖動把頭部、身體、手臂、腿部各自歸組。為每個部位創(chuàng)建骨骼層。最后把每個部位的分組綁定到對應(yīng)骨骼。這樣流程更符合創(chuàng)作習(xí)慣先自由畫再結(jié)構(gòu)化最后做控制。5. 實戰(zhàn)用骨骼系統(tǒng)制作手臂擺動動畫為了讓前面的概念落地這一章做一個完整的“手臂擺動”骨骼動畫案例。整個流程盡量簡化但會保留真實的操作步驟和關(guān)鍵屬性設(shè)置方便你在 Friction 中跟著做。5.1 目標(biāo)與前置準(zhǔn)備本次實戰(zhàn)要實現(xiàn)的效果上臂保持相對固定或輕微擺動。前臂在肘關(guān)節(jié)處彎曲。手掌跟隨前臂運動。骨骼帶動圖形自然變化。前置準(zhǔn)備已安裝最新版本 Friction。新建一個場景幀率設(shè)置為 24fps也可以是 30fps取決于你的項目需求。準(zhǔn)備好工具欄中的矩形、圓形、選擇、骨骼等工具。5.2 創(chuàng)建手臂圖形組件在 Friction 的畫布中先用基礎(chǔ)圖形畫三個部分上臂一個矩形代表從肩膀到肘部的部分。前臂一個矩形代表從肘部到手腕的部分。手掌一個圓形或矩形代表手部。為了讓后面動畫更自然把三段圖形擺放成一個伸直的手臂形態(tài)并讓它們的連接處稍微重合。這一步很關(guān)鍵因為骨骼帶動關(guān)節(jié)彎曲時兩段圖形之間需要一定的重疊區(qū)域才能平滑過渡避免出現(xiàn)“斷開”的觀感。圖形創(chuàng)建完成后在圖層面板中給它們重命名upper_arm forearm hand然后使用自由層級拖動把這三個圖層全部拖入同一個分組arm_root中形成如下結(jié)構(gòu)arm_root ├── upper_arm ├── forearm └── hand結(jié)構(gòu)整理好后保存一次項目文件避免后續(xù)誤操作丟失數(shù)據(jù)。5.3 創(chuàng)建并擺放骨骼接下來創(chuàng)建骨骼系統(tǒng)。在圖層窗口中選中場景根節(jié)點。新建一個骨架層命名為Skeleton01。切換到骨骼工具。在畫布上從“肩部”位置開始拖動拉出第一根骨骼 Bone01末端放到“肘部”位置。從 Bone01 末端繼續(xù)拖動創(chuàng)建第二根骨骼 Bone02末端放到“手腕”位置。此時骨骼結(jié)構(gòu)應(yīng)該類似于Skeleton01 ├── Bone01 └── Bone02如果骨骼的位置和圖形沒有對齊可以在圖層面板中選中骨骼再使用選擇工具調(diào)整骨骼的位置和旋轉(zhuǎn)直到骨骼走向與手臂圖形基本吻合。注意調(diào)整骨骼時重點關(guān)注起點和終點的關(guān)節(jié)位置而不是骨骼中間位置。5.4 將圖形綁定到骨骼綁定是整個流程中比較重要的一步直接決定了動畫結(jié)果是否正確。操作思路如下將upper_arm綁定到Bone01權(quán)重設(shè)置為 1.0。將forearm綁定到Bone02權(quán)重設(shè)置為 1.0。將hand綁定到Bone02權(quán)重設(shè)置為 1.0。如果你希望肘部彎曲更平滑可以給forearm疊加一個 Bone01 的弱權(quán)重比如 0.2 或 0.3。但這種弱權(quán)重設(shè)置對新手來說容易產(chǎn)生意外變形初學(xué)階段建議先用完全綁定做通一個案例后再嘗試權(quán)重過渡。綁定檢查方法選中 Bone02 并旋轉(zhuǎn)觀察forearm和hand是否一起圍繞肘關(guān)節(jié)轉(zhuǎn)動。如果只有forearm動而hand不動說明hand的綁定遺漏或綁定目標(biāo)錯誤。5.5 制作關(guān)鍵幀動畫綁定完成后開始打關(guān)鍵幀做動畫。時間軸的操作邏輯和其他動畫軟件類似在第 0 幀處記錄骨骼初始姿態(tài)。在第 24 幀處旋轉(zhuǎn) Bone02讓前臂彎曲約 90 度手掌也隨之?dāng)[動。在第 48 幀處把 Bone02 旋轉(zhuǎn)回初始角度形成一個往復(fù)擺動。具體操作時在第 0 幀選中骨骼點擊時間軸上的“關(guān)鍵幀”按鈕讓骨骼當(dāng)前屬性記錄為關(guān)鍵幀隨后跳轉(zhuǎn)到第 24 幀調(diào)整 Bone02 的旋轉(zhuǎn)屬性再記錄第二幀最后跳轉(zhuǎn)到第 48 幀恢復(fù)初始旋轉(zhuǎn)角度并再次記錄。完成后播放動畫應(yīng)該會看到手臂從伸直狀態(tài)彎曲再回到伸直狀態(tài)的循環(huán)效果。如果動畫速度太快或太慢可以通過調(diào)整關(guān)鍵幀之間的幀數(shù)來控制。5.6 導(dǎo)出預(yù)覽與常見結(jié)果說明動畫預(yù)覽滿意后可以導(dǎo)出視頻或序列幀。Friction 的導(dǎo)出流程通常如下打開“渲染”或“導(dǎo)出”面板。選擇輸出范圍一般選擇“整個時間軸”。設(shè)置輸出格式如果只是預(yù)覽選擇常見視頻格式如果需要后期合成建議選擇 PNG 序列并保留透明通道。設(shè)置分辨率與幀率點擊導(dǎo)出。導(dǎo)出后的預(yù)期效果前 24 幀手臂從伸直彎曲到接近 90 度。第 24 到 48 幀手臂從彎曲狀態(tài)恢復(fù)伸直。整個動畫中圖形不會出現(xiàn)明顯斷裂或跳躍。如果你在導(dǎo)出后發(fā)現(xiàn)圖形斷裂大概率是圖形之間的重疊區(qū)域不足或者權(quán)重分配過于極端?；氐降?5.2 步和 5.4 步調(diào)整重疊區(qū)域和權(quán)重即可。6. 常見問題與排查思路骨骼系統(tǒng)和自由層級拖動都比較新操作過程中難免遇到一些奇怪現(xiàn)象。這里整理了一份常見問題排查表并按“現(xiàn)象、原因、思路、避免方法”拆開說明。問題現(xiàn)象常見原因解決思路骨骼拖動時圖層不動圖形圖層沒有綁定到骨骼檢查圖層綁定屬性重新建立骨骼關(guān)聯(lián)圖層跟隨骨骼但動作異常跳躍關(guān)鍵幀沒有記錄完整骨骼狀態(tài)重新在首尾關(guān)鍵幀記錄所有相關(guān)屬性拖拽圖層后渲染順序發(fā)生變化圖層層級變化導(dǎo)致 Z-order 變化拖拽后立即檢查圖層面板中的順序關(guān)節(jié)處圖形斷裂圖形重疊不足或權(quán)重分配不合適增加關(guān)節(jié)處圖形重疊區(qū)域調(diào)整權(quán)重導(dǎo)出視頻黑屏或透明輸出格式不支持透明背景使用 PNG 序列導(dǎo)出或調(diào)整視頻編碼設(shè)置骨骼層級太深導(dǎo)致局部控制困難骨骼父子鏈條設(shè)計不合理盡量保持 2 到 3 層級別的骨骼樹6.1 骨骼拖動時圖層不動這個現(xiàn)象最常出現(xiàn)在剛完成骨骼創(chuàng)建之后。原因是骨骼和圖形之間還沒有建立綁定關(guān)系或者綁定關(guān)系被誤刪。排查步驟選中圖形圖層打開綁定屬性面板確認(rèn)骨骼是否出現(xiàn)在關(guān)聯(lián)列表中。如果關(guān)聯(lián)列表為空重新添加骨骼關(guān)聯(lián)。確認(rèn)權(quán)重不為 0權(quán)重為 0 時骨骼不會對圖形產(chǎn)生任何影響。確認(rèn)圖形層級不在骨架層上方且未鎖定。6.2 圖層跟隨骨骼但動作異常跳躍如果你第一次旋轉(zhuǎn)骨骼時圖形飛到了很遠(yuǎn)的地方很可能是骨骼原點與圖形中心點不重合或者關(guān)鍵幀之間存在未被記錄的屬性變化。建議這樣處理先回到第 0 幀把圖形和骨骼對齊到初始姿態(tài)。記錄完整關(guān)鍵幀不要只記錄旋轉(zhuǎn)屬性必要時把位置、縮放一起記錄。后續(xù)每個關(guān)鍵幀都在骨骼原始父級坐標(biāo)系下調(diào)整避免局部坐標(biāo)和世界坐標(biāo)混用。6.3 拖拽圖層后渲染順序發(fā)生變化自由層級拖動的本質(zhì)是改變圖層樹的父子關(guān)系和排序因此排序變化會直接影響渲染順序。比如原本應(yīng)該被遮擋的背景圖層拖到上層后就會遮擋角色。避免方法在拖拽之前留意目標(biāo)位置的高亮指示。如果只是想做父子關(guān)系而不想改變遮擋順序盡量把圖層拖到目標(biāo)層之下位置并保留橫向縮進(jìn)即可。6.4 關(guān)節(jié)處圖形斷裂斷裂問題通常和兩個因素有關(guān)圖形本身沒有重疊區(qū)關(guān)節(jié)彎曲后兩段圖形之間會露出空隙。權(quán)重分配不合理圖形完全被一根骨骼控制彎曲時邊緣產(chǎn)生硬切。解決思路也比較直觀把上臂末端和前臂起始處做成有一定重合的圖形區(qū)域然后在關(guān)節(jié)彎曲時讓重合區(qū)域同時接收兩根骨骼的權(quán)重。對于新手可以先加重疊區(qū)不調(diào)權(quán)重熟悉之后再嘗試 0.5/0.5 的柔化權(quán)重。7. 最佳實踐與工程建議7.1 建模階段就規(guī)劃骨骼拓?fù)浜芏嘈率衷诋嫿巧珪r習(xí)慣隨手畫等到角色完成后再想骨骼應(yīng)該怎么加結(jié)果發(fā)現(xiàn)很多圖形相互穿插沒法很好地綁定。更穩(wěn)妥的做法是畫角色之前先在紙上或腦內(nèi)規(guī)劃出骨架拓?fù)?。例如一個人形角色至少有這些骨骼鏈條骨架根 ├── 脊柱鏈 ├── 左臂鏈肩 → 肘 → 腕 ├── 右臂鏈肩 → 肘 → 腕 ├── 左腿鏈髖 → 膝 → 踝 └── 右腿鏈髖 → 膝 → 踝規(guī)劃時明確哪些部位會大幅彎曲哪些部位只是跟隨移動。大幅彎曲的部位比如肘部、膝蓋圖形一定要預(yù)留重疊區(qū)只是跟隨移動的部位可以直接做父子綁定。7.2 命名規(guī)范無論是一個人做項目還是團(tuán)隊協(xié)作命名規(guī)范都很重要。Friction 的圖層樹一旦復(fù)雜起來如果名字都是Layer 001、Layer 002查找和綁定都會非常痛苦。建議采用“部位 左右 功能”的命名方式arm_L_upper 左臂上段 arm_L_forearm 左臂前段 arm_L_hand 左手 leg_R_thigh 右大腿 leg_R_calf 右小腿骨骼命名盡量和圖層命名對齊比如Bone_arm_L、Bone_leg_R這樣在綁定權(quán)重時快速對應(yīng)排查問題也更快。7.3 圖層與骨骼的編號順序創(chuàng)建圖層和骨骼時不要雜亂無章地新建。建議按“從內(nèi)到外、從父到子”的順序創(chuàng)建先創(chuàng)建基礎(chǔ)身體圖層。再創(chuàng)建身體各部位分組。然后創(chuàng)建骨架層。最后創(chuàng)建骨骼并綁定。這樣的順序能減少來回拖拽層級的工作量也更容易保證圖層樹結(jié)構(gòu)清晰。7.4 關(guān)鍵幀策略先姿勢后補(bǔ)間使用骨骼系統(tǒng)做動畫關(guān)鍵在于打關(guān)鍵幀的節(jié)奏。建議采用“先姿勢后補(bǔ)間”的方法先在第 0 幀設(shè)置好起始姿勢。跳到需要轉(zhuǎn)折的關(guān)鍵幀調(diào)整骨骼形成關(guān)鍵姿態(tài)。再跳到下一個關(guān)鍵幀調(diào)整下一個姿態(tài)。最后回到時間軸檢查自動生成的補(bǔ)間是否滿足要求。不要一開始就逐幀調(diào)骨骼那樣既慢又容易失控。骨骼動畫的優(yōu)勢之一就是可以通過少量關(guān)鍵幀自動生成中間過渡充分利用這個優(yōu)勢才能真正提高效率。7.5 重用與備份如果你做了很多角色或組件可以考慮把常用的骨架和圖層結(jié)構(gòu)保存為模板。下次做新角色時直接導(dǎo)入模板再修改圖形形狀、重新綁定圖層即可。同時骨骼綁定和層級調(diào)整都屬于結(jié)構(gòu)性操作Friction 項目文件應(yīng)定期備份。建議在以下時間點保存?zhèn)溆冒姹就瓿山巧珗D形繪制后。完成骨骼創(chuàng)建后。完成第一遍綁定后。完成第一版動畫后。備份的目的是當(dāng)后續(xù)修改導(dǎo)致文件不可恢復(fù)時能夠回到關(guān)鍵節(jié)點重新來過。8. 總結(jié)與延伸學(xué)習(xí)方向這篇文章圍繞 Friction 的兩個新增能力做了展開骨骼系統(tǒng)讓角色動畫從“手動調(diào)整每個圖層”升級為“控制骨骼驅(qū)動圖形”自由層級拖動則讓圖層樹整理變得更直觀、更高效。二者結(jié)合后制作 2D 角色動畫的流程可以簡化成“先畫圖 → 再整理層級 → 建骨骼 → 綁定權(quán)重 → 打關(guān)鍵幀”中間操作成本明顯降低。對于第一次接觸 Friction 的讀者我建議你先不要急著做完整角色?？梢韵葎?chuàng)建幾個簡單矩形按本文的流程練習(xí)建骨骼、綁圖層、旋轉(zhuǎn)骨骼、觀察圖形變化再用自由層級拖動調(diào)整圖層父子關(guān)系。等基礎(chǔ)操作熟練后再嘗試做完整的角色骨骼系統(tǒng)這時候你會發(fā)現(xiàn)很多問題已經(jīng)在前期練習(xí)中提前踩過一遍了。如果你想繼續(xù)深入學(xué)習(xí)可以按下面幾個方向推進(jìn)學(xué)習(xí)權(quán)重繪制與柔化邊界理解多骨骼同時影響一個圖層的原理。練習(xí)反向運動學(xué)IK讓手腳的擺放更符合真實關(guān)節(jié)運動。研究時間軸曲線編輯器掌握緩動節(jié)奏的控制方法。嘗試把骨骼動畫與 Friction 的粒子、濾鏡等功能結(jié)合制作更復(fù)雜的 MG 動畫。在真正開始綁定角色之前先用兩組小方塊演練骨骼的父子關(guān)系和層級拖拽這會比直接做完整角色少踩很多坑。希望這篇教程對你上手 Friction 的新功能有所幫助。