竊取遊戲動畫技術以吸引用戶

現代網站在動畫中陷入困境 - 通常太多了。他們可能會使內容混亂並挫敗用戶。然而，動畫具有不可否認的魅力；他們將生活呼吸到網站，創建很有趣，並且會給人留下深刻的印象。這個問題不一定是數量，而是動畫與網站內容的相關性。綜合動畫不良的感覺被迫，沒有增加價值。

本文針對的是Web開發人員，旨在合併複雜的動畫而無需疏遠用戶。我將分享我用來創建引人入勝的動畫的技術，同時最大程度地減少用戶挫敗感。您可能會認為“不煩人的用戶”是一個低標準，而且...您是對的。

我的方法有些非常規。作為獨立遊戲出版商Devolver Digital（與Vieko合作）的網絡開發人員，我參與了開發和設計。最初，我在設計方面掙扎。草圖很少轉化為Photoshop實現，導致無數重新啟動。試圖繞過設計並直接跳入代碼，依靠動畫來補償，這同樣不成功。我的設計技巧缺乏。

然後，我發現了一個捷徑。

在介紹網站概念時，我的同事和客戶對我的設計技能（並發送餅乾 - 我吃了，對不起！）。我的秘密？

我從視頻遊戲中藉來了。

我模仿遊戲顏色，按鈕，模態框，核心概念，甚至是遊戲機制。我玩遊戲（他們很有趣！），捕獲屏幕截圖和鏡頭，然後……我適應了元素。最重要的是，我適應動畫。

儘管視頻遊戲提供了豐富的靈感來源，但可以在各個行業中應用這種方法。對我來說，調整遊戲動畫釋放了每個網站的全部潛力。

靈感的金礦

Devolver Digital擁有一個多元化的遊戲庫：鎮定的敘事體驗以及動感十足的標題；視覺上簡單的遊戲具有隱藏的深度，以及像Shadow Warrior 3這樣的遊戲。每個遊戲都獨特地吸引玩家，創造令人難忘的體驗。我們旨在在我們的網站上複製這種參與，並利用Web技術在用戶甚至觸摸控制器之前建立連接。我們本質上是“借用”資產，動畫和機械師，為用戶提供遊戲玩法的品味。

案例研究

讓我們從Olija開始，這是一場關於揮舞著魚叉的英雄的遊戲。遊戲的視覺流動性和敘事深度是突出顯示的關鍵方面。該網站需要吸引用戶，使他們沉浸在故事中並給他們控制感。

網站提供了優勢：互動性。我們通過鼠標運動，懸停，滾動條和鍵盤輸入來利用這一點。我喜歡捲軸的直覺本質。

Olija的設計包括一個緩慢的，電影證券風格的淡出動畫，涵蓋了三個視口高。這設定了步伐和基調。隨後的部分，包括動態的屏幕快照元素（例如在森林中奔跑的英雄），加強故事並展示遊戲的風格。基於精靈表的動畫像素藝術需要在變換屬性的範圍內對精靈紙的位置進行動畫動畫。

APE憑藉其動作電影的感覺，啟發了一個網站展示完整的場景，讓用戶想像前面的動作。滾動條控制著相機的探索。雖然它似乎是3D WebGL畫布，但實際上是巧妙地定位了3D變換。

輸入Gungeon的網站慶祝玩家體驗，使用懷舊來促進相關遊戲。

獨特的遊戲元素

Loop Hero以其簡單而引人入勝的遊戲循環啟發了一個無限滾動的網站。在戰鬥中，滾動條是暫時殘疾的，展示了遊戲的進展。戰鬥結果是動態的，增加了可重播性。

Boomerang X和Shadow Warrior網站直接集成了遊戲錄像，創建交互式元素。 Shadow Warrior的內容帶有遊戲中的影響； Boomerang X的徽標反映了遊戲中Boomerang的動作。

Devolver Tumber Time的Bumbler機械師提出了重大挑戰。使用MatterJ的初步嘗試失敗；最終，三個J被用於達到所需的流動性。

更深的潛水：幻影深淵

Phantom Abyss網站僅重4MB，展示了許多此類技術。微妙的動畫（變化塊，褪色的幻影，動畫瀑布，灰塵顆粒等）增加了深度，並巧妙地暗示了遊戲的隱藏複雜性。 SVGator用於動畫SVG（火炬，頭髮，眼睛）。

內部的靈感

這些示例突出了我們的動畫方法。 Devolver Digital的多元化遊戲目錄提供了無盡的靈感（查看Ragnorium，Heave Ho和Gato Roboto）。維科（Vieko）在銷售和污泥生活方面的工作也體現了這種方法。

我們主要使用Vercel，NextJS，框架運動和反應三纖維。儘管存在許多其他工具，但這些工具簡化了我們的工作流程。

豐富的工具和技術可能是壓倒性的，導致模仿而不是創新。我們不應專注於復制他人的作品，而應優先創建與內容本身深入聯繫的動畫，從而鍛造獨特而令人難忘的用戶體驗。

以上是竊取遊戲動畫技術以吸引用戶的詳細內容。更多資訊請關注PHP中文網其他相關文章！