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