這是我的項(xiàng)目記錄系列文章第二篇，在上一篇我簡(jiǎn)單介紹了項(xiàng)目的初衷和流程等∈厣欤現(xiàn)在這個(gè)項(xiàng)目已經(jīng)做了一段時(shí)間滑肉，對(duì) Hooks 和 TypeScript 也有了一定認(rèn)識(shí)反肋，相信優(yōu)化和記錄能有更多理解，同時(shí)可能收獲大家的指導(dǎo)贷笛。
本篇文章我將梳理 Docker 效果的實(shí)現(xiàn)過程应又，你可以在我的項(xiàng)目 代碼（歡迎 watch 和 star）體驗(yàn)，同時(shí)本文完整代碼均在 sandbox 供你把玩乏苦。
基礎(chǔ)結(jié)構(gòu)搭建
我們會(huì)在 app 文件下創(chuàng)建 footer丁频，在其內(nèi)部引入我們的 Docker 組件，我們找到幾張圖標(biāo) png 邑贴，以圖標(biāo)名組成 dockList 通過 require 引入在 Docker 內(nèi)部席里，它們就是本次主角，同時(shí)通過使用 useRef 鉤子給它們的父親 div 綁定一個(gè) ref拢驾，便于后續(xù)操作奖磁。
我們給每個(gè)圖標(biāo)一個(gè)默認(rèn)寬度 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>
);
};
初始化樣式
這里主要是設(shè)定每個(gè)圖片的默認(rèn)寬度和背景 div 的寬度和高度
同時(shí)這里用了 mouseleave繁疤，事實(shí)上也是鼠標(biāo)離開 dock 事件所需函數(shù)（看下面就懂了）咖为，此處的 setDockStyle 事實(shí)上是重置時(shí)候用的秕狰。
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;
}
}
}
默認(rèn)效果已經(jīng)有了
事件邏輯
我們需要通過監(jiān)聽 Docker div 的鼠標(biāo)進(jìn)入和離開事件，一般我們使用 useCallback 緩存事件躁染，同時(shí)使用 useEffect 作事件變化監(jiān)聽處理鸣哀。mouseleave 我們已經(jīng)在上面展示，不作展開吞彤。
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 動(dòng)效思路
如圖箭頭我衬，我們根據(jù)鼠標(biāo)事件位置與各圖標(biāo)中心點(diǎn)距離來調(diào)整圖標(biāo)大小，通過該差值與設(shè)定寬度（這里我使用 dockStyle 初始寬度）比值作為圖標(biāo)放大參考饰恕，這里我使用的放大倍數(shù)為 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 動(dòng)效就完成了埋嵌。我們還可以通過修改 dockStyleWidth 來調(diào)整圖標(biāo)大小破加，當(dāng)然還有動(dòng)效放大倍數(shù)，甚至 Docker 位置雹嗦，做到與 Mac 桌面一樣范舀，這也正式我的項(xiàng)目在做的東西。
小結(jié)
在寫這篇文章的同時(shí)了罪，也對(duì)代碼和過程有了梳理尿背，目前該項(xiàng)目已完成部分功能，包括簡(jiǎn)單設(shè)置捶惜，基礎(chǔ)計(jì)算器田藐，基礎(chǔ)畫板等，即使是這些已有功能也有很多需要完善的地方吱七。
后續(xù)我會(huì)慢慢優(yōu)化汽久，并在相應(yīng)模塊代碼優(yōu)化到一定程度時(shí)不定時(shí)更新系列文章。
如果你喜歡這篇文章踊餐，不要忘了給我點(diǎn)贊景醇。??
本文參考：
Mac Dock 效果及原理（勾股定理）
