```javascript 'use client'; import React, { useState, useEffect, useRef } from 'react'; // 配置常量 const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const BG_COLOR = "#0f172a"; // 用户指定的背景色 const PRIMARY_COLOR = "#06b6d4"; // 科技蓝/青色 (Cyan) const DANGER_COLOR = "#ef4444"; // 警告红 (Red) const SUCCESS_COLOR = "#10b981"; // 成功绿 (Green) const TEXT_MAIN = "#f1f5f9"; // 主要文字 const TEXT_SUB = "#94a3b8"; // 次要文字 // 缓动函数 const easeOutBack = (x) => { const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2); }; const easeInOutQuint = (x) => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2; export default function TechFlashSMSAnimation() { const [time, setTime] = useState(0); const requestRef = useRef(); // 动画循环 useEffect(() => { const startTime = performance.now(); const animate = (now) => { setTime((now - startTime) / 1000); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 周期逻辑: 总时长 15秒 // 0-5s: 传统短信痛点 (Scene 1) // 5-10s: 闪信解决方案 (Scene 2) // 10-15s: 核心优势展示 (Scene 3) const CYCLE = 15; const t = time % CYCLE; // --- 场景 1: 痛点 (0s - 5s) --- const s1Active = t >= 0 && t < 5; // 进度: 0->1 const s1Progress = s1Active ? (t / 5) : (t >= 5 ? 1 : 0); // 动画变量 const msgTravel = Math.min(1, Math.max(0, (t - 0.5) * 1.5)); // 信封移动 const blockImpact = Math.min(1, Math.max(0, (t - 1.2) * 5)); // 拦截碰撞 const painTextReveal = Math.min(1, Math.max(0, (t - 1.8) * 2)); // 文字显现 const shakeX = (t > 1.2 && t < 1.5) ? Math.sin(t * 50) * 5 : 0; // 撞击震动 // --- 场景 2: 闪信 (5s - 10s) --- const s2Active = t >= 5 && t < 10; const s2LocalT = Math.max(0, t - 5); const phoneEnter = Math.min(1, s2LocalT * 1.5); const callWave = s2Active ? (Math.sin(s2LocalT * 8) * 0.5 + 0.5) : 0; const popupScale = s2Active ? easeOutBack(Math.min(1, Math.max(0, (s2LocalT - 1) * 2))) : 0; const dissolve = Math.min(1, Math.max(0, (s2LocalT - 3.5) * 1.5)); // 阅后即焚 // --- 场景 3: 优势 (10s - 15s) --- const s3Active = t >= 10 && t < 15; const s3LocalT = Math.max(0, t - 10); const gridExpand = Math.min(1, s3LocalT * 0.8); return (

); } ```