import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 600; const VIEW_HEIGHT = 1000; const FPS = 60; const SCENE_DURATION = 240; // 4 seconds per scene const TOTAL_SCENES = 6; // Intro, 4 types, Outro const TOTAL_FRAMES = TOTAL_SCENES * SCENE_DURATION; // Color Palette const COLORS = { bg: '#0f172a', primary: '#06b6d4', // Cyan secondary: '#3b82f6', // Blue accent: '#f59e0b', // Amber danger: '#ef4444', // Red success: '#10b981', // Emerald text: '#f8fafc', textMuted: '#94a3b8', grid: '#1e293b' }; // --- Helper Components --- // Background Grid & Particles const Background = ({ frame }) => { const particles = useMemo(() => Array.from({ length: 20 }, (_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 2 + 1, speed: Math.random() * 0.5 + 0.2, opacity: Math.random() * 0.5 + 0.1 })), []); return ( {/* Grid */} {/* Floating Particles */} {particles.map((p) => ( ))} ); }; // Scene 0: Intro const SceneIntro = ({ progress }) => { const opacity = progress < 0.2 ? progress * 5 : (progress > 0.8 ? (1 - progress) * 5 : 1); const scale = 0.8 + progress * 0.2; return ( {/* Medical Cross / Abstract Pill */} 英克司兰 Inclisiran 到底适合谁？ ); }; // Scene 1: Statin Ineffective const SceneIneffective = ({ progress }) => { const barHeightBase = 200; // Animation: Bar 1 stays high, Bar 2 drops const bar2Height = progress > 0.4 ? barHeightBase * (1 - (progress - 0.4) * 2) // Drop : barHeightBase; const finalBar2Height = Math.max(50, bar2Height); const isSuccess = progress > 0.7; return ( 1. 他汀效果不佳吃足量，还是降不下来 {/* Chart Axis */} {/* Target Line */} 理想值 {/* Bar 1: Statin Only */} 纯他汀 High {/* Bar 2: Inclisiran */} 英克司兰 {isSuccess && ( OK! )} ); }; // Scene 2: Statin Intolerance const SceneIntolerance = ({ progress }) => { // Shake effect const shake = Math.sin(progress * 50) * 5 * (1 - progress); return ( 2. 他汀不耐受肌肉酸痛 / 乏力 / 肝异常 {/* Body Icon */} {/* Warning Bolt */} {/* Side Effects Text */} 肌肉痛肝酶高 {/* Solution Shield */} SAFE ); }; // Scene 3: Genetic const SceneGenetic = ({ progress }) => { const rotation = progress * 360; // Generate DNA strands const strands = useMemo(() => { return Array.from({ length: 12 }, (_, i) => i); }, []); return ( 3. 家族性高胆固醇遗传因素 / 天生难控 {/* Rotating DNA */} {strands.map((i) => { const y = (i - 6) * 25; const offset = i * 0.5; const x1 = Math.sin(progress * 5 + offset) * 40; const x2 = -Math.sin(progress * 5 + offset) * 40; return ( ); })} 强化治疗尤为重要 ); }; // Scene 4: High Risk const SceneHighRisk = ({ progress }) => { // Heart Beat const beat = (Math.sin(progress * 20) > 0.8) ? 1.1 : 1; // ECG Line Path const pathD = "M -150 0 L -100 0 L -80 -30 L -60 30 L -40 -10 L -20 0 L 150 0"; const pathLen = 300; const dashOffset = pathLen * (1 - progress); return ( 4. 心血管病极高危冠心病 / 糖尿病 / 脑梗史 {/* Heart */} {/* ECG Line */} {/* Warning Icons */} 需将胆固醇降得更低更稳 ); }; // Scene 5: Summary & Disclaimer const SceneSummary = ({ progress }) => { const items = [ "他汀疗效不佳", "他汀不耐受", "家族性高胆固醇", "极高危人群" ]; return ( 总结：适合人群 {items.map((item, i) => { const show = progress > (i * 0.15); const yPos = -120 + i * 70; return ( {item} ); })} {/* Disclaimer */} 0.8 ? 1 : 0}> ⚠️ 重要提示本文仅供初步参考，具体用药请务必咨询专科医生 ); }; // --- Main Component --- export const InclisiranGuide = () => { const [frame, setFrame] = useState(0); const requestRef = useRef(); useEffect(() => { const animate = () => { setFrame(prev => (prev + 1) % TOTAL_FRAMES); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); const sceneIndex = Math.floor(frame / SCENE_DURATION); const sceneProgress = (frame % SCENE_DURATION) / SCENE_DURATION; // Render Logic const renderScene = () => { switch (sceneIndex) { case 0: return ; case 1: return ; case 2: return ; case 3: return ; case 4: return ; case 5: return ; default: return null; } }; // Progress Bar const progressWidth = (frame / TOTAL_FRAMES) * VIEW_WIDTH; return (

); };