Vue动画
讲师：Vue Msatery Team
口袋资源独家Vue Mastery付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
您可能听说过 Web 动画可以改善 Vue 应用程序的用户体验。但是你知道你应该为什么制作动画，以及如何在 Vue 中制作动画吗？在 Vue Mastery 的动画 Vue课程中，我们将探索如何制作有效的 Web 动画，并学习开始为您的界面制作动画的最简单方法，以便您的用户可以更好地浏览和享受您的应用程序。
在学习如何在 Vue 中制作动画之前，让我们通过探索如何使用动画来改善用户体验来了解我们为什么要这样做。
引导焦点
在当今世界，人类的思想不断受到信息的轰炸。我们正在发送电子邮件、接收文本、滚动提要……我们的注意力被吸引到无穷无尽的方向上。因此，当用户访问您的应用时，他们的大脑很可能已经在思考他们一整天都在处理的信息。作为用户界面构建者，我们的工作是快速定位和引导用户的注意力，指导他们如何有效地使用我们的应用程序。
我们可以利用动画的力量来吸引用户的注意力。一旦我们拥有它，我们就可以将它引导到我们想要它去的地方。
鼓舞人心的行动
当用户访问您的应用程序时，您希望他们做的第一件事是什么？这可能是您希望他们阅读的一行文案，或者您希望他们点击的按钮……您希望他们采取的第一步。通过有效地利用动画，您可以消除干扰并激发特定的动作。
在这个例子中，我们的号召性用语是一个我们希望用户点击的按钮。通过使用动作，我们消除了分心，并消除了用户心中关于他们应该关注哪里以及他们应该如何开始使用我们的应用程序的任何困惑。
动作如此有效地吸引注意力的原因是人类的原始本能。无论是为了寻找晚餐，还是避免成为另一只动物的晚餐，视觉对运动的敏感度都是人类大脑的核心过程，它帮助我们在这个星球上的整个时间里生存和进化。
作为开发人员，我们可以利用这种对视觉运动的敏感性，将用户的注意力引导到我们希望他们关注的元素上，这样他们就更有可能采取我们希望他们采取的行动。但是能力越大，责任越大，所以我们应该以一种模仿自然的优雅方式使用运动。
创建流程
如果我开始告诉你动画的下一个原因是什么，而我最终告诉你我们的银河系中有 1000 亿颗恒星，这就是所谓的不合逻辑。我结束的地方突然偏离了我开始的地方。不幸的是，在设计不佳的 Web 界面中，不合逻辑的情况非常普遍。那看起来像什么？你有没有点击过一个按钮或链接，你刚才看到的一切都瞬间消失了，只是被一个全新的页面所取代？这可能会让人迷失方向，并导致您的用户每次发生这种情况时都必须重新定位到您的网站。随着时间的推移，这会导致用户出现认知疲劳。
当用户在我们的应用程序中导航时，我们可以利用动画的力量创建一个无缝的流程，而不是破坏上下文。我们可以将元素相互变形，我们可以以一种感觉自然的方式在页面和组件之间转换。
我们可以通过将菜单设置为折叠状态来向用户展示他们刚刚打开的菜单去了哪里。我们可以使用动画在应用程序中创建一种物理空间和时间感，其中元素在可预测的持续时间内在位置和状态之间转换。如果实施得当，用户会对我们应用程序的“世界”产生一种熟悉感。他们了解其中的内容，以便更好地记住如何在需要时找到所需的内容，并且他们了解应用程序的行为方式，因此他们不会迷失方向、沮丧或精疲力竭。
相反，他们会很高兴，这让我想到了我认为我们应该为我们的界面制作动画的最后一个主要原因。
喜悦与惊喜
市面上有无数的应用程序，其中许多可能相当常规和乏味，我们的用户将欣赏那些让您的应用程序更有趣、更令人愉悦的贴心改进。如果你让你的用户微笑，你就赢得了粉丝。
这些深思熟虑的操作可以是任何东西，从定制的加载微调器，到可以减轻填写一堆字段负担的超级简洁有用的表单，再到传达成功或错误状态的按钮。
如果做得好，这些令人愉快的接触将使您的应用程序更令人难忘，可以使您在竞争中脱颖而出，甚至可以帮助您比没有多走一步的情况下更长时间地吸引用户的注意力。但在这里值得提醒一句：很容易过火和过度动画。动画就像在菜肴中添加香料。太少了，菜就淡了；太多了，这道菜就毁了。就像任何一顿美餐一样，一个有效的动画界面必须很好地平衡。
让我们重温
在接下来的课程中，我们将探讨几种可以利用 Vue 的强大功能来创建几乎任何 Web 应用程序都可以使用的动画的方法。虽然在 Vue 中有很多方法可以制作动画，而且它可能会变得非常高级和复杂，但本课程的目标并不是向您展示众多选项中的每一个。目标是为您提供开始向 Vue 应用程序添加简单实用的动画所需的工具和洞察力，这些动画可以引导注意力、激发行动、创造流程以及愉悦和惊喜。
