【网页特效】丝滑的 macOS Dock效果

深藏阁楼爱情的钟 2023-01-21 02:18 15阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

今期我们又来做一些花里胡哨的特效，就是模仿 macOS 的 Dock 这个图标放大的效果：

![ce2fe4f4271d233b706710b7507ed916.gif][]

01.gif

如果是单纯的逐个图标放大，其实就没什么难度。不过我们的作风是，要做就做得够细致，当游标在同一个图标上左右移动时，都会影响到左边和右边的图标大小的，达到一个很连贯的效果，这个就是今次的难度所在。

好了，那我们就开始吧。

## HTML 的部分 ##

打开 CodePen 编辑器，在 HTML 的部分加入一些图标，在这里我会用 Emoji 表情符号来代表，加入一个 `<ul>` 列表的标签，`class` 设定为 `dock`，然后用 `<li>` 装着每一个表情符号，再在外面套上一层 `<div>`，class 是 `glass`。

![2e58bd5cf13b70bdda46d7b7ee5f3ef0.png][] 02.png

## CSS 的部分 ##

然后是 CSS 的部分，加入 `html` 选择器，把基础的文字大小设定为 `15px`。加入 `body` 选择器，将 `margin` 和 `padding` 设定为 `0`，`display` 设定为 `flex`，宽度设定为 `100%`，`min-height` 最小的高度设定为 `100vh`，`overflow` 设定为 `hidden`。

然后要把它定位到页面的下方，`align-items` 设定为 `flex-end`。

![c4a0dc48d22f30281dac9dfeb74bb3d1.png][] 03.png

加入 `.glass` 选择器，宽度设定为 `100%`，高度设定为 `8rem`，然后背景颜色设定为浅灰色，`display` 设定为 `flex`，`justify-content` 设定为 `center`。

加入 `.dock` 选择器，将图标居中以及横向排列，`list-style` 列表的样式设定为 `none`，`margin` 和 `padding` 设定为 `0`，`display` 设定为 `flex`，`justify-content` 和 `align-items` 设定为 `center`。

再设定图标的样式，加入 `.dock li` 选择器，由于这里用的是表情符号，所以可以通过设定 `font-size` 来调整它的大小，`font-size` 设定为 `6rem`。然后加入一些 `padding`，左右设定为 `0.5rem`，`cursor` 游标的样式设定为 `default` 即是预设的箭头。

![cddb65ef3430c537f60833d5eb9c433b.png][] 04.png

好了，样式的部分都差不多了，接下来就是实现特效的部分。

## 动画的原理 ##

首先我们了解一下这个效果的原理，举例我们将游标移动到第四个图标上的时候，它会放大。除此之外，在它旁边的第三个和第五个图标都会稍为放大一点，而当游标的位置比较靠左的时候，第三个就会比第五个放大一点，反之亦然。

所以我们就要知道游标在某一个图标上的时候，是在左边，中间还是右边的位置。

## JavaScript 的部分 ##

来到 JavaScript 的部分，先用 `querySelectorAll()` 把所有 `.dock li` 获取回来。然后通过回圈，为每一个 `li` 加入 `mousemove` 事件监听器。

定义一个变量 `item`，赋值为 `e.target`，因为稍后会多次引用到。然后要知道图标所在的 `li` 容器的宽度，定义变量 `itemRect`，赋值为 `item.getBoundingClientRect()`。

然后就是计算游标在图标上的位置，定义变量 `offset`，赋值为 `e.clientX` 减去 `itemRect.left`，由于它可能是负值，所以套上 `Math.abs()`，再除以 `itemRect.width`。

现在当游标移到图标左边的时候，`offset` 会趋近于 `0`，移到右边的时候，`offset` 会趋近于 `1`。

![9cf50364bc489272d758dafd489fb910.png][] 05.png

有了这个值，我们就可以计算图标的放大比例了。定义两个变量，分别是 `prev` 和 `next`，通过 `previousElementSibling` 以及 `nextElementSibling` 获取当前游标所在的图标，前一个以及后一个的 `li` 元素。

再定义一个变量 `scale`，假如我想图标放到最大是 `1.6` 倍，这里就赋值为 `0.6`。

然后就计算放大的比率，并且写入到对应元素的 CSS 变量之中。在设定 `prev` 之前，要先判断一下是否能够获取到到它，因为当游标在第一个图标上的时候，`prev` 就会是 `null`。然后通过 `setProperty()`，将放大的比率设定到 CSS 的变量里面，我会设定为 `1` 加上 `scale` 乘以 `Math.abs(offset \- 1)`，`offset \- 1` 是因为现在正在设定左边的元素，所以 `offset` 的值要相反，即是将 `0` 至 `1` 改为 `1` 至 `0`。

然后运用相同的逻辑设定右边元素的放大比率，不同的是，这里的 `offset` 直接使用就可以了，而对于当前的图标呢，就直接设定为 `1 + scale` 就是最大值了。

![09551f467bee18d2f5a03c6ce780581f.png][] 06.png

定义一个用于重置 `--scale` 的函式，名为 `resetScale()`，把所有 `li` 的 `--scale` 重置为 `1`。

![7e904b3a1074cbe550f4d3aa04210233.png][] 07.png

总共有两处位置需要执行这个函式的，分别是在 `mousemove` 事件里面，以及当游标离开这个 Dock 的时候。新增 `mouseleave` 事件监听器，并且执行 `resetScale()`，就可以了。

![daaebc2d628ae47cbf580c1c6f380928.png][] 08.png ![b690f8df688b11e17af3c91766f889ad.png][] 09.png

通过开发者工具，看一下 `--scale` 的变化：

![c636db8f9f56e248c012bed1b03b2762.gif][]

10.gif

在游标移动的过程当中，会将超出范围的 `li` 的 `--scale` 重置为 `1`，以及在游标离开 Dock 的时候，所有 `li` 的 `--scale` 都重置为 `1`。

## 最后一步 ##

好了，来到这里，就差一步就完成了。

回到 CSS 的部份，将文字大小的设定值更改为 `6rem` 乘以 `var(--scale)`，因为涉及到运算，所以套上一层 `calc()`。

在 `.dock` 选择器内初始化 `--scale` 为 `1`。测试一下：

![f51d64cf7370d96d67a1c7adda08e1c0.gif][] 11.gif

放大效果就达到了，不过定位有点问题。这个也不难解决，将 `position` 设定为 `relative`。然后计算一下 `top` 相对于图标放大后的位移就可以了。再增加一点点的 `transition` 动画过渡的设定。

![096284234b71a243b421341a047e1dc0.png][] 12.png

我们顺便将点击图标然后载入中的效果都做出来吧，如果你有兴趣的话，暂停一下，试试自己实现一下。

这里也很简单，定义一个叫做 `loading` 的动画设定，通过 `translateY()` 将它上下移动，然后加入 `.dock li.loading` 选择器，即是当 `li` 有 `loading` 这个 class 的时候，执行这个动画，并且无限次重覆。

![fd4718935231ed2ae56edcf0f76fcd1e.png][] 13.png

再到 JavaScript 的部分，加入针对 `li` 的点击事件监听器，然后为目标的元素加上 `loading` 这个 `class` 就可以了。

![cba7518e2af6f51de9252a437bf338db.png][] 14.png

## 我们来看看这个案例的完成效果 ##

![56e4719126d51e8ff3343af5c8e1e6c6.gif][]

Final.gif

以上，就是今期要介绍的全部内容。

案例源代码请在公号回复关键字 macOS Dock 效果获取

> 转自：CodingStartup起码课
> 
> https://juejin.cn/post/6942325271349592100

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[ce2fe4f4271d233b706710b7507ed916.gif]: /images/20221021/39a2a0041b99461c8cdb79668d8e84a3.png
[2e58bd5cf13b70bdda46d7b7ee5f3ef0.png]: /images/20221021/fe1911be7e8542ab8bdc3f9d0cb70adb.png
[c4a0dc48d22f30281dac9dfeb74bb3d1.png]: /images/20221021/d464d1fba59b4a3e82781924b88b9b7c.png
[cddb65ef3430c537f60833d5eb9c433b.png]: /images/20221021/680f51965d4b44b1ae8de44d0bf2a25c.png
[9cf50364bc489272d758dafd489fb910.png]: /images/20221021/d01aa366a2bd4f78b747330136b542ad.png
[09551f467bee18d2f5a03c6ce780581f.png]: /images/20221021/876fb2d1013d4e949ba343fcbc37fffa.png
[7e904b3a1074cbe550f4d3aa04210233.png]: /images/20221021/27494ff8b3524e9c9d5c1588dc167aad.png
[daaebc2d628ae47cbf580c1c6f380928.png]: https://img-blog.csdnimg.cn/img_convert/daaebc2d628ae47cbf580c1c6f380928.png
[b690f8df688b11e17af3c91766f889ad.png]: /images/20221021/7df3d70b1fda41a4876a0348383f0fec.png
[c636db8f9f56e248c012bed1b03b2762.gif]: /images/20221021/179f66680e144d29b2ff16e6e310f2d9.png
[f51d64cf7370d96d67a1c7adda08e1c0.gif]: /images/20221021/34563b78b6a74c10b628b789c8a3883f.png
[096284234b71a243b421341a047e1dc0.png]: /images/20221021/ba9028bd18f540218520a91534da184c.png
[fd4718935231ed2ae56edcf0f76fcd1e.png]: /images/20221021/e7518e77a50d4c588fb61d6f1f5b4c6a.png
[cba7518e2af6f51de9252a437bf338db.png]: /images/20221021/f53cc616c6644debbbe18961b7112734.png
[56e4719126d51e8ff3343af5c8e1e6c6.gif]: /images/20221021/327b1585745a4e6f822139b005ab8283.png