窃取游戏动画技术以吸引用户

现代网站在动画中陷入困境 - 通常太多了。他们可能会使内容混乱并挫败用户。然而，动画具有不可否认的魅力；他们将生活呼吸到网站，创建很有趣，并且会给人留下深刻的印象。这个问题不一定是数量，而是动画与网站内容的相关性。综合动画不良的感觉被迫，没有增加价值。

本文针对的是Web开发人员，旨在合并复杂的动画而无需疏远用户。我将分享我用来创建引人入胜的动画的技术，同时最大程度地减少用户挫败感。您可能会认为“不烦人的用户”是一个低标准，而且...您是对的。

我的方法有些非常规。作为独立游戏出版商Devolver Digital（与Vieko合作）的网络开发人员，我参与了开发和设计。最初，我在设计方面挣扎。草图很少转化为Photoshop实现，导致无数重新启动。试图绕过设计并直接跳入代码，依靠动画来补偿，这同样不成功。我的设计技巧缺乏。

然后，我发现了一个捷径。

在介绍网站概念时，我的同事和客户对我的设计技能（并发送饼干 - 我吃了，对不起！）。我的秘密？

我从视频游戏中借来了。

我模仿游戏颜色，按钮，模态框，核心概念，甚至是游戏机制。我玩游戏（他们很有趣！），捕获屏幕截图和镜头，然后……我适应了元素。最重要的是，我适应动画。

尽管视频游戏提供了丰富的灵感来源，但可以在各个行业中应用这种方法。对我来说，调整游戏动画释放了每个网站的全部潜力。

灵感的金矿

Devolver Digital拥有一个多元化的游戏库：镇定的叙事体验以及动感十足的标题；视觉上简单的游戏具有隐藏的深度，以及像Shadow Warrior 3这样的游戏。每个游戏都独特地吸引玩家，创造令人难忘的体验。我们旨在在我们的网站上复制这种参与，并利用Web技术在用户甚至触摸控制器之前建立连接。我们本质上是“借用”资产，动画和机械师，为用户提供游戏玩法的品味。

案例研究

让我们从Olija开始，这是一场关于挥舞着鱼叉的英雄的游戏。游戏的视觉流动性和叙事深度是突出显示的关键方面。该网站需要吸引用户，使他们沉浸在故事中并给他们控制感。

网站提供了优势：互动性。我们通过鼠标运动，悬停，滚动条和键盘输入来利用这一点。我喜欢卷轴的直觉本质。

Olija的设计包括一个缓慢的，电影证券风格的淡出动画，涵盖了三个视口高。这设定了步伐和基调。随后的部分，包括动态的屏幕快照元素（例如在森林中奔跑的英雄），加强故事并展示游戏的风格。基于精灵表的动画像素艺术需要在变换属性的范围内对精灵纸的位置进行动画动画。

APE凭借其动作电影的感觉，启发了一个网站展示完整的场景，让用户想象前面的动作。滚动条控制着相机的探索。虽然它似乎是3D WebGL帆布，但实际上是巧妙地定位了3D变换的Divs。

输入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中文网其他相关文章！