如果你需要批量制作SVG動畫，手寫代碼很快會變成噩夢。上一篇文章我介紹了純代碼方案，適合簡單場景；但當(dāng)動畫數(shù)量上來之后，效率問題就暴露無遺。這時候，專業(yè)工具的價值才真正顯現(xiàn)。

　　Friction是我近期發(fā)現(xiàn)的一款開源動效軟件，專門解決這個痛點。它能把復(fù)雜的矢量動畫導(dǎo)出為SMIL格式的SVG文件——這意味著最終成果是一個獨立的圖像文件，不需要依賴任何外部腳本庫。

　　但在動手之前，務(wù)必先做一件事：查文檔。沒什么比辛辛苦苦做完動畫卻發(fā)現(xiàn)導(dǎo)不出目標(biāo)格式更糟心了。Friction目前支持兩種導(dǎo)出選項——動畫SVG或視頻。對于SVG導(dǎo)出，官方明確列出了兼容的動畫類型清單，覆蓋范圍足夠應(yīng)付大多數(shù)動效需求。如果你不確定自己的創(chuàng)意能否實現(xiàn)，建議先去讀動畫技術(shù)章節(jié)，那里詳細說明了軟件的能力邊界。

　　這里有個關(guān)鍵細節(jié)：Friction是動畫工具，不是繪圖工具。開發(fā)者在文檔里反復(fù)強調(diào)這一點。我的習(xí)慣是在Inkscape里畫好矢量素材，再導(dǎo)入Friction做動效。這次沿用了上一篇文章的角色——梨子先生，直接開始實戰(zhàn)演示。

　　新建項目時需要設(shè)定四個參數(shù)：動畫時長、幀率、畫布尺寸、背景色。之后就是經(jīng)典的關(guān)鍵幀 workflow——設(shè)定起始狀態(tài)，移動時間軸，調(diào)整結(jié)束狀態(tài)，軟件自動插值生成中間幀。整個過程不需要寫一行代碼。

　　導(dǎo)出后的SVG文件有個特點：它通過普通的標(biāo)簽就能嵌入頁面，不攜帶任何CSS或JS，也完全不可交互。這是SMIL動畫的默認行為。如果你需要暫停、播放之類的交互控制，必須把SVG代碼直接寫進HTML，然后調(diào)用pauseAnimations()和unpauseAnimations()這兩個原生方法。理論上SVGAnimationElement接口還能操控單個動畫元素，但那樣就破壞了"獨立圖像"的封裝性，需要額外寫JS膠水代碼——這已經(jīng)超出了Friction的設(shè)計范疇。

　　總結(jié)下來，F(xiàn)riction值得關(guān)注的五個理由：第一，完全免費開源；第二，SMIL導(dǎo)出確保零依賴部署；第三，關(guān)鍵幀界面降低學(xué)習(xí)門檻；第四，與Inkscape等矢量工具形成互補 workflow；第五，文檔詳盡，避坑指南齊全。對于需要穩(wěn)定產(chǎn)出SVG動效的設(shè)計師和小團隊，這套組合能省下大量時間成本。