```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ---------------------------------------------------------------------- // CONFIGURATION & CONSTANTS // ---------------------------------------------------------------------- const WIDTH = 1080; const HEIGHT = 1920; const SCENE_DURATION = 6000; // ms per scene const TOTAL_SCENES = 6; const FADE_DURATION = 800; // ms // Colors const COLORS = { bgStart: '#07121A', bgEnd: '#050A10', cyan: '#00D1FF', purple: '#7C5CFF', white: '#FFFFFF', grid: '#1A2633', bull: '#00D1FF', // Using Cyan for Bullish/Structure bear: '#FF3B30', // Red for risk/bear neutral: '#8E8E93', textMain: '#E0E0E0', textSub: '#9CA3AF' }; // ---------------------------------------------------------------------- // HELPER FUNCTIONS // ---------------------------------------------------------------------- const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3); const easeInOutSine = (t) => -(Math.cos(Math.PI * t) - 1) / 2; // Generate a random path for graphs const generateGraphData = (points, volatility = 50) => { return Array.from({ length: points }, (_, i) => ({ x: i * (800 / (points - 1)), y: Math.sin(i * 0.5) * volatility + (Math.random() - 0.5) * 20 })); }; // ---------------------------------------------------------------------- // SUB-COMPONENTS // ---------------------------------------------------------------------- // 1. Scene: Title const SceneTitle = ({ progress }) => { const opacity = Math.min(1, progress * 3); const yOffset = (1 - easeOutCubic(Math.min(1, progress * 2))) * 100; return ( 一目均衡表结构识别而非预测 Ichimoku Kinko Hyo ); }; // 2. Scene: Cloud (Environment) const SceneCloud = ({ progress }) => { // Simulate price moving through cloud states // 0-0.33: Above, 0.33-0.66: Inside, 0.66-1.0: Below const stateIndex = Math.floor(progress * 3); const stateProgress = (progress * 3) % 1; const cloudPathA = "M100,800 C300,750 500,600 980,650 L980,950 C600,1000 400,850 100,900 Z"; // Dynamic labels const labels = [ { text: "价格在云上：多头环境", y: 500, color: COLORS.cyan }, { text: "价格在云内：震荡无序", y: 800, color: COLORS.neutral }, { text: "价格在云下：空头环境", y: 1100, color: COLORS.purple }, // Using purple for bear contrast here ]; const currentLabel = labels[Math.min(2, stateIndex)]; const ballY = 500 + stateIndex * 300 + Math.sin(progress * 20) * 20; return ( 云层 (Kumo) 先定环境 {/* The Cloud */} {/* Price Indicator */} {/* Dynamic Text Card */} {currentLabel.text} ); }; // 3. Scene: Base Line (Equilibrium) const SceneBaseLine = ({ progress }) => { // Logic: Price moves away from center, line glows red (tension), then pulls back const dist = Math.sin(progress * Math.PI * 2) * 300; // Oscillation const tension = Math.abs(dist) / 300; const lineColor = tension > 0.6 ? COLORS.purple : COLORS.cyan; return ( 基准线 (Kijun-sen) 均衡锚点：回归再出发 {/* Base Line */} 26周期均衡 {/* Rubber band effect */} {/* Price Object */} {/* Tension Label */} {tension > 0.6 && ( 乖离过大 -> 回归 )} {tension < 0.2 && ( 均衡 -> 蓄势 )} ); }; // 4. Scene: Turning Line (Momentum) const SceneTurnLine = ({ progress }) => { // Step visualization const steps = 5; const stepWidth = 800 / steps; const stepHeight = 600 / steps; // Calculate price pos on the steps const currentStep = Math.min(steps, Math.floor(progress * (steps + 2))); const isPullback = (progress > 0.4 && progress < 0.6); let priceY = HEIGHT/2 + 300 - (currentStep * stepHeight); let priceX = 140 + currentStep * stepWidth; if (isPullback) { priceY += 50; // Dip down priceX -= 20; } // Generate Step Path let d = `M140,${HEIGHT/2 + 300}`; for(let i=0; i<=steps; i++){ d += ` L${140 + i*stepWidth},${HEIGHT/2 + 300 - i*stepHeight}`; if (i < steps) d += ` L${140 + (i+1)*stepWidth},${HEIGHT/2 + 300 - i*stepHeight}`; } return ( 转折线 (Tenkan-sen) 动量节奏：回踩确认 {/* Trend Line (Steps) */} {/* Price Candle */} {isPullback && ( 回踩不破 )} ); }; // 5. Scene: Lagging Span (Confirmation) const SceneLagging = ({ progress }) => { // Show two lines: Price and Lagging Span (shifted back) const shift = 150; // Visual shift // Create a path const points = 10; const pathData = Array.from({length: points}, (_, i) => { const x = 150 + i * (800/points); const y = HEIGHT/2 + Math.sin(i * 0.8 + progress * 2) * 150; return {x, y}; }); const dPrice = `M${pathData[0].x},${pathData[0].y} ` + pathData.map(p => `L${p.x},${p.y}`).join(' '); const dLagging = `M${pathData[0].x - shift},${pathData[0].y} ` + pathData.map(p => `L${p.x - shift},${p.y}`).join(' '); // Intersection logic visualization (simplified) const isClear = Math.sin(progress * 2) > 0; // Just visual oscillation return ( 延迟线 (Chikou Span) 确认与过滤 {/* Current Price */} 当前价格 {/* Lagging Span */} {/* Highlight the gap/intersection */} {isClear ? "干净穿越：确认" : "纠缠：观望"} ); }; // 6. Scene: Methodology (Flow) const SceneMethodology = ({ progress }) => { const steps = [ { id: 1, label: "环境", sub: "云层" }, { id: 2, label: "节奏", sub: "转折线" }, { id: 3, label: "确认", sub: "延迟线" }, { id: 4, label: "风险", sub: "止损位" } ]; const visibleSteps = Math.floor(progress * 5); // Reveal steps return ( 交易体系流程 {steps.map((step, i) => { const yPos = 450 + i * 220; const isVisible = visibleSteps >= i; const opacity = isVisible ? 1 : 0.1; const xOffset = isVisible ? 0 : 50; return ( {/* Arrow connecting steps */} {i > 0 && ( )} {/* Card */} {step.label} | {step.sub} ) })} {/* Slogan */} 0.8 ? 1 : 0}> "我们不预测价格" "只研究结构" ); }; // ---------------------------------------------------------------------- // MAIN COMPONENT // ---------------------------------------------------------------------- export default function IchimokuAnimation() { const [sceneIndex, setSceneIndex] = useState(0); const [sceneProgress, setSceneProgress] = useState(0); // Use ref for animation loop state to avoid dependency cycles const requestRef = useRef(); const startTimeRef = useRef(); const lastSceneIndex = useRef(0); useEffect(() => { const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // Calculate global progress const totalCycleTime = TOTAL_SCENES * SCENE_DURATION; const cycleTime = elapsed % totalCycleTime; const currentScene = Math.floor(cycleTime / SCENE_DURATION); const progressInScene = (cycleTime % SCENE_DURATION) / SCENE_DURATION; // Update state only if changed significantly (optimization) if (currentScene !== lastSceneIndex.current) { setSceneIndex(currentScene); lastSceneIndex.current = currentScene; } setSceneProgress(progressInScene); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Render the current scene const renderScene = () => { switch (sceneIndex) { case 0: return ; case 1: return ; case 2: return ; case 3: return ; case 4: return ; case 5: return ; default: return ; } }; return (

); } ```