善解人意的动画

Web动画通常是辩论的来源。执行不佳的动画非常明显，而做得好的动画无缝地融入了用户体验中。有效的动画增强了网站，增加了个性或提供视觉提示以减少认知负担。但是，一个常见的误解将动画访问的可访问性。这是不必要的；周到的设计允许两者兼而有之。

设计动画时考虑以下这些关键问题：

动画有目的吗？

虽然有趣的动画适合个人投资组合，但它们不适合以任务为导向的网站，例如税务申请服务。但是，进度条提供了宝贵的视觉反馈。

动画会分散注意力吗？

避免过度繁忙的动画，这些动画会损害基本信息。内容附近的动画文本或循环动画对于使用ADD或ADHD的用户尤其分散注意力。好的动画增强了焦点，不会破坏它。

因此，您的动画通过初始测试。接下来是什么？

用户选择退出选项

动画应体贴运动敏感性的用户。前庭疾病会引发头晕或恶心。

prefers-reduced-motion媒体查询可检测用户的偏好以最小动画。此代码片段禁用所有CSS动画和过渡：

 <code>@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; } }</code>

这是一种广泛的方法。更精致的解决方案裁缝降低了运动效果，也许使用简单的不透明度淡出而不是复杂的过渡。

JavaScript考虑

prefers-reduced-motion媒体查询也适用于JavaScript：

让MotionQuery = MatchMedia（'（（偏爱还原））'）;

const handlereducemotion =（）=> {
  if（MotionQuery.Matches）{
    //减少运动选项
  }
}

MotionQuery.Addlistener（HandlerEduceMotion）;
handlereducemotion（）

但是，仅依靠系统偏好并不是万无一失。 UI切换可提供用户直接控制。

滚动动画

卷轴触发的动画提供了创造性的可能性，但会对用户体验产生负面影响。研究表明，用户通常将缓慢的加载时间与入口动画相混淆，从而导致延迟。

Greensock的Scrolltrigger插件提供fastScrollEnd来解决此问题。它检测到高滚动速度并跳过动画，以确保响应迅速的体验。 Scrolltrigger的matchMedia()还简化了创建减少运动友好的滚动动画。

优先考虑目的，同理心和负责任的动画实践，以获得包容性和愉快的用户体验。

以上是善解人意的动画的详细内容。更多信息请关注PHP中文网其他相关文章！