這是我的項目記錄系列文章第二篇，在上一篇我簡單介紹了項目的初衷和流程等。現在這個項目已經做了一段時間，對 Hooks 和 TypeScript 也有了一定認識，相信優化和記錄能有更多理解，同時可能收獲大家的指導。

本篇文章我將梳理 Docker 效果的實現過程，你可以在我的項目 代碼（歡迎 watch 和 star）體驗，同時本文完整代碼均在 sandbox 供你把玩。

基礎結構搭建

我們會在 app 文件下創建 footer，在其內部引入我們的 Docker 組件，我們找到幾張圖標 png ，以圖標名組成 dockList 通過 require 引入在 Docker 內部，它們就是本次主角，同時通過使用 useRef 鉤子給它們的父親 div 綁定一個 ref，便于后續操作。

我們給每個圖標一個默認寬度 defaultWidth，由此可得到背景 div 的寬度和高度

import React, { useState, useRef } from "react";

export const Docker = () => {
  const [defaultWidth] = useState(76);
  const [dockList] = useState<string[]>([
    "Finder.png",
    "Launchpad.png",
    "PrefApp.png",
    "Chrome.png",
    "Terminal.png",
    "Calculator.png",
    "Drawing.png"
  ]);
  const [dockStyle, setDockStyle] = useState({
    width: defaultWidth * dockList.length,
    height: defaultWidth
  });
  const dockRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={dockRef} style={dockStyle}>
      {dockList.map((item, index) => {
        return (
          <img src={require("./image/" + item)} alt={item} key={index + item} />
        );
      })}
    </div>
  );
};

初始化樣式

這里主要是設定每個圖片的默認寬度和背景 div 的寬度和高度

同時這里用了 mouseleave，事實上也是鼠標離開 dock 事件所需函數（看下面就懂了），此處的 setDockStyle 事實上是重置時候用的。

const mouseleave = useCallback(() => {
  if (!dockRef.current) {
    return;
  }
  setDockStyle({
    width: defaultWidth * dockList.length,
    height: defaultWidth
  });
  const imgList = dockRef.current.childNodes;
  for (let i = 0; i < imgList.length; i++) {
    const img = imgList[i] as HTMLImageElement;
    img.width = defaultWidth;
  }
}, [defaultWidth, setDockStyle, dockList]);

useEffect(() => {
  mouseleave();
}, [mouseleave]);

css 如下

.App {
  footer{
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    div{
      display: flex;
      align-items: flex-end;
      background-color: rgba(222, 223, 227, 0.7);
      box-shadow: rgba(0, 0, 0, 0.31) 0px 0px 1px, rgba(0, 0, 0, 0.18) 0px 0px 5px,
        rgba(0, 0, 0, 0.3) 0px 8px 50px;
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
    }
  }
}

默認效果已經有了

事件邏輯

我們需要通過監聽 Docker div 的鼠標進入和離開事件，一般我們使用 useCallback 緩存事件，同時使用 useEffect 作事件變化監聽處理。mouseleave 我們已經在上面展示，不作展開。

const mousemove = useCallback(e => {
  console.log(e);
}, []);
const mouseleave = useCallback(e => {
  console.log(e);
}, []);

useEffect(() => {
  if (!dockRef.current) {
    return;
  }
  const dockBackground: HTMLDivElement = dockRef.current;
  dockBackground.addEventListener("mousemove", mousemove);
  dockBackground.addEventListener("mouseleave", mouseleave);
  return () => {
    dockBackground.removeEventListener("mousemove", mousemove);
    dockBackground.removeEventListener("mouseleave", mouseleave);
  };
}, [mousemove, mouseleave]);

Docker 動效思路

如圖箭頭，我們根據鼠標事件位置與各圖標中心點距離來調整圖標大小，通過該差值與設定寬度（這里我使用 dockStyle 初始寬度）比值作為圖標放大參考，這里我使用的放大倍數為 2，直接看代碼：

const getOffset = useCallback(
  (el: HTMLElement, offset: "top" | "left"): number => {
    const elOffset = offset === "top" ? el.offsetTop : el.offsetLeft;
    if (el.offsetParent == null) {
      return elOffset;
    }
    return elOffset + getOffset(el.offsetParent as HTMLElement, offset);
  },
  []
);

const mousemove = useCallback(
  ({ clientX, clientY }) => {
    if (!dockRef.current) {
      return;
    }
    const imgList = dockRef.current.childNodes;
    let dockStyleWidth = 0;
    for (let i = 0; i < imgList.length; i++) {
      const img = imgList[i] as HTMLImageElement;
      const x = img.offsetLeft + defaultWidth / 2 - clientX;
      const y =
        img.offsetTop +
        getOffset(dockRef.current, "top") +
        img.offsetHeight / 2 -
        clientY;
      let imgScale =
        1 - Math.sqrt(x * x + y * y) / (imgList.length * defaultWidth);
      if (imgScale < 0.5) {
        imgScale = 0.5;
      }
      img.width = defaultWidth * 2 * imgScale;
      dockStyleWidth = dockStyleWidth + img.width;
    }
    setDockStyle({
      ...dockStyle,
      ...{ width: dockStyleWidth }
    });
  },
  [defaultWidth, getOffset, dockStyle]
);

至此，Docker 動效就完成了。我們還可以通過修改 dockStyleWidth 來調整圖標大小，當然還有動效放大倍數，甚至 Docker 位置，做到與 Mac 桌面一樣，這也正式我的項目在做的東西。

小結

在寫這篇文章的同時，也對代碼和過程有了梳理，目前該項目已完成部分功能，包括簡單設置，基礎計算器，基礎畫板等，即使是這些已有功能也有很多需要完善的地方。

后續我會慢慢優化，并在相應模塊代碼優化到一定程度時不定時更新系列文章。

如果你喜歡這篇文章，不要忘了給我點贊。??

本文參考：
Mac Dock 效果及原理（勾股定理）