动机

最近遇到了一个实现骨架屏的需求,我大致调研了一下市面上使用得比较多的骨架屏方案,发现这些方案很多都不能满足我的需求,比如

或者

从第一幅图可以看到,骨架屏中的元素有着各自独立的动画效果,也就是说其中的“波浪”并不是从左边的元素跑到右边的元素,而是分别从每个元素的左边跑到每个元素的右边,这看起来多少有点不太优雅。

第二个例子为了避免图一中暴露的问题改用了整体色彩渐变的方式,通过去掉“波浪”效果使得元素的动画效果看起来是统一的,但这样显然让页面少了些“灵动”。

另外,这两个骨架屏组件在实现上都采用了类似的接口

可以看出,这样的接口设计,基本上决定了骨架屏中的元素只能是圆形或矩形,而且排版方式相对固定。同时动画效果也比较固定,只有渐变和“波浪”两种。

还有一种骨架屏方案是用 svg 的 clipPath 实现的,它基本上解决了上述的问题,但缺点是用起来有些门槛。很多前端同学其实并没有自己写过 svg,对 svg 技术的用法和特点也不太熟悉,所以这个方案的作者甚至专门实现了一个生成器工具,让用户通过 gui 界面来生成一套使用这个骨架屏组件的配置,可见使用门槛并不低。

那么有没有一种方法既能做到优雅的效果和灵活的配置接口,同时还方便使用能够快速上手呢?

方案

首先,一个 css 动画效果只能在单一 dom 节点上执行,所以要想实现“波浪”效果在元素之间流转,给每个元素单独设置动画效果是肯定行不通的。所以为了实现一个能在元素间流转的“波浪”,我们给骨架屏一个撑满的背景元素,并在背景元素上执行“波浪”动画效果,再通过某些方式实现一个带镂空窗口的蒙板。

要实现一个带镂空窗口的蒙板,最简单直观的方案,自然是用若干个不透明的元素把不需要镂空的位置遮挡起来,留出需要镂空的地方。

这样对于矩形镂空区域还比较好处理,如果要求镂空区域是圆形或其他复杂形状就难以实现了。而且从上图就能看出,这样的方案在具体实现时会非常麻烦,尤其是当骨架屏元素的尺寸需要根据外面环境相应变化的时候,这种方案的实现难度就会变得更高,代码也难以维护。

那么,如果实现一个简单又易于维护的蒙板呢?

到这里,就要引入我们本篇的重点了:mix-blend-mode

mix-blend-mode 是用来控制图层色彩混合方式的,一共有 16 种模式,我们着重讲一下这其中的 darkenlighten 两种模式。这两种混色模式的逻辑可以参考这个链接,可以看到这两种模式的算法其实都非常简单,darken 模式下混色时直接对两种颜色分别在 R、G、B 三个通道取较小值,相反 lighten 模式下则是对两种颜色分别在 R、G、B 三个通道取较大值。

那么考虑上图的场景,上层的图层外围是白色,中间的矩形是黑色。这时如果给这个图层设置 mix-blend-modelighten,那么对于外围白色的区域由于白色在 R、G、B 三个通道都已经是最大值了,所以还是会保持白色。而中间黑色的矩形区域,由于黑色在 R、G、B 三个通道都已经是最小值了,所以就会变成下面图层的颜色。最终就是下面这样的效果:

到这里,我们就已经可以通过 mix-blend-mode 实现了一个简单的骨架屏效果了!

更进一步,如果要求骨架屏的非动画元素部分不是白色,该怎么办呢?可能你已经想到了,我们用 mix-blend-mode 再前面的基础上再取一次色。

如上图所示,我们再构建一个“蒙板”,这次我们把最上层的外围设置为需求要求的骨架屏外围颜色,把中间的矩形区域设置成白色,然后再给这个图层的 mix-blend-mode 设置为 darken,这样外围区域因为下层的白色已经在 R、G、B 三个通道都已经是最大值了,所以用 darken 模式混色时就会取到最上层的颜色。而中间的矩形区域也因为同样的原因会渠道下层矩形区域的颜色。


由此,一个可以任意定义色彩范围的骨架屏组件就实现了。

总结

通过上面的示例,你应该可以发现,用 mix-blend-mode 来实现蒙板效果相比于文档开头提到的那几种方案,不仅功能上灵活多样,而且上手非常简单,前端开发人员只用写基本的 DOM 结构和样式就能快速得到自己想要的效果。

而且,基于 mix-blend-mode 的蒙板,还可以用在很多其他的场景,比如下面这个效果,选项的边框和选项内的金额字符的渐变效果是连续的,不使用蒙板的话只能让设计师直接出图来实现了,但这样在国际化、黑暗模式、多分辨率适配等场景下就会增加很多复杂度,而使用蒙版来实现就会变得非常简单。

相关代码我已经封装成了一个 npm 包:skeleton-screen-react

欢迎 star、issue、pr

posted @ 2023-03-13 08:44 沉默的老虎 阅读(630) 评论(0) 推荐(2) 编辑
摘要: 引言 你是否注意到,这些年我们越来越少在演讲中看到演讲人用激光笔给观众指示所讲的内容。先说激光笔,激光笔的工作原理是射出一束激光,照射到幕布上并反射到观众的眼睛里,于是大家可以看到一个很亮的红色光点。但现在因为大尺寸屏幕越来越便宜,我们越来越少使用幕布这种传统投影显示设备了,毕竟屏幕的显示效果要更好 阅读全文
posted @ 2022-03-20 21:48 沉默的老虎 阅读(1672) 评论(2) 推荐(3) 编辑
摘要: 动机 在公司的某次周会上,我吐槽了某产品中一个显示鼠标轨迹的效果实现得比较抽象: 可以看到它的实现方式是将 mousemove 事件触发时的坐标,用长宽不一的矩形连接起来,所以连接处出现了明显的“断裂”,整个轨迹也不平滑,而且其宽度和透明度的“渐变”也比较生硬,有明显断层。 而我理想中的鼠标轨迹应该 阅读全文
posted @ 2021-11-03 11:39 沉默的老虎 阅读(1347) 评论(3) 推荐(7) 编辑
摘要: Quill 是一款时下非常热门的富文本编辑器,它拥有非常强大的扩展能力,可以让开发者根据自己的需要编写插件,使编辑器支持的内容类型更加丰富。它之所以能够拥有这么强大的扩展能力,一方面是因为它的架构和 api 设计从一开始就充分考虑了扩展的需求,另一方面就是它底层采用了一种表达能力很强的的数据存储模型 阅读全文
posted @ 2020-04-15 13:30 沉默的老虎 阅读(653) 评论(0) 推荐(0) 编辑
摘要: pit 项目使用 quill-delta 作为数据层存储文档内容数据,quill-delta 是一个基于 OT 算法的库,用 quill-delta 作为数据层,不仅能很好的保存文档数据,还可以方便的实现文档的协同编辑,即多个人同时编辑同一份文档(需要服务器支持)。 quill-delta 数据格式 阅读全文
posted @ 2019-12-02 21:15 沉默的老虎 阅读(850) 评论(0) 推荐(0) 编辑
摘要: 接上篇 ESLint 规则详解(一) 前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查。这个工具包含了 200 多条 Javascript 编码规范且运行迅速,是几乎每个前端项目都必备的辅助工具。可是 阅读全文
posted @ 2017-05-15 15:00 沉默的老虎 阅读(652) 评论(0) 推荐(0) 编辑
摘要: 前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查。这个工具包含了 200 多条 Javascript 编码规范且运行迅速,是几乎每个前端项目都必备的辅助工具。可是,这么多规则,每个规则的设计出发点是什 阅读全文
posted @ 2017-02-10 09:01 沉默的老虎 阅读(4098) 评论(2) 推荐(2) 编辑
摘要: 我自认为对新技术还是比较有热情的,可对于小程序这个“新技术”,我却完全是被动的。去年9月份的时候,微信小程序开始内测,瞬间引爆朋友圈、知乎等一众分享平台。当时我大概了解了一下,觉得从技术角度上来说没啥新意,也完全没有get到网上那些人激动的点在哪里,于是也就没有花很多精力去深入了解和学习相关知识。到 阅读全文
posted @ 2017-01-22 09:06 沉默的老虎 阅读(10316) 评论(58) 推荐(52) 编辑
摘要: 引言 2016年中,我所在的项目组将原来系统中的登录模块拆出来做成一套集中账号管理系统,并对外提供单点登录的服务。后来,公司中需要使用员工账号进行登录的系统越来越多,但这些系统都是各有各的实现方式,管理比较混乱。为了推广我们组的账号管理系统,统一公司的账号体系,我写了一篇“软文”希望在公司技术月刊上 阅读全文
posted @ 2017-01-19 09:16 沉默的老虎 阅读(4404) 评论(5) 推荐(3) 编辑
摘要: 首先,我得说,这篇文章有点标题党了,其实内容并没有标题看起来那么高大上。其次,本文只是做一个技术方案可能性的探讨,并没有提供完善的解决方案,至多给了一个Demo供参考。 目的 如需转载,请注明转自:http://www.cnblogs.com/silenttiger/p/4929841.html 前 阅读全文
posted @ 2015-11-02 17:23 沉默的老虎 阅读(2867) 评论(1) 推荐(2) 编辑
点击右上角即可分享
微信分享提示