同理心动画

网络上的动画通常是一个有争议的话题。我认为，部分原因是糟糕的动画非常明显，而执行良好的动画则无缝地融入背景。当处理得当，动画可以真正提升网站，无论是添加一点个性还是提供视觉提示并减轻认知负荷。不幸的是，感觉上好像存在两个阵营，一个是 **可访问性**，另一个是 **动画**。这太可惜了，因为我们可以兼得！所需要的只是一点考虑。

以下是在创建动画时需要问的几个重要问题。

这个动画有目的吗？

这听起来很严肃，但不要担心——网站的目的至关重要。如果您正在构建个人作品集，那就尽情发挥吧！但是，如果有人试图申报税单，奇思妙想的加载动画可能不会受到欢迎。另一方面，动画进度条可以在提供用户操作的视觉反馈的同时，增添一丝美感。

它是否分散了对重要信息的注意力？

人们很容易沉迷于让东西飞来飞去的兴奋中，但请记住，网络主要是一个信息系统。当人们试图阅读时，动画文本或在附近播放的循环动画会非常令人分心，特别是对于患有注意力缺陷多动障碍或多动症的人。优秀的动画可以帮助集中注意力，而不是破坏它。

所以！您的动画通过了测试，接下来做什么？以下是一些想法…

我们是否允许用户选择退出？

重要的是，我们的动画对运动敏感的人来说是安全的。患有前庭（内耳）疾病的人可能会因动画内容而感到头晕、头痛甚至恶心。

幸运的是，我们可以利用 prefers-reduced-motion 媒体查询来访问操作系统设置。此媒体查询检测用户是否已请求操作系统最小化其使用的动画或运动量。

以下是一个示例

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

此代码段利用该用户设置，如果已启用，它将消除您 **所有** CSS 动画和过渡。这是一种有点像大锤的方法，请记住，此媒体查询中的关键词是 减少。确保功能不会中断，并且用户不会因选择退出动画而丢失重要上下文。我更喜欢为这些用户定制减少运动选项。考虑使用简单的透明度淡入淡出，而不是缩放或平移效果。

那么 JavaScript 呢？

很高兴您问！我们也可以在 JavaScript 世界中利用减少运动媒体查询！

let motionQuery = matchMedia('(prefers-reduced-motion)');

const handleReduceMotion = () => {
  if (motionQuery.matches) {
    // reduced motion options
  }
}

motionQuery.addListener(handleReduceMotion);
handleReduceMotion()

利用系统偏好设置并不是万无一失的。毕竟，无法保证所有受运动影响的人都知道如何更改其设置。为了确保万无一失，可以在 UI 中添加一个减少运动切换，将控制权交还给用户，让他们自行决定。我们 {the collective} 在他们的网站上有一个非常棒的实现

以下是一个简单的示例

滚动动画

我最喜欢网络动画的一件事是与用户交互相结合。它为创意打开了无限可能，并真正让您与访客互动。但请记住，并非所有交互都是选择加入的——有些交互（如滚动）本质上与用户浏览您网站的方式相关联。

Nielson Norman 集团对滚动交互进行了一些 很棒的 研究。其中一部分让我印象深刻。他们发现，许多以任务为中心的用户的无法区分加载缓慢与滚动触发的进入动画。他们只注意到界面响应时间令人沮丧的延迟。我感同身受；当您试图在一个网站上搜索一些信息，却不得不等待页面缓慢地淡入淡出时，这会让人非常恼火。

如果您使用的是 GreenSock 的 ScrollTrigger 插件来实现动画，那么您很幸运。我们添加了一个很酷的属性来帮助避免这种沮丧：fastScrollEnd。

fastScrollEnd 检测用户的滚动速度。当用户快速滚动时（就像他们很着急一样），ScrollTrigger 会将进入动画跳过到其最终状态。看看吧！

还有一种超简单的方法可以使用 ScrollTrigger.matchMedia() 使您的滚动动画更易于减少运动。

---

我希望这些代码段和见解有所帮助。请记住，要考虑目的，以同理心为先，并负责任地使用您的动画能力！