给用户一个否减弱动画效果的选择每日前端夜话0x8B

每日前端夜话0x8B

每日前端夜话，陪你聊前端。

每天晚上18:00准时推送。

正文共：1316 字

预计阅读时间：56 分钟

作者：Chris Coyier

翻译：疯狂的技术宅

来源：css-tricks

你有没有看到过这样一种简洁的技术【http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/】，它基于 媒体查询，将 用于 元素来提供动图（或不提供动图）？

当我们在 newsletter 【https://css-tricks.com/newsletters/】上分享这种方法之后，得到了 Michael Gale 的有趣回复：

喜欢 GIF 动画，但又不想让 UI 在变得花里胡哨的人该怎么办？让他们被迫在内容和界面之间做出选择吗？

我认为这是一个非常有趣的问题。

此外，这段时间每当看到 时，我的大脑被触发到如果是 MP4 会怎样？！总的来说，这是因为我确信从整体上来说在 Web 上视频要比 GIF 具有更多的优势。事实证明，有些浏览器会在 元素中支持视频，不管你信不信，你可以为 元素写下后备方案！【https://css-tricks.com/fallbacks-videos-images/】

让我们把所有这些东西结合起来。

添加MP4源

最简单的方法是在 picture 中添加一个额外的 。这意味着我们需要三个源媒体文件：

当 为 时启用的后备非动画图片。

动画 GIF 作为默认值。

如果支持后备，则用 MP4 视频替换 GIF 。

例如：

在 Chrome 的默认条件下，只会下载并显示 GIF：

Chrome DevTools仅显示已下载的gif

在 Safari 的默认条件下，仅下载并显示 MP4：

Safari DevTools仅显示下载的mp4

如果你在 Chrome 或 Safari中激活了 （在 Mac 上，可以通过：系统偏好设置辅助功能显示减弱动态效果 进行设置），两个浏览器都只下载静态的 PNG 文件。

Chrome DevTools显示png已下载

我在测试 Firefox 时，发现它似乎不起作用，继续下载 GIF 版本。Firefox 似乎支持 【https://caniuse.com/#feat=prefers-reduced-motion】，也许它只是目前不支持 元素？我不确定这究竟是怎么回事。

使用工具把提供的单个动画源生成其他动画源是一件很酷的事情！我打赌你可以用 Cloudinary 之类的东西来解决这个问题。

添加显示动画版本的切换按钮

就像 Michael Gale 所说的那样，你可能完全无法看到动画版本，因为你可能已经减弱了动画效果。

添加一个 用 JavaScript 得到媒体查询并强制浏览器显示动画版本应该是很容易的。

我很确定没有什么好的办法在 HTML 中以声明方式执行此操作。我们也不能把这个按钮放在 标签内。即使 不是替换元素，浏览器仍然会感到困惑并且不喜欢它。甚至根本不会渲染它。这没什么大不了的，我们还可以使用包装器。

我们可以将按钮放在图像顶部的某个位置。这只是一个随意的选择 —— 你可以把它放在你希望的任何地方，或者甚至可以让整个图像都可以点击，只要你认为可以向用户解释清楚。请记住，只有在同一媒体查询匹配时才能显示按钮：

单击（或点击）按钮时，我们需要删除媒体查询以通过下载动画源来启动动画。

以下是演示：

CodePen上的演示：https://codepen.io/chriscoyier/embed/dEBzmL