'use client'; import React, { useState, useEffect, useRef } from 'react'; // 预设演示的颜色序列 (R, G, B) const COLOR_SEQUENCE = [ { r: 255, g: 0, b: 0, name: '红色 (Red)' }, { r: 0, g: 255, b: 0, name: '绿色 (Green)' }, { r: 0, g: 0, b: 255, name: '蓝色 (Blue)' }, { r: 255, g: 255, b: 0, name: '黄色 (Yellow = R+G)' }, { r: 0, g: 255, b: 255, name: '青色 (Cyan = G+B)' }, { r: 255, g: 0, b: 255, name: '洋红 (Magenta = R+B)' }, { r: 255, g: 255, b: 255, name: '白色 (White = R+G+B)' }, { r: 255, g: 128, b: 0, name: '橙色 (Orange)' }, { r: 128, g: 0, b: 128, name: '紫色 (Purple)' }, ]; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 辅助函数：十进制转8位二进制 const toBinary = (num: number) => num.toString(2).padStart(8, '0'); // 辅助函数：RGB转Hex const toHex = (r: number, g: number, b: number) => `#${[r, g, b].map(x => Math.round(x).toString(16).padStart(2, '0')).join('').toUpperCase()}`; // 线性插值 const lerp = (start: number, end: number, factor: number) => start + (end - start) * factor; export const ColorMixingPrinciple = () => { const [targetIndex, setTargetIndex] = useState(0); // 当前显示的颜色值（用于动画过渡） const [currentRGB, setCurrentRGB] = useState({ r: 0, g: 0, b: 0 }); const requestRef = useRef(); const startTimeRef = useRef(); // 自动循环切换颜色 useEffect(() => { const interval = setInterval(() => { setTargetIndex((prev) => (prev + 1) % COLOR_SEQUENCE.length); }, 4000); // 每4秒切换一次 return () => clearInterval(interval); }, []); // 动画循环：平滑过渡颜色数值 useEffect(() => { const target = COLOR_SEQUENCE[targetIndex]; const animate = () => { setCurrentRGB(prev => { // 简单的缓动效果 (Ease out) const factor = 0.05; const r = lerp(prev.r, target.r, factor); const g = lerp(prev.g, target.g, factor); const b = lerp(prev.b, target.b, factor); // 如果非常接近目标值，就不再更新以节省资源（可选，这里为了流畅一直跑） return { r, g, b }; }); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, [targetIndex]); const { r, g, b } = currentRGB; const intR = Math.round(r); const intG = Math.round(g); const intB = Math.round(b); const hex = toHex(r, g, b); const targetName = COLOR_SEQUENCE[targetIndex].name; // 布局参数 const centerX = VIEW_WIDTH / 2 + 100; const centerY = VIEW_HEIGHT / 2; const layerSize = 220; const offset = 60; // 层与层之间的偏移量 return ( ); };