重构：banner 中 logo 聚合分散动画

1. 效果展示

在线查看

2. 开始前说明

效果实现参考源码：Logo 聚集与散开

原效果代码基于 react jsx 类组件实现。依赖旧，代码冗余。

我将基于此进行重构，重构目标：

基于最新依赖包，用 ts + hook 实现效果
简化 dom 结构及样式
支持响应式

重构应该在还原的基础上，用更好的方式实现相同的效果。如果能让功能更完善，那就更好了。

在重构的过程中，注意理解：

严格模式
获取不到最新数据，setState 异步更新，useRef 同步最新数据
类组件生命周期，如何转换为 hook
canvas 上绘图获取图像数据，并对数据进行处理

3. 重构

说明：后面都是代码，对代码感兴趣的可以与源码比较一下；对效果感兴趣的，希望对你有帮助！

脚手架：vite-react+ts

3.1 删除多余文件及代码，只留最简单的结构

修改入口文件 main.tsx 为：

import ReactDOM from "react-dom/client";

import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

  <App />

);

注意：这儿删除了严格模式

删除 index.css
修改 App.tsx 为：

import "./App.css";

function App() {

  return (

    <div className="App">

    </div>

  );

}

export default App;

修改 App.css 为：

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

3.3 安装依赖

yarn add rc-tween-one lodash-es -S

yarn add @types/lodash-es -D

rc-tween-one：Ant Motion 的一个动效组件

3.4 重构代码

APP.tsx

import TweenOne from "rc-tween-one";

import LogoAnimate from "./logoAnimate";

import "./App.css";

function App() {

  return (

    <div className="App">

      <div className="banner">

        <div className="content">

          <TweenOne

            animation={{ opacity: 0, y: -30, type: "from", delay: 500 }}

            className="title"

          >

            logo 聚合分散

          </TweenOne>

        </div>

        <LogoAnimate />

      </div>

    </div>

  );

}

export default App;

App.css

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

.banner {

  width: 100%;

  height: 100vh;

  overflow: hidden;

  background: linear-gradient(135deg, #35aef8 0%, #7681ff 76%, #7681ff 76%);

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-evenly;

}

.banner .content {

  height: 35%;

  color: #fff;

}

.banner .content .title {

  font-size: 40px;

  background: linear-gradient(yellow, white);

  -webkit-background-clip: text;

  color: transparent;

}

.banner .logo-box {

  width: 300px;

  height: 330px;

}

.banner .logo-box * {

  pointer-events: none;

}

.banner .logo-box img {

  margin-left: 70px;

  transform: scale(1.5);

  margin-top: 60px;

  opacity: 0.4;

}

.banner .logo-box .point-wrap {

  position: absolute;

}

.banner .logo-box .point-wrap .point {

  border-radius: 100%;

}

@media screen and (max-width: 767px) {

  .banner {

    flex-direction: column;

  }

  .banner .content {

    order: 1;

  }

}

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

.banner {

  width: 100%;

  height: 100vh;

  overflow: hidden;

  background: linear-gradient(135deg, #35aef8 0%, #7681ff 76%, #7681ff 76%);

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-evenly;

}

.banner .content {

  height: 35%;

  color: #fff;

}

.banner .content .title {

  font-size: 30px;

}

.banner .logo-box {

  width: 300px;

  height: 330px;

}

.banner .logo-box * {

  pointer-events: none;

}

.banner .logo-box img {

  margin-left: 70px;

  transform: scale(1.5);

  margin-top: 60px;

  opacity: 0.4;

}

.banner .logo-box .point-wrap {

  position: absolute;

}

.banner .logo-box .point-wrap .point {

  border-radius: 100%;

}

@media screen and (max-width: 767px) {

  .banner {

    flex-direction: column;

  }

  .banner .content {

    order: 1;

  }

}

重点重构文件 logoAnimate.tsx

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

import TweenOne, { Ticker } from "rc-tween-one";

import type { IAnimObject } from "rc-tween-one";

import { cloneDeep, delay } from "lodash-es";

type Point = {

  wrapStyle: {

    left: number;

    top: number;

  };

  style: {

    width: number;

    height: number;

    opacity: number;

    backgroundColor: string;

  };

  animation: IAnimObject;

};

const logoAnimate = () => {

  const data = {

    image:

      "https://imagev2.xmcdn.com/storages/f390-audiofreehighqps/4C/D1/GKwRIDoHwne3AABEqQH4FjLV.png",

    w: 200, // 图片实际的宽度

    h: 200, // 图片实际的高度

    scale: 1.5, // 显示时需要的缩放比例

    pointSizeMin: 10, // 显示时圆点最小的大小

  };

  const intervalRef = useRef<string | null>(null);

  const intervalTime = 5000;

  const initAnimateTime = 800;

  const logoBoxRef = useRef<HTMLDivElement>(null);

  // 聚合：true，保证永远拿到的是最新的数据，useState是异步的，在interval中拿不到

  const gatherRef = useRef(true);

  // 数据变更，促使dom变更

  const [points, setPoints] = useState<Point[]>([]);

  // 同步 points 数据，保证永远拿到的是最新的数据，useState是异步的，在interval中拿不到

  const pointsRef = useRef(points);

  useEffect(() => {

    pointsRef.current = points;

  }, [points]);

  const setDataToDom = (imgData: Uint8ClampedArray, w: number, h: number) => {

    const pointArr: { x: number; y: number; r: number }[] = [];

    const num = Math.round(w / 10);

    for (let i = 0; i < w; i += num) {

      for (let j = 0; j < h; j += num) {

        const index = (i + j * w) * 4 + 3;

        if (imgData[index] > 150) {

          pointArr.push({

            x: i,

            y: j,

            r: Math.random() * data.pointSizeMin + 12

          });

        }

      }

    }

    const newPoints = pointArr.map((item, i) => {

      const opacity = Math.random() * 0.4 + 0.1;

      const point: Point = {

        wrapStyle: { left: item.x * data.scale, top: item.y * data.scale },

        style: {

          width: item.r * data.scale,

          height: item.r * data.scale,

          opacity: opacity,

          backgroundColor: `rgb(${Math.round(Math.random() * 95 + 160)}, 255, 255)`,

        },

        animation: {

          y: (Math.random() * 2 - 1) * 10 || 5,

          x: (Math.random() * 2 - 1) * 5 || 2.5,

          delay: Math.random() * 1000,

          repeat: -1,

          duration: 3000,

          ease: "easeInOutQuad",

        },

      };

      return point;

    });

    delay(() => {

      setPoints(newPoints);

    }, initAnimateTime + 150);

    intervalRef.current = Ticker.interval(updateTweenData, intervalTime);

  };

  const createPointData = () => {

    const { w, h } = data;

    const canvas = document.createElement("canvas");

    const ctx = canvas.getContext("2d");

    if (!ctx) return;

    ctx.clearRect(0, 0, w, h);

    canvas.width = w;

    canvas.height = h;

    const img = new Image();

    img.crossOrigin = "anonymous";

    img.src = data.image;

    img.onload = () => {

      ctx.drawImage(img, 0, 0);

      const data = ctx.getImageData(0, 0, w, h).data;

      setDataToDom(data, w, h);

    };

  };

  useEffect(() => {

    createPointData();

    return () => {

      removeInterval();

    };

  }, []);

  // 分散数据

  const disperseData = () => {

    if (!logoBoxRef.current || !logoBoxRef.current.parentElement) return;

    const rect = logoBoxRef.current.parentElement.getBoundingClientRect();

    const boxRect = logoBoxRef.current.getBoundingClientRect();

    const boxTop = boxRect.top - rect.top;

    const boxLeft = boxRect.left - rect.left;

    const newPoints = cloneDeep(pointsRef.current).map((item) => ({

      ...item,

      animation: {

        x: Math.random() * rect.width - boxLeft - item.wrapStyle.left,

        y: Math.random() * rect.height - boxTop - item.wrapStyle.top,

        opacity: Math.random() * 0.2 + 0.1,

        scale: Math.random() * 2.4 + 0.1,

        duration: Math.random() * 500 + 500,

        ease: "easeInOutQuint",

      },

    }));

    setPoints(newPoints);

  };

  // 聚合数据

  const gatherData = () => {

    const newPoints = cloneDeep(pointsRef.current).map((item) => ({

      ...item,

      animation: {

        x: 0,

        y: 0,

        opacity: Math.random() * 0.2 + 0.1,

        scale: 1,

        delay: Math.random() * 500,

        duration: 800,

        ease: "easeInOutQuint",

      },

    }));

    setPoints(newPoints);

  };

  const updateTweenData = () => {

    gatherRef.current ? disperseData() : gatherData();

    gatherRef.current = !gatherRef.current;

  };

  const removeInterval = () => {

    if (intervalRef.current) {

      Ticker.clear(intervalRef.current);

      intervalRef.current = null;

    }

  };

  const onMouseEnter = () => {

    if (!gatherRef.current) {

      updateTweenData();

    }

    removeInterval();

  };

  const onMouseLeave = () => {

    if (gatherRef.current) {

      updateTweenData();

    }

    intervalRef.current = Ticker.interval(updateTweenData, intervalTime);

  };

  return (

    <>

      {points.length === 0 ? (

        <TweenOne

          className="logo-box"

          animation={{

            opacity: 0.8,

            scale: 1.5,

            rotate: 35,

            type: "from",

            duration: initAnimateTime,

          }}

        >

          <img key="img" src={data.image} alt="" />

        </TweenOne>

      ) : (

        <TweenOne

          animation={{ opacity: 0, type: "from", duration: 800 }}

          className="logo-box"

          onMouseEnter={onMouseEnter}

          onMouseLeave={onMouseLeave}

          ref={logoBoxRef}

        >

          {points.map((item, i) => (

            <TweenOne className="point-wrap" key={i} style={item.wrapStyle}>

              <TweenOne

                className="point"

                style={item.style}

                animation={item.animation}

              />

            </TweenOne>

          ))}

        </TweenOne>

      )}

    </>

  );

};

export default logoAnimate;

巴特西