新春佳節，蘋果又給設計師們奉上了新的大禮——全新的 AI 動畫助手！
有了它，隻要一句話，就能讓靜态的圖像 " 運動 " 起來，沒有專業知識也能輕松上手。
利用 ChatGPT，工程師們研發出了這款智能動畫工具 Keyframer，它的界面十分簡潔，初始狀态下隻有圖片和提示詞兩個輸入框。
隻需要用自然語言描述動畫的内容，它就會爲我們搞定動畫代碼并進行實時渲染，平均耗時 17 秒，最長也不過 1 分鍾。
如果對效果不滿意，還可以通過語言描述、圖形界面或直接改代碼等多種方式進行編輯調整。
一名 UI 設計師看到後表示，雖然自己（對 AI）抱有偏見，但這項成果确實太棒了。
那麽，Keyframer 這個工具，都能做些什麽呢？
一鍵生成動畫代碼
首先需要明确的是，Keyframer 添加動畫的對象是 SVG（Scalable Vector Graphics，可縮放矢量圖形）格式的圖稿。
不同于我們常見的 jpg、png 等圖片格式，SVG 是通過人類可讀的代碼來表示圖像當中的元素的。
比如下面這張圖，就是用 SVG 仿制的量子位 logo，它直接以右側的代碼形式存儲，可以直接被浏覽器讀取。
通過給 SVG 代碼中的屬性設定動态變化，就可以實現元素的位移、縮放、旋轉、變色等各式各樣的動畫。
其中，屬性變化既可以通過 SVG 規範設定的内置動畫實現，還可以嵌入到網頁中通過 JS 腳本或 CSS（層疊樣式表）動畫實現，Keyframer 采用的是 CSS 方式。
在 Keyframer 中，用戶需要做的就是上傳靜态的 SVG 圖像，并用自然語言描述動畫的需求。
需要注意的是，SVG 文檔中的元素需要帶有 id 标注，這既是爲了讓大模型能夠知道添加動畫的位置，也是爲 CSS 動畫代碼提供靶點。
點擊綠色的生成、按鈕後，Keyframer 就會調用 GPT，生成動畫代碼并可在頁面中顯示渲染結果。
如果需要對生成的動畫做進一步調整，還可以向其中繼續添加新的 prompt。
當然也可以自己直接上手修改，支持 " 代碼 " 和 " 屬性 " 兩種方式。
代碼模式就是直接對代碼進行改動，如果不懂代碼就可以利用屬性模式，調整動畫中的一些關鍵參數。
據開發者統計，Keyframer 生成一段動畫代碼的平均時間約 17 秒，最快 6 秒即可完成，最長也隻有一分鍾。
生成質量方面，Keyframer 在大多數情況下都能生成高質量的動畫代碼，測試中錯誤率隻有 6.7%。
這樣一來，Keyframer 解決了設計師難以将動畫遷移到 Web 界面的問題，快速的修改方式也大大降低了動畫版本叠代過程的工作量。
在體驗用戶中的調查結果表明，Keyframer 的總體用戶滿意度達到了 3.9 分（滿分 5 分）。
那麽，Keyframer 是如何實現的呢？
提示工程新成果
研發過程中，蘋果的工程師并沒有訓練任何新的模型，而是直接使用了 GPT。
所以，除了用戶界面之外，最關鍵也是最困難的便是提示詞的設計——而除了開發者，用戶也需要思考這個問題。
爲了探究這一問題，讓使用者可以更好地運用 Keyframer，研究團隊邀請了來自不同職業的 13 名測試人員。
這 13 名測試者都有 AI 工具的使用經曆，其中 11 人用過 ChatGPT，7 人用過 DALL · E 或 MidJourney，按照他們平時工作中 " 代碼 " 和 " 設計 " 含量的高低，這 13 名人員被分成了四組。
（表中 Low Code，Low Animation 可簡寫爲 LCLA，以此類推）
這些受試者首先用 15 分鍾的時間了解了關于 SVG 動畫的基礎知識和 Keyframer 的使用方法。
接着，他們又用了 3 分鍾的時間體驗了傳統的 SVG 動畫設計工具，并觀看了 Keyframer 的效果演示。
完成這些鋪墊後，他們被要求用 Keyframer 爲下面兩張圖添加動畫，兩張圖各有 5 分鍾思考和 15 分鍾操作時間。
每完成一張圖的動畫，研究人員都會和他們進行 5 到 10 分鍾的談話，詢問對 Keyframer 是否滿意，以及操作過程中遇到的問題，最後還會談論整體感受。
通過對體驗者的 prompt 特征進行分析，13 人中有 9 人更傾向于分步式的提示風格，另外 4 人則設計了 " 一體式 " 的提示詞。
另外，研究者還發現，用戶對 " 語義 "（Semantic）提示詞的青睐程度高于高特異性（High Specificity）提示詞。
語義提示詞主要通過非技術性的自然語言對動畫進行描述，後者則會直接使用具體的關鍵詞和參數值。
在實驗中，研究團隊收集到的提示詞中，有 84.4% 都是語義性的，特異性提示詞則主要是被 HCLA 組選擇。
這些研究結果雖未直接應用到 Keyframer 當中，但仍不失爲未來用戶的一項重要參考。
目前，Keyframer 的 DEMO 尚未發布，感興趣的朋友可以持續關注一下 ~
論文地址：
https://arxiv.org/abs/2402.06071
— 完 —
點這裏關注我，記得标星哦～
一鍵三連「分享」、「點贊」和「在看」
科技前沿進展日日相見 ~
