React 實現愛心花園動畫

主頁：

import React, { useEffect, useRef, useState } from 'react';
import '@/assets/css/Love.less';
import { Garden } from '@/utils/GardenClasses';// 組件屬性接口
interface LoveAnimationProps {startDate?: Date; // 可選的開始日期messages?: {      // 可自定義的文本消息initial?: string;   // 初始文字love?: string;      // 告白文字signature?: string; // 落款};
}// 默認開始日期：2010年11月2日20點
const DEFAULT_START_DATE = new Date(2010, 10, 2, 20, 0, 0);// 默認文本配置
const DEFAULT_MESSAGES = {initial: "親愛的，這是我們相愛在一起的時光。",love: "愛你直到永永遠遠。",signature: "-愛你的人"
};const LoveAnimation: React.FC<LoveAnimationProps> = ({startDate = DEFAULT_START_DATE,messages = DEFAULT_MESSAGES
}) => {// ========== Refs定義 ==========const canvasRef = useRef<HTMLCanvasElement>(null);      // 畫布引用const gardenRef = useRef<Garden | null>(null);          // 花園實例引用const loveHeartRef = useRef<HTMLDivElement>(null);      // 心形容器const contentRef = useRef<HTMLDivElement>(null);        // 內容容器const codeRef = useRef<HTMLDivElement>(null);           // 代碼區域const wordsRef = useRef<HTMLDivElement>(null);          // 文字區域const messagesRef = useRef<HTMLDivElement>(null);       // 消息區域const loveURef = useRef<HTMLDivElement>(null);          // 告白區域const elapseClockRef = useRef<HTMLDivElement>(null);    // 計時器const errorMsgRef = useRef<HTMLDivElement>(null);       // 錯誤信息// ========== 狀態定義 ==========const [showMessages, setShowMessages] = useState(false); // 是否顯示消息const [showLoveU, setShowLoveU] = useState(false);      // 是否顯示告白const [codeContent, setCodeContent] = useState('');     // 代碼內容const [showCursor, setShowCursor] = useState(false);    // 是否顯示光標const [clearVal, setClearVal] = useState(true);         // 清除標志const clearValRef = useRef(clearVal);                   // 清除標志的ref// 動畫定時器存儲const animationRefs = useRef<{ intervals: NodeJS.Timeout[]; // 間隔定時器timeouts: NodeJS.Timeout[];  // 延時定時器}>({ intervals: [], timeouts: [] });// 完整的代碼內容（帶HTML格式）const fullCodeContent = `<br />/**<br />*2013—02-14,<br />*2013-02-28.<br />*/<br />Boy name = <span class="keyword">Mr</span> ***<br />Girl name = <span class="keyword">Mrs</span> ***<br /><span class="comments">// Fall in love river.</span><br />The boy love the girl;<br /><span class="comments">// They love each other.</span><br />The girl loved the boy;<br /><span class="comments">// AS time goes on.</span><br />The boy can not be separated the girl;<br /><span class="comments">// At the same time.</span><br />The girl can not be separated the boy;<br /><span class="comments">// Both wind and snow all over the sky.</span><br /><span class="comments">// Whether on foot or 5 kilometers.</span><br /><span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br /><span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br /><span class="comments">// Whether it is right now</span><br /><span class="comments">// Still in the distant future.</span><br />The boy has but one dream;<br /><span class="comments">// The boy wants the girl could well have been happy.</span><br />I want to say:<br />Baby, I love you forever;`;// ========== 主要副作用 ==========useEffect(() => {if (!canvasRef.current || !loveHeartRef.current || !contentRef.current) return;// 檢查瀏覽器是否支持canvasif (!document.createElement('canvas').getContext) {if (errorMsgRef.current) {errorMsgRef.current.innerHTML ="您的瀏覽器不支持HTML5！<br/>推薦使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+";}if (codeRef.current) {codeRef.current.style.display = "none";}return;}// 初始化畫布const gardenCanvas = canvasRef.current;gardenCanvas.width = loveHeartRef.current.offsetWidth;gardenCanvas.height = loveHeartRef.current.offsetHeight;// 獲取2D上下文const ctx = gardenCanvas.getContext('2d');if (!ctx) return;// 設置混合模式ctx.globalCompositeOperation = "lighter";// 創建花園實例gardenRef.current = new Garden(ctx, gardenCanvas);// 調整布局adjustLayout();// 花園渲染循環const renderInterval = setInterval(() => {gardenRef.current?.render();}, Garden.options.growSpeed);animationRefs.current.intervals.push(renderInterval);// 啟動代碼打字效果typeWriterCodeContent();// 光標閃爍效果const cursorInterval = setInterval(() => {if (clearValRef.current) {setShowCursor(prev => !prev);} else {clearInterval(cursorInterval);setShowCursor(false);}}, 600);animationRefs.current.intervals.push(cursorInterval);// 5秒后開始心形動畫const heartTimeout = setTimeout(() => {startHeartAnimation();}, 5000);animationRefs.current.timeouts.push(heartTimeout);// 初始化計時器timeElapse(startDate);const timeInterval = setInterval(() => timeElapse(startDate), 500);animationRefs.current.intervals.push(timeInterval);// 窗口大小變化監聽const handleResize = () => adjustLayout();window.addEventListener('resize', handleResize);// 清理函數return () => {animationRefs.current.intervals.forEach(interval => clearInterval(interval));animationRefs.current.timeouts.forEach(timeout => clearTimeout(timeout));window.removeEventListener('resize', handleResize);};}, [startDate]);// 顯示消息后的副作用useEffect(() => {if (showMessages) {adjustWordsPosition();const timer = setTimeout(() => setShowLoveU(true), 5000);animationRefs.current.timeouts.push(timer);return () => clearTimeout(timer);}}, [showMessages]);// 顯示告白后的副作用useEffect(() => {if (showLoveU && loveURef.current) {const loveUContent = `${messages.love}<br/><div class='signature'>${messages.signature}</div>`;loveURef.current.innerHTML = '';typeWriter(loveURef.current, loveUContent, 75);}}, [showLoveU, messages]);// 同步clearVal狀態到refuseEffect(() => {clearValRef.current = clearVal;}, [clearVal]);// ========== 工具函數 ==========/*** 代碼打字效果*/const typeWriterCodeContent = () => {setShowCursor(true);let i = 0;const speed = 10; // 打字速度(毫秒/字符)const typing = setInterval(() => {if (i < fullCodeContent.length) {setCodeContent(fullCodeContent.substring(0, i + 1));i++;} else {clearInterval(typing);setClearVal(false); // 打字完成，停止光標閃爍}}, speed);animationRefs.current.intervals.push(typing);};/*** 計算心形曲線上的點* @param angle 角度(弧度)* @returns [x, y]坐標*/const getHeartPoint = (angle: number): [number, number] => {// 心形曲線參數方程const x = 19.5 * (16 * Math.pow(Math.sin(angle), 3));const y = -20 * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));// 計算相對于心形容器中心的坐標const offsetX = loveHeartRef.current?.offsetWidth ? loveHeartRef.current.offsetWidth / 2 : 0;const offsetY = loveHeartRef.current?.offsetHeight ? loveHeartRef.current.offsetHeight / 2 - 55 : 0;return [offsetX + x, offsetY + y];};/*** 開始心形動畫*/const startHeartAnimation = () => {const interval = 50; // 花朵生成間隔(毫秒)const speed = 0.2;   // 角度變化速度let angle = 10;      // 起始角度const points: [number, number][] = []; // 已生成的點const animation = setInterval(() => {const point = getHeartPoint(angle);let valid = true;// 檢查新點與已有點的距離for (const p of points) {const distance = Math.sqrt(Math.pow(p[0] - point[0], 2) + Math.pow(p[1] - point[1], 2));if (distance < Garden.options.bloomRadius.max * 1.3) {valid = false;break;}}// 如果點有效，創建花朵if (valid && gardenRef.current) {points.push(point);gardenRef.current.createRandomBloom(point[0], point[1]);}// 動畫結束條件if (angle >= 30) {clearInterval(animation);setShowMessages(true); // 顯示消息} else {angle += speed; // 繼續動畫}}, interval);animationRefs.current.intervals.push(animation);};/*** 通用打字機效果* @param element 目標DOM元素* @param text 要顯示的文本* @param speed 打字速度(毫秒/字符)*/const typeWriter = (element: HTMLElement, text: string, speed: number) => {let i = 0;element.innerHTML = '';const typing = setInterval(() => {if (i < text.length) {const char = text.substr(i, 1);// 跳過HTML標簽if (char === '<') {const closingIndex = text.indexOf('>', i);i = closingIndex === -1 ? text.length : closingIndex + 1;} else {i++;}// 更新內容并添加光標element.innerHTML = text.substring(0, i) + (i % 2 ? '_' : '');} else {clearInterval(typing);}}, speed);animationRefs.current.intervals.push(typing);};/*** 計算并顯示戀愛時長* @param date 開始日期*/const timeElapse = (date: Date) => {if (!elapseClockRef.current) return;const now = new Date();const seconds = (now.getTime() - date.getTime()) / 1000;// 計算天數const days = Math.floor(seconds / (3600 * 24));let remaining = seconds % (3600 * 24);// 計算小時const hours = Math.floor(remaining / 3600);remaining %= 3600;// 計算分鐘const minutes = Math.floor(remaining / 60);remaining %= 60;// 格式化顯示(補零)const formattedHours = hours < 10 ? `0${hours}` : hours.toString();const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes.toString();const formattedSeconds = remaining < 10 ? `0${Math.floor(remaining)}` : Math.floor(remaining).toString();// 更新DOMelapseClockRef.current.innerHTML = `<span class="digit">${days}</span> 天 <span class="digit">${formattedHours}</span> 小時 <span class="digit">${formattedMinutes}</span> 分鐘 <span class="digit">${formattedSeconds}</span> 秒`;};/*** 調整文字位置*/const adjustWordsPosition = () => {if (!wordsRef.current || !canvasRef.current) return;const garden = canvasRef.current;const words = wordsRef.current;words.style.position = 'absolute';words.style.top = `${garden.offsetTop + 195}px`;words.style.left = `${garden.offsetLeft + 70}px`;};/*** 調整代碼區域位置*/const adjustCodePosition = () => {if (!codeRef.current || !canvasRef.current) return;const garden = canvasRef.current;const code = codeRef.current;code.style.marginTop = `${(garden.offsetHeight - code.offsetHeight) / 2}px`;};/*** 響應式布局調整*/const adjustLayout = () => {if (!contentRef.current || !loveHeartRef.current || !codeRef.current) return;const content = contentRef.current;const loveHeart = loveHeartRef.current;const code = codeRef.current;// 計算合適尺寸const width = loveHeart.offsetWidth + code.offsetWidth;const height = Math.max(loveHeart.offsetHeight, code.offsetHeight);// 設置容器尺寸(考慮窗口邊界)content.style.width = `${Math.min(width, window.innerWidth - 40)}px`;content.style.height = `${Math.min(height, window.innerHeight - 40)}px`;// 居中顯示content.style.marginTop = `${Math.max((window.innerHeight - content.offsetHeight) / 2, 10)}px`;content.style.marginLeft = `${Math.max((window.innerWidth - content.offsetWidth) / 2, 10)}px`;// 調整代碼區域垂直居中adjustCodePosition();};/*** 渲染代碼區域*/const renderCodeContent = () => {return (<div id="code" ref={codeRef}>{/* 使用dangerouslySetInnerHTML顯示帶HTML格式的代碼 */}<div dangerouslySetInnerHTML={{ __html: codeContent }} />{/* 閃爍的光標(心形) */}{showCursor && (<span className="heart-cursor" style={{ color: 'red' }}>?</span>)}</div>);};// ========== 組件渲染 ==========return (<div className="btnbg lovePage">{/* 背景層 */}<div id="mainDiv">{/* 主內容容器 */}<div id="content" ref={contentRef}>{/* 左側：代碼區域 */}{renderCodeContent()}{/* 右側：心形動畫區域 */}<div id="loveHeart" ref={loveHeartRef}>{/* 花園畫布 */}<canvas id="garden" ref={canvasRef}></canvas>{/* 情話文本區域(默認隱藏) */}<divid="words"ref={wordsRef}style={{display: showMessages ? 'block' : 'none',opacity: showMessages ? 1 : 0,transition: 'opacity 1s ease-in-out'}}>{/* 初始消息 */}<div id="messages" ref={messagesRef}>{messages.initial}{/* 戀愛計時器 */}<div id="elapseClock" ref={elapseClockRef}></div></div>{/* 最終告白(默認隱藏) */}<divid="loveu"ref={loveURef}style={{display: showLoveU ? 'block' : 'none',opacity: showLoveU ? 1 : 0,transition: 'opacity 1s ease-in-out'}}/></div></div></div></div>{/* 瀏覽器兼容性錯誤提示 */}<div id="errorMsg" ref={errorMsgRef}></div></div>);
};export default LoveAnimation;

GardenClasses.ts文件：

// GardenClasses.ts
export interface VectorProps {x: number;y: number;
}export interface PetalOptions {stretchA: number;stretchB: number;startAngle: number;angle: number;growFactor: number;bloom: Bloom;
}export interface BloomOptions {p: Vector;r: number;c: string;pc: number;garden: Garden;
}export interface GardenOptions {petalCount: { min: number; max: number };petalStretch: { min: number; max: number };growFactor: { min: number; max: number };bloomRadius: { min: number; max: number };density: number;growSpeed: number;color: {rmin: number;rmax: number;gmin: number;gmax: number;bmin: number;bmax: number;opacity: number;};tanAngle: number;
}export class Vector {x: number;y: number;constructor(x: number, y: number) {this.x = x;this.y = y;}rotate(angle: number): Vector {const x = this.x;const y = this.y;this.x = Math.cos(angle) * x - Math.sin(angle) * y;this.y = Math.sin(angle) * x + Math.cos(angle) * y;return this;}mult(factor: number): Vector {this.x *= factor;this.y *= factor;return this;}clone(): Vector {return new Vector(this.x, this.y);}length(): number {return Math.sqrt(this.x * this.x + this.y * this.y);}subtract(v: Vector): Vector {this.x -= v.x;this.y -= v.y;return this;}set(x: number, y: number): Vector {this.x = x;this.y = y;return this;}
}export class Petal {stretchA: number;stretchB: number;startAngle: number;angle: number;bloom: Bloom;growFactor: number;r: number;isfinished: boolean;constructor(options: PetalOptions) {this.stretchA = options.stretchA;this.stretchB = options.stretchB;this.startAngle = options.startAngle;this.angle = options.angle;this.bloom = options.bloom;this.growFactor = options.growFactor;this.r = 1;this.isfinished = false;}draw(): void {const ctx = this.bloom.garden.ctx;const e = new Vector(0, this.r).rotate(Garden.degrad(this.startAngle));const d = e.clone().rotate(Garden.degrad(this.angle));const c = e.clone().mult(this.stretchA);const b = d.clone().mult(this.stretchB);ctx.strokeStyle = this.bloom.c;ctx.beginPath();ctx.moveTo(e.x, e.y);ctx.bezierCurveTo(c.x, c.y, b.x, b.y, d.x, d.y);ctx.stroke();}render(): void {if (this.r <= this.bloom.r) {this.r += this.growFactor;this.draw();} else {this.isfinished = true;}}
}export class Bloom {p: Vector;r: number;c: string;pc: number;petals: Petal[];garden: Garden;constructor(options: BloomOptions) {this.p = options.p;this.r = options.r;this.c = options.c;this.pc = options.pc;this.petals = [];this.garden = options.garden;this.init();this.garden.addBloom(this);}draw(): void {let isFinished = true;this.garden.ctx.save();this.garden.ctx.translate(this.p.x, this.p.y);for (const petal of this.petals) {petal.render();isFinished = isFinished && petal.isfinished;}this.garden.ctx.restore();if (isFinished) {this.garden.removeBloom(this);}}init(): void {const angle = 360 / this.pc;const startAngle = Garden.randomInt(0, 90);for (let i = 0; i < this.pc; i++) {this.petals.push(new Petal({stretchA: Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max),stretchB: Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max),startAngle: startAngle + i * angle,angle: angle,growFactor: Garden.random(Garden.options.growFactor.min, Garden.options.growFactor.max),bloom: this,}));}}
}export class Garden {blooms: Bloom[];element: HTMLCanvasElement;ctx: CanvasRenderingContext2D;static options: GardenOptions = {petalCount: { min: 8, max: 15 },petalStretch: { min: 0.1, max: 3 },growFactor: { min: 0.1, max: 1 },bloomRadius: { min: 8, max: 10 },density: 10,growSpeed: 1000 / 60,color: {rmin: 128,rmax: 255,gmin: 0,gmax: 128,bmin: 0,bmax: 128,opacity: 0.1,},tanAngle: 60,};constructor(ctx: CanvasRenderingContext2D, element: HTMLCanvasElement) {this.blooms = [];this.element = element;this.ctx = ctx;}render(): void {for (const bloom of this.blooms) {bloom.draw();}}addBloom(bloom: Bloom): void {this.blooms.push(bloom);}removeBloom(bloom: Bloom): void {const index = this.blooms.indexOf(bloom);if (index !== -1) {this.blooms.splice(index, 1);}}createRandomBloom(x: number, y: number): void {this.createBloom(x,y,Garden.randomInt(Garden.options.bloomRadius.min, Garden.options.bloomRadius.max),Garden.randomrgba(Garden.options.color.rmin,Garden.options.color.rmax,Garden.options.color.gmin,Garden.options.color.gmax,Garden.options.color.bmin,Garden.options.color.bmax,Garden.options.color.opacity),Garden.randomInt(Garden.options.petalCount.min, Garden.options.petalCount.max));}createBloom(x: number, y: number, radius: number, color: string, petalCount: number): void {new Bloom({p: new Vector(x, y),r: radius,c: color,pc: petalCount,garden: this,});}clear(): void {this.blooms = [];this.ctx.clearRect(0, 0, this.element.width, this.element.height);}static random(min: number, max: number): number {return Math.random() * (max - min) + min;}static randomInt(min: number, max: number): number {return Math.floor(Math.random() * (max - min + 1)) + min;}static readonly circle = 2 * Math.PI;static degrad(angle: number): number {return (Garden.circle / 360) * angle;}static raddeg(angle: number): number {return (angle / Garden.circle) * 360;}static rgba(r: number, g: number, b: number, a: number): string {return `rgba(${r},${g},${b},${a})`;}static randomrgba(rmin: number,rmax: number,gmin: number,gmax: number,bmin: number,bmax: number,a: number): string {const r = Math.round(Garden.random(rmin, rmax));const g = Math.round(Garden.random(gmin, gmax));const b = Math.round(Garden.random(bmin, bmax));const threshold = 5;if (Math.abs(r - g) <= threshold &&Math.abs(g - b) <= threshold &&Math.abs(b - r) <= threshold) {return Garden.rgba(rmin, rmax, gmin, gmax, bmin, bmax, a);} else {return Garden.rgba(r, g, b, a);}}
}

Love.less

// 主色調（基于 #ffc0cb 擴展的漸變色系）
@color-1: #ffc0cb; // 粉紅
@color-2: #ffb6c1; // 稍暗的粉
@color-3: #ffd1dc; // 淺粉
@color-4: #ffdfed; // 更淺的粉
@color-5: #ffecf2; // 接近白色
@font-face {font-family: digit;src: url('digital-7_mono.ttf') format("truetype");
}
// 動畫定義
.keyframes() {@keyframes gentleFlow {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
}// 主背景樣式
.lovePage {min-height: 100vh;background: linear-gradient(45deg,@color-1,@color-2,@color-3,@color-4,@color-5,@color-1 );background-size: 300% 300%;animation: gentleFlow 12s ease infinite;position: relative;overflow: hidden;.keyframes();// 光斑效果（增強層次感）&::before {content: '';position: absolute;width: 200%;height: 200%;background:radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 30%),radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 30%);animation: gentleFlow 20s linear infinite reverse;}}canvas {padding: 0;margin: 0;
}div.btnbg {width: 100%;height: 100%;}#code,#messages,#loveu{color: #333;
}
#mainDiv {width: 100%;height: 100%
}#loveHeart {width: 670px;height: 625px
}#garden {width: 100%;height: 100%
}#elapseClock {text-align: right;font-size: 18px;margin-top: 10px;margin-bottom: 10px
}#words {font-family: "sans-serif";width: 500px;font-size: 24px;color: #666
}#elapseClock .digit {font-family: "digit";font-size: 36px
}#loveu {padding: 5px;font-size: 22px;margin-top: 40px;margin-right: 120px;text-align: right;display: none
}#loveu .signature {margin-top: 10px;font-size: 20px;font-style: italic
}#clickSound {display: none
}
#content{display: flex;justify-content: center;align-items: center;
}#code {width: 440px;height: 400px;color: #333;font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";font-size: 12px;margin: 0 !important;
}.string {color: #2a36ff
}.keyword {color: #7f0055;font-weight: bold
}.placeholder {margin-left: 15px
}.space {margin-left: 7px
}.comments {color: #3f7f5f
}#copyright {margin-top: 10px;text-align: center;width: 100%;color: #666
}#errorMsg {width: 100%;text-align: center;font-size: 24px;position: absolute;top: 100px;left: 0
}#copyright a {color: #666
}
.heart-cursor {animation: blink 1s infinite;font-size: 1em;vertical-align: middle;
}@keyframes blink {0%, 100% { opacity: 1; }50% { opacity: 0; }
}