「兔了个兔」——当兔年遇上MacOS：兔年应用坞

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

开篇

之所以有这个想法呢，是因为个人比较喜欢清爽的桌面，不希望有应用图标，和一大堆快捷方式，同时又希望打开应用很方便。于是乎，我想到了Mac的Dock栏，也就是应用坞。我几年前使用MyDockFinder这款软件实现的，但是最近好像收费了，在steam里卖20多块钱吧，如果设置的好的话，桌面什么都没有，应用坞也是靠激活条激活。所以，我萌生了一个想法，把应用坞和兔年元素结合起来。

首先，依然是放一下效果图。

附上码上掘金的调试源码：

下面开始实现它。

思路

首先是布局，ul和li固定到视口最下面，里面的表情用输入法里得表情，这个应该是能用UTF16编码表示。然后绘制好对应的样式。然后获取每个li绑定一个点击事件，事件是把每个li给循环上下移动，做成应用启动时的跳动动画。之后给每个里绑定一个mousemove、mouseleave事件，鼠标经过对应的li时，给这个li缩放一下，字体调整一下，并修改相应的位置，实现鼠标移入，图标放大且滑动的效果。

实现过程

HTML

这没什么说的，就是无序列表

<div class="glass">
    <ul class="dock">
        <li>😂</li>
        <li>😊</li>
        <li>😜</li>
        <li>😍</li>
        <li>🤩</li>
        <li>🤣</li>
        <li>😘</li>
    </ul>
</div>

CSS

这里不仅要使用一下自定义属性，还要事先定义好对应的动画，做到各司其职，让js只去修改对应的类名。

.dock {
  --scale: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dock li {
  font-size: calc(50px * var(--scale));
  padding: 0;
  cursor: default;
  position: relative;
  top: calc((50px * var(--scale) - 50px) / 2 * -1);
  transition: 15ms all ease-out;
}
.dock li.loading {
  animation: 1s loading ease-in infinite;
}
@keyframes loading {
  0%, 100% {
      transform: translateY(0px);
  }
  60% {
      transform: translateY(-40px);
  }
}

JS

js是重点，得绑定两种不同的事件，分别控制点击跳动和划入缩放。

li.addEventListener('click', e => {
      e.currentTarget.classList.add('loading')
    })
    
li.addEventListener('mousemove', e => {
      let item = e.target
      let itemRect = item.getBoundingClientRect()
      let offset = Math.abs(e.clientX - itemRect.left) / itemRect.width

      let prev = item.previousElementSibling || null
      let next = item.nextElementSibling || null

      let scale = 0.6

      resetScale()

      if (prev) {
        prev.style.setProperty('--scale', 1 + scale * Math.abs(offset - 1))
      }

      item.style.setProperty('--scale', 1 + scale)

      if (next) {
        next.style.setProperty('--scale', 1 + scale * offset)
      }
    })
  })

有一个小BUG，点击后会一直跳动没有去除那个属性名，可以设个定时器，让他跳几秒就算了。

到此，兔年版应用坞就基本完成了。

我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。 兔了个兔（九） - 码上掘金 (juejin.cn)

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！