前端程序員如何轉投SVG領域？（ 計育韜老師高校公益巡講答疑實錄2024）
這是計育韜老師第 8 次開展面向全國高校的新媒體技術公益巡講活動了。而在每場講座尾聲，互動答疑環節往往反映了高校師生當前最普遍的運營困境，特此計老師在現場即興答疑之外，會盡量選擇有較高價值的提問進行文字答疑梳理。
*本輪巡講主題除了涉及 SVG 交互外，還包含了新媒體中 AI 人工智能工作流的詳解，為高校師生帶來包括與多家央媒的項目合作經驗和復旦大學本校的案例分析，因此答疑梳理中也會出現與 AI 相關的知識點，如有任何偏頗之處也歡迎在評論區斧正。
第六期計育韜老師繼續梳理了在江西高校的講座中，關于「有前端經驗的程序員如何轉投SVG領域？」的問題，一起來看看計育韜老師的答復吧！
歸零學習
由于 2016 年計育韜和林喆老師在制定《SVG AttributeName 白名單》時，已經剔除了部分原 W3C 中的高性能動畫類型，且在微信和微博生態中不支持以 JavScript 對 SVG 進行驅動和管理，因此 SVG 交互設計的代碼體系與當下前端開發領域的知識圖譜差異巨大。
加之微信生態中對<id>禁用，因此它的動畫組合的邏輯都完全超乎常規動畫設計思維。綜上，歸零學習（unlearn）對從前端轉投入該領域的人來說變得至關重要。
當然，前端經驗有助于開發者對結構框架（父子關系）的高效識別，但 SVG 畢竟隸屬于 XML 時代下的 CSS 渲染表現，而非前端開發者爛熟于胸的 CSS-3 體系，所以計育韜老師認為只有敢于突破定式思維，從一個基本圖形運動開始歸零學習才能逐步掌握它的技術體系。
關于當下技術白名單的情況，可以參考：
舉個例子
提到編組動畫邏輯，計育韜老師在現場拿起了兩瓶礦泉水舉例：
“設想現在，我們計劃通過點擊某個按鈕，讓兩瓶礦泉水彼此按相同距離分離。”按照常規的前端開發思路，必定是為兩個瓶子標記兩個<id>，隨后通過 button.click 事件引發它們各自的平移。
但在微信公眾號的 SVG 交互設計體系中，上述思路是行不通的。那么結合<g>編組，我們應當把按鈕熱區放在最內層，并綁定第一個瓶子。隨后再進行一次編組，綁定外層第二個瓶子。
接下來，當我們點擊按鈕時，對外層結構賦予一個 (N,0) 的位移量，使得整個編組（也就是兩個瓶子一起）以 N 量進行平移動。隨后對內部賦予一個（-2N,0）的位移量，使得內部瓶子以兩倍 N 量反向進行平移，這樣才在視覺上形成最初的需求：通過點擊某個按鈕，讓兩瓶礦泉水彼此按相同距離分離。
關于上述案例特性，在 SVG 編輯器內常有應用。同學們可以點擊閱讀《黑科技編輯器 | 開門特效教程》等包含「開門」特性的組件 DEMO，檢查代碼結構加深理解認知。
計育韜老師的這個舉例生動反映了編組動畫的獨特魅力，它的本質是數學邏輯的應用。拓展到更復雜的綜合動畫、多叉樹等無不基于這種思維的聯想發散。
后續答疑預告
#目前使用國內 AIGC 工具會否存在版權爭議？
#AIGC 創作過程中提示詞 Prompt 有什么建議？
#配音方面目前可以用 AIGC 替代嗎？
#在國內文案寫作有哪些合適的 AIGC 工具？
#您如何看待AIGC中的美術版權爭議問題？
#H5和SVG的最大區別和各自優勢是什么？
#如果要基于交互設計創意應該做哪些準備？
#可以運用AI寫SVG代碼嗎？
如有意向報名承辦巡講的高校站點，歡迎查看「報名須知」并在評論區留下你的聯系方式和組織信息，助教老師將協助前期對接工作。
-END-
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）