前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给用户一个否减弱动画效果的选择[每日前端夜话0x8B]

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

作者头像
疯狂的技术宅
发布2019-06-28 11:13:24
7510
发布2019-06-28 11:13:24
举报
文章被收录于专栏:京程一灯

作者:Chris Coyier

翻译:疯狂的技术宅

来源:css-tricks

你有没有看到过这样一种简洁的技术【http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/】,它基于 prefers-reduced-motion 媒体查询,将 <source media=""> 用于 <picture> 元素来提供动图(或不提供动图)?

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

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

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

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

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

添加MP4源

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

  1. prefers-reduced-motionreduce 时启用的后备非动画图片。
  2. 动画 GIF 作为默认值。
  3. 如果支持后备,则用 MP4 视频替换 GIF 。

例如:

代码语言:javascript
复制
1 <picture>
2  <source srcset="static.png" media="(prefers-reduced-motion: reduce)"></source>
3  <source srcset="animated.mp4" type="video/mp4">
4  <img srcset="animated.gif" alt="animated image" />
5 </picture>

在 Chrome 的默认条件下,只会下载并显示 GIF:

Chrome DevTools仅显示已下载的gif

在 Safari 的默认条件下,仅下载并显示 MP4:

Safari DevTools仅显示下载的mp4

如果你在 Chrome 或 Safari中激活了 prefers-reduced-motion: reduce (在 Mac 上,可以通过:系统偏好设置→辅助功能→显示→减弱动态效果 进行设置),两个浏览器都只下载静态的 PNG 文件。

Chrome DevTools显示png已下载

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

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

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

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

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

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

代码语言:javascript
复制
1 <div class="picture-wrap">
2
3  <picture>
4     <!-- sources  -->
5  </picture>
6
7  <button class="animate-button">Animate</button>
8
9 </div>

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

代码语言:javascript
复制
1 .picture-wrap .animate-button {
2  display: none;
3 }
4
5 @media (prefers-reduced-motion: reduce) {
6  .picture-wrap .animate-button {
7     display: block;
8  }
9 }

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

代码语言:javascript
复制
1 let button = document.querySelector(".animate-button");
2
3 button.addEventListener("click", () => {
4  const parent = button.closest(".picture-wrap");
5  const picture = parent.querySelector("picture");
6  picture.querySelector("source[media]").remove();
7});

以下是演示:

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端先锋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 添加MP4源
  • 添加显示动画版本的切换按钮
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档