作为一个UI设计师，我希望我的菜单看起来很有料。没有比菜单或屏幕在游戏中看起来像一个网站更糟糕的了！即使是最现代的网站也提供了微小的交互反馈，当用户与网站上的元素进行交互时。我的意思是，当你移动鼠标时，突出显示一个按钮（和其他交互控件），以使你的UI看起来更响应、更生动和更有趣。过去，我使用了不同的方法来动画一个按钮。Unity 提供以下选项来实现“过渡”：

无:别想了。按钮不会对鼠标悬停或点击做出反应。

颜色调色:当鼠标悬停或点击时，改变按钮的颜色。

  • 优点：设置起来很快、很容易。
  • 缺点：看起来可能有点乏味。没有运动。

纹理交换:当鼠标悬停或点击时，改变按钮的纹理。

  • 优点：如果你擅长制作纹理，可以看起来很好。
  • 缺点：需要为每个状态准备一个单独的纹理。没有平滑过渡。没有运动。

动画:当按钮被鼠标悬停或点击时，播放动画片段。

  • 优点：可以实现实际的运动（例如偏移、旋转或缩放）。你可以动画每个属性。
  • 缺点：动画控制器的开销和处理动画片段的开销。编写和调试会花费很多时间。无法改变按钮的实际外观，如果它基于纹理。

除了这些内置过渡模式之外，常见的替代方法是：

Tweening:使用类似于DoTween或PrimeTween的库来动画一个按钮。

  • 优点：很灵活，像动画一样，但没有开销。
  • 缺点：通常需要编写代码，而不是在调试器中编写。

自定义脚本:与Tweening类似，但你自己编写。

  • 优点：轻量级，只编写你需要的代码。
  • 缺点：你基本上编写了自己Tweening库带来的内容。

正如一些人可能知道的，我最近发布了我的资产 UI Shapes 在 Unity Asset Store 上。最初，我是为自己创建它，因为我想在我的最新游戏中创建带有圆角、轮廓和阴影的面板和按钮。这个是它的主要用途。使用它感觉像Photoshop和Figma一样熟悉，我可以在Unity中直接创建各种形状，而不依赖于纹理。使用我的工具来创建UI是非常有趣的！我也收到了很多反馈、bug报告和特性请求，从其他人那里获得了它并在他们的项目中使用它。非常感谢这一点，它确实帮助我改进了工具。然而，一直缺乏的东西是…… 动画！最近，我发现自己又开始了动画片段的折腾，来动画我的主菜单的按钮。然后，我突然意识到：我应该将其添加到工具本身！正如视频中所示，UI Shapes 的最新版本使得动画所有按钮状态（也适用于其他控件，如Toggle、Slider、Input Field或Dropdown）变得非常容易：

  • 选择按钮的状态（正常、突出、选中、按下或禁用）并直接在调试器中调整其外观，使用场景视图中的实时预览。
  • 设置缓和方法、持续时间和强度。
  • 然后单击播放按钮以在场景视图中预览动画。
  • 为每个状态添加声音：Clickety-click！不需要编写代码来实现这一点。
  • 添加事件到状态：在进入或离开状态时调用自己的方法。例如，你可以在鼠标悬停在UI元素时显示工具提示。

注意：视频专注于按钮的运动、缓和过渡和声音。这里不展示如何改变颜色或轮廓，而是加载我之前创建的UI Shape样式，因此你不需要看我在颜色选择器中玩耍。请随时查看UI Shapes在资产商店中的最新版本：https://assetstore.unity.com/packages/tools/gui/ui-shapes-procedural-image-effects-394532

另外一个事实：你也可以轻松动画任何与UI Shape相关的TextMeshPro标签。改变文本颜色，使其粗体或缩放它，当按钮的状态改变时。我的想法是，其他人是如何处理UI动画的。人们在使UI看起来有料时投入了多少努力？我敢打赌，有更好的方法来实现这一点。请告诉我你的解决方案！