借鉴游戏动画技巧提升用户参与度

如今的网站充斥着动画——通常是太多了。它们妨碍了内容，也减缓了我们忙碌的用户的使用速度。但与此同时：它们也很棒。它们让网站充满活力，实现起来很有趣，并且可以令人印象深刻地展示出来。我认为它们很棒。抱歉，各位没有耐心的用户。

在我看来，问题不在于网站动画太多，而在于动画与它们所推广的内容不协调。它们与主题格格不入。它们感觉牵强附会，也没有提供任何额外的价值。

本文面向希望使用最棒的动画来炫技，但又不想因此惹恼用户的 Web 开发人员。我将向您展示一些我个人在尝试尽量不惹恼用户的情况下使用网站动画的方法。您可能认为“不惹恼用户”是我设定了一个很低的标准，嗯……是的。说得对。

我算是偶然涉足这个话题的。我为一家名为 Devolver Digital 的独立游戏发行商担任 Web 开发人员。我和 Vieko 一起为这些视频游戏制作网站。虽然我主要是开发人员，但我工作的一大部分是概念化和创建设计。我曾经认为设计似乎并不难，但事实是，正如你们大多数人可能知道的那样，它并不那么简单。它真的，真的很困难。

当我刚开始制作视频游戏网站时，我会在笔记本上先画草图。这没问题，但当我尝试在 Photoshop 中实现设计时，它就是无法组合在一起。我会从头开始，再试一次。它仍然不起作用。然后我会尝试跳过整个设计步骤，直接跳到代码中，希望动画能够将所有内容组合在一起。动画很酷，但仍然不够好。我的设计技能有所欠缺。

但后来我想出了一个伪造的方法。

现在，当我向我的同事和客户展示网站概念以获取反馈时，他们告诉我我是世界上最好的设计师，并且会送我饼干。他们不知道我隐藏着一个可怕的秘密。

我不知道我是否应该揭露这个秘密。全世界的网页设计师都会讨厌我。我的同事会要回他们的饼干。好吧——饼干我吃了。我将告诉你们这个秘密。秘密是……

我从视频游戏中复制一切。

我复制颜色、按钮、模态框，甚至核心概念和游戏机制。我玩游戏（它们很有趣），截图，捕捉画面，然后我偷走所有东西。最重要的是，我偷走了动画。

虽然视频游戏为盗窃提供了完美的媒介，但我相信像你这样的人也可以从你的相关行业中“偷窃”。虽然从游戏中“偷窃”帮助我作为设计师作弊，但“偷窃”动画确实释放了每个网站的全部潜力。

免费的房地产

我们在 Devolver Digital 有各种各样的游戏。有些是平静的叙事体验，而另一些则拥有非常有趣的游戏元素。有些具有非常简单的视觉效果，隐藏着深刻的秘密，而另一些则是 Shadow Warrior 3。

每一个游戏都有自己独特的方式，能够潜移默化地影响玩家的大脑，并在其中建立一个舒适的小空间。在每个网站上，我们都试图复制这种大脑连接并加以利用。现代 Web 技术已经发展到可以让我们制作出能够有效吸引用户，并在他们拿起游戏手柄之前就建立这种大脑连接的网站。

所以基本上，我们从游戏中窃取资源/动画/机制/所有东西，让用户一窥玩游戏的感受。

例如

我想从我最喜欢的项目之一开始。它是名为 Olija 的游戏的网站。它讲述了一个挥舞着鱼叉的英雄探索敌对的土地，寻找回家的路的故事。这款游戏有两个核心方面。第一个是视觉流畅性。它的像素艺术中的像素尺寸相当大，因此在没有看到它运动的情况下，很难传达这款游戏的美丽。第二个核心方面是它的故事。感觉这款游戏是基于一本预先存在的书籍或电视剧改编的。

网站的目标是采用这两个核心方面，并诱使用户参与其中；让他们感觉自己是故事的一部分，并让他们感觉自己能够控制行动。

我在这里要先离开 Olija 一会儿。我应该早点提到这一点。网站有一个方面让它们优于大多数其他媒体：它们是交互式的（显然）。这很棒，因为我们可以利用这种交互性来诱使用户更深入地参与网站。这是关键。我们有一些工具可以用来使他们的体验更加生动和难忘。这些工具包括鼠标移动、鼠标悬停、指针按下/抬起状态、滚动条和键盘。我最喜欢的是滚动条。您会看到它在我的项目中经常使用。我觉得它使用起来最直观，并且我喜欢它不需要用户过多思考或花费精力。

回到 Olija。用户向下滚动时首先看到的是类似电影片尾字幕的淡入淡出动画。它很慢。需要滚动三个视口高度 (300vh) 才能全部滚动完，但它是至关重要的部分。它设定了节奏，并立即展现了游戏的基调。这是一个非常简单的动画，但至关重要。一旦此部分被扩展并放慢速度，页面其余部分就显得自然得多。

在故事部分之后，用户会看到动态的类似屏幕截图的部分。其中有一个部分，英雄在一个充满生机的森林背景中奔跑。展示像这样轻松的时刻可以增强故事的史诗感，并展示游戏的独特风格。

Olija 的一个比较棘手的部分是，像素艺术基于精灵图。我们不能只动画化元素的 transform 属性来在屏幕上移动它。我们还必须动画化它在精灵图中的当前位置。这是一个演示我们如何做到的 CodePen 示例。

我们对 Ape Out 也采用了类似的方法。这款游戏感觉像一部动作电影。顾名思义，玩家扮演一只试图逃离各种场景的猩猩。配套网站的想法是展示一个已经发生过的场景，让用户想象导致最终史诗时刻的所有行动。同样，他们使用滚动条控制探索此场景的摄像机的速度。

乍一看，它可能看起来像一个 3D WebGL 画布，但实际上是许多 div 使用 3D 变换放置，其中相应的透视原点根据滚动位置更新。不确定它是否比使用 ThreeJS 更好或更容易，但它……嗯……是可以实现的。这是 CodePen 中一个精简版的示例。

作为故事驱动体验的最后一个例子，我想提一下 Enter the Gungeon 网站。它融合了 Olija 和 Ape Out 的理念，但它并没有试图捕捉游戏的叙事，而是试图庆祝玩家在游戏中花费的时间。目标是放慢速度，让用户回忆往昔，然后利用这种怀旧情绪来推广 Exit the Gungeon 和 House of the Gundead 游戏。

独特的卖点

有时游戏会有独特的卖点或游戏元素，而网站是展示它的绝佳场所。一个很好的例子是 Loop Hero。它是一款表面上非常简单的游戏。英雄会自动沿着循环路径旅行，并与遇到的怪物战斗。

玩家控制英雄的装备以及他们是否放弃路径返回村庄。这使得无限循环成为网站的一个明确概念。当用户到达页面底部时，他们会无缝地传送到顶部，页面重置。视口中的场景完全相同，因此用户不会察觉到任何变化。

该网站上还有几个直接从游戏中获取的概念。一旦用户滚动到战斗触发区域，滚动条就会被禁用（抱歉，我知道这不好），并且他们被迫观看战斗的进行。英雄和怪物各自具有生命值、攻击速度和攻击力值，并具有随机变化。这意味着战斗结果不是硬编码的。每次用户循环浏览页面时，背景地图都会更新新的图块，以显示游戏如何发展和演变。

Loop Hero 网站我最喜欢的功能之一是顶部区域和下方循环道路区域之间的淡入淡出效果。Four Quarters 的游戏开发者将着色器代码（在 @kartonnnyi 的帮助下编写）和用于此效果的 Perlin 噪声图像发送给了我。我不能说我完全理解它是如何工作的，但我能够使用 gl-react 拼凑起来。

对于那些深刻理解如何编写着色器的人，我表示由衷的敬佩。我不认为我能够完全理解它们。 Shadertoy 上的东西让我大开眼界。

Boomerang X 和 Shadow Warrior 是类似的网站，它们使用游戏画面作为直接展示游戏的方式。它们都通过与背景视频相关的元素来吸引用户。Shadow Warrior 网站的内容在视频中出现冲击时会震动，并且血迹会慢慢聚集在菜单/徽标上。Boomerang X 的徽标会随着游戏画面的回旋镖来回移动。徽标还通过对用户鼠标位置做出反应来与用户进一步连接。

好了，现在让我来告诉你关于 Devolver Tumble Time 的事情。我认为大多数 Web 开发人员在有机会为这款游戏制作网站时，都会有一种想要复制滚筒机制的冲动。根据我的亲身体验，我可以说它并不像看起来那么简单。我知道让滚筒尽可能流畅地运行至关重要，否则它会给游戏带来负面影响，并导致人们离开。

我一开始使用的是 MatterJS。这似乎是显而易见的选择。滚筒是二维的，所以选择最流行的 2D 引擎吧？好吧，事实证明滚筒不是二维的，而且我不认为 MatterJS 中存在离心力。我和之前的一个灵魂一样，试图对其进行破解。我尝试实施 他们的尝试，但没有成功。

为了使滚筒正常工作，我需要两个方向的重力。物品应该沿着 y 轴向下落，但它们也需要能够通过 z 轴上的重力/摩擦“粘附”到旋转的圆盘上。我花了一个周末在 ThreeJS 中重构滚筒代码，并实现了所需的流畅度。

坠入深渊

我想以对 Phantom Abyss 网站进行深入探讨来结束本文。它包含了最近项目中使用的许多技术，并且仅重 4MB。

该网站可能看起来相当简陋，但用户观看页面时间越长，就能看到更多内容。移动的方块和逐渐消失的幽灵应该很明显，然后用户可能会注意到瀑布是动画化的，还有一些灰尘颗粒、火把、女人的头发和鞭子，最后是徽标上方的幽灵的眼睛、一些遗物上的闪光，以及远处的背景中的火焰和鸟类。

现在，我当然不期望很多用户注意到所有这些细微的细节，但它们为页面带来了深度。它们让用户潜意识地理解游戏蕴藏着秘密和深度。

这是我第一次使用 SVGator 的项目，这是一个非常棒的 SVG 动画工具。我将其用于火把、女人的头发/鞭子和幽灵的眼睛闪烁动画。

火把并不容易。 我的第一次尝试 看起来像令人毛骨悚然的狂野触手，伸出来抓住任何能找到的东西。 我的第二次尝试 更好，但还不够好。 我的第三次尝试 仍然不够好，但添加模糊和一些火花使其达到了今天的水平。如果你仔细观察，火把仍然有点像触手。在我的下一个项目中，我发现关键艺术作品中有很多触手。 我知道我该做什么了。

从内部开始

这些只是我们在网站上使用的一些动画技巧示例。 Devolver Digital 拥有一个永无止境的遊戲目錄，您可以在该网站上查看我们制作的其他网站。 Ragnorium、 Heave Ho 和 Gato Roboto 是我们的一些网站，它们从其游戏中窃取了许多内容。此外，Vieko 功不可没，他凭借其为 Minit 和 Sludge Life 制作的网站成为了最初的游戏动画窃取者。

我们的网站大多都托管在 Vercel ❤ 上，并使用 NextJS 👌。我们还大量依赖 Framer Motion 🤩，并且经常使用 react-three-fiber 🎆。还有许多其他优秀的工具，但我们喜欢这些工具，它们使我们的生活变得更加轻松。

如今，我们开发者可以访问大量工具和技术，并且不断有新的工具和技术被发布。很容易被其他有才华的开发人员所做的事情所吸引，然后我们试图复制他们的效果。这并非一定是一种不好的方法，但它可能导致封闭和重复。这会导致我们创建用户已经见过几十次的动画。

与其关注其他开发人员及其作品以获得鼓舞人心的动画和过渡效果，不如关注我们展示的内容和主题。发明全新的动画。我们应该退一步，认真思考如何吸引用户与我们的网站互动，并加深他们的体验。