React 动画实现与性能优化

// CSS 过渡动画
import './styles.css';

function FadeInComponent({ isVisible }) {
  return (
    <div className={`fade-container ${isVisible ? 'visible' : ''}`}>
      <p>Content fades in and out</p>
    </div>
  );
}

// styles.css
// .fade-container {
//   opacity: 0;
//   transform: translateY(10px);
//   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
// }
// .fade-container.visible {
//   opacity: 1;
//   transform: translateY(0);
// }

// CSS 关键帧动画
function Spinner() {
  return <div className="spinner" />;
}

// styles.css
// @keyframes spin {
//   from { transform: rotate(0deg); }
//   to { transform: rotate(360deg); }
// }
// .spinner {
//   width: 40px;
//   height: 40px;
//   border: 4px solid #f3f3f3;
//   border-top: 4px solid #3498db;
//   border-radius: 50%;
//   animation: spin 1s linear infinite;
// }

// 多关键帧的脉冲/心跳动画
function PulseButton({ children }) {
  return <button className="pulse-btn">{children}</button>;
}

// styles.css
// @keyframes pulse {
//   0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(52,152,219,0.6); }
//   70%  { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(52,152,219,0); }
//   100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(52,152,219,0); }
// }
// .pulse-btn {
//   animation: pulse 1.8s ease-out infinite;
// }

// 骨架屏加载动画（shimmer）
function SkeletonLine() {
  return <div className="skeleton" />;
}

// styles.css
// @keyframes shimmer {
//   0%   { background-position: -200% 0; }
//   100% { background-position: 200% 0; }
// }
// .skeleton {
//   height: 16px;
//   border-radius: 4px;
//   background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
//   background-size: 200% 100%;
//   animation: shimmer 1.5s ease-in-out infinite;
// }

import { useState, useEffect, useRef } from 'react';

// React 状态驱动动画：列表项进场
function AnimatedList({ items }) {
  const [displayItems, setDisplayItems] = useState(items);

  const addItem = (item) => {
    setDisplayItems(prev => [...prev, { ...item, isNew: true }]);
    setTimeout(() => {
      setDisplayItems(prev =>
        prev.map(i => i.id === item.id ? { ...i, isNew: false } : i)
      );
    }, 300);
  };

  return (
    <ul className="animated-list">
      {displayItems.map(item => (
        <li
          key={item.id}
          className={`list-item ${item.isNew ? 'item-enter' : ''}`}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}

// 手写退场动画：卸载前先播放动画
function FadeUnmount({ show, children }) {
  const [shouldRender, setShouldRender] = useState(show);

  useEffect(() => {
    if (show) setShouldRender(true);
  }, [show]);

  const onAnimationEnd = () => {
    if (!show) setShouldRender(false);
  };

  if (!shouldRender) return null;

  return (
    <div
      className={`fade ${show ? 'fade-in' : 'fade-out'}`}
      onAnimationEnd={onAnimationEnd}
    >
      {children}
    </div>
  );
}

// styles.css
// @keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
// @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
// .fade-in  { animation: fadeIn  0.25s forwards; }
// .fade-out { animation: fadeOut 0.25s forwards; }

// 表单校验错误抖动
function ShakeInput({ error }) {
  const [shake, setShake] = useState(false);

  useEffect(() => {
    if (error) {
      setShake(true);
      const t = setTimeout(() => setShake(false), 400);
      return () => clearTimeout(t);
    }
  }, [error]);

  return (
    <input className={`input ${shake ? 'shake' : ''}`} />
  );
}

// styles.css
// @keyframes shake {
//   0%, 100% { transform: translateX(0); }
//   20%, 60% { transform: translateX(-8px); }
//   40%, 80% { transform: translateX(8px); }
// }
// .shake { animation: shake 0.4s; }

import { useState } from 'react';
import { motion, AnimatePresence, useAnimate, useScroll, useTransform } from 'framer-motion';

// Framer Motion 基础用法 + AnimatePresence 退场
function MotionComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }}
            transition={{ duration: 0.3 }}
          >
            <p>Animated content</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

// variants 编排 + stagger 交错动画
const containerVariants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.08, delayChildren: 0.1 }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

function StaggeredList({ items }) {
  return (
    <motion.ul variants={containerVariants} initial="hidden" animate="show">
      {items.map(item => (
        <motion.li key={item.id} variants={itemVariants}>
          {item.name}
        </motion.li>
      ))}
    </motion.ul>
  );
}

// Framer Motion 列表动画 + layout 动画（FLIP）
function MotionList({ items }) {
  return (
    <ul>
      <AnimatePresence>
        {items.map((item, index) => (
          <motion.li
            key={item.id}
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 50 }}
            transition={{ delay: index * 0.1 }}
            layout
          >
            {item.name}
          </motion.li>
        ))}
      </AnimatePresence>
    </ul>
  );
}

// Framer Motion 手势动画：拖拽 + 悬停 + 点击
function DraggableCard() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
      dragElastic={0.2}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="card"
    >
      Drag me!
    </motion.div>
  );
}

// useAnimate：命令式动画序列
function SequenceButton() {
  const [scope, animate] = useAnimate();

  const runSequence = async () => {
    await animate(scope.current, { scale: 1.2 }, { duration: 0.2 });
    await animate(scope.current, { rotate: 360 }, { duration: 0.4 });
    await animate(scope.current, { scale: 1, rotate: 0 }, { duration: 0.2 });
  };

  return <button ref={scope} onClick={runSequence}>Click me</button>;
}

// 滚动驱动动画：视差效果
function ParallaxHeader() {
  const { scrollY } = useScroll();
  const y = useTransform(scrollY, [0, 500], [0, 150]);
  const opacity = useTransform(scrollY, [0, 300], [1, 0]);

  return (
    <motion.h1 style={{ y, opacity }}>
      Scroll to see parallax
    </motion.h1>
  );
}

// 页面过渡动画
import { motion, AnimatePresence } from 'framer-motion';

const pageVariants = {
  initial: { opacity: 0, x: '-100vw' },
  in: { opacity: 1, x: 0 },
  out: { opacity: 0, x: '100vw' }
};

const pageTransition = {
  type: 'tween',
  ease: 'anticipate',
  duration: 0.5
};

function PageTransition({ children }) {
  return (
    <motion.div
      initial="initial"
      animate="in"
      exit="out"
      variants={pageVariants}
      transition={pageTransition}
    >
      {children}
    </motion.div>
  );
}

// 共享布局动画：layoutId 实现元素在两个位置间"飞行"
function SharedLayoutTabs({ tabs, active, onSelect }) {
  return (
    <div className="tabs">
      {tabs.map(tab => (
        <button key={tab.id} onClick={() => onSelect(tab.id)} className="tab">
          {tab.label}
          {active === tab.id && (
            <motion.div className="underline" layoutId="tab-underline" />
          )}
        </button>
      ))}
    </div>
  );
}

import { useState } from 'react';
import { useSpring, useTransition, useTrail, animated } from '@react-spring/web';

// React Spring 物理动画：翻转卡片
function SpringComponent() {
  const [flip, setFlip] = useState(false);

  const { transform, opacity } = useSpring({
    opacity: flip ? 1 : 0,
    transform: `perspective(600px) rotateX(${flip ? 180 : 0}deg)`,
    config: { mass: 5, tension: 500, friction: 80 }
  });

  return (
    <animated.div
      onClick={() => setFlip(!flip)}
      style={{ opacity: opacity.to(o => 1 - o), transform }}
    >
      Click to flip
    </animated.div>
  );
}

// React Spring 数字滚动动画
function AnimatedNumber({ value }) {
  const { number } = useSpring({
    from: { number: 0 },
    number: value,
    delay: 200,
    config: { mass: 1, tension: 20, friction: 10 }
  });

  return <animated.span>{number.to(n => n.toFixed(2))}</animated.span>;
}

// useTransition：列表进出场动画
function TransitionList({ items }) {
  const transitions = useTransition(items, {
    keys: item => item.id,
    from: { opacity: 0, transform: 'translate3d(0,-40px,0)' },
    enter: { opacity: 1, transform: 'translate3d(0,0,0)' },
    leave: { opacity: 0, transform: 'translate3d(0,40px,0)' },
    config: { tension: 220, friction: 24 }
  });

  return transitions((style, item) => (
    <animated.div style={style}>{item.name}</animated.div>
  ));
}

// useTrail：多个元素跟随式的"拖尾"动画
function TrailText({ words }) {
  const trail = useTrail(words.length, {
    from: { opacity: 0, x: 20 },
    to: { opacity: 1, x: 0 },
    config: { mass: 1, tension: 280, friction: 30 }
  });

  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {trail.map((style, i) => (
        <animated.span key={i} style={style}>{words[i]}</animated.span>
      ))}
    </div>
  );
}

import { useState, useRef } from 'react';
import Lottie from 'lottie-react';
import animationData from './animation.json';

// 基础 Lottie 动画
function LottieAnimation() {
  const [isPlaying, setIsPlaying] = useState(true);

  return (
    <div>
      <Lottie
        animationData={animationData}
        loop={true}
        autoplay={isPlaying}
        style={{ width: 200, height: 200 }}
      />
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  );
}

// 通过 ref 命令式控制播放段落（如按钮的 hover/click 分段动画）
function InteractiveLottie() {
  const lottieRef = useRef(null);

  return (
    <div
      onMouseEnter={() => lottieRef.current?.playSegments([0, 30], true)}
      onMouseLeave={() => lottieRef.current?.playSegments([30, 60], true)}
    >
      <Lottie
        lottieRef={lottieRef}
        animationData={animationData}
        autoplay={false}
        loop={false}
        style={{ width: 120, height: 120 }}
      />
    </div>
  );
}

// 坏：读写交替，强制同步布局（layout thrashing）
function badResize(elements) {
  elements.forEach(el => {
    const width = el.offsetWidth;      // 读，强制布局
    el.style.width = width * 2 + 'px'; // 写，使布局失效
    // 下一次循环再读，又强制布局……
  });
}

// 好：先批量读，再批量写
function goodResize(elements) {
  const widths = elements.map(el => el.offsetWidth); // 批量读
  elements.forEach((el, i) => {
    el.style.width = widths[i] * 2 + 'px';           // 批量写
  });
}

import { useEffect, useRef } from 'react';

// 用 requestAnimationFrame 实现平滑滚动到顶部
function useScrollToTop() {
  const rafId = useRef(null);

  const scrollToTop = () => {
    const start = window.scrollY;
    const startTime = performance.now();
    const duration = 400;

    const easeOutCubic = t => 1 - Math.pow(1 - t, 3);

    const step = (now) => {
      const elapsed = now - startTime;
      const progress = Math.min(elapsed / duration, 1);
      window.scrollTo(0, start * (1 - easeOutCubic(progress)));
      if (progress < 1) {
        rafId.current = requestAnimationFrame(step);
      }
    };

    rafId.current = requestAnimationFrame(step);
  };

  useEffect(() => () => {
    if (rafId.current) cancelAnimationFrame(rafId.current);
  }, []);

  return scrollToTop;
}

import { useLayoutEffect, useRef } from 'react';

// 手写 FLIP：让元素在位置变化时平滑过渡
function useFlip(dep) {
  const ref = useRef(null);
  const prevRect = useRef(null);

  useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;
    const last = el.getBoundingClientRect(); // Last

    if (prevRect.current) {
      const first = prevRect.current;
      const dx = first.left - last.left;      // Invert
      const dy = first.top - last.top;

      if (dx || dy) {
        // 先瞬间放回原位（无过渡）
        el.style.transform = `translate(${dx}px, ${dy}px)`;
        el.style.transition = 'none';
        // 下一帧再动画到最终位置（Play）
        requestAnimationFrame(() => {
          el.style.transform = '';
          el.style.transition = 'transform 0.3s ease';
        });
      }
    }
    prevRect.current = last;
  }, [dep]);

  return ref;
}

// 坏：把动画进度存进 state，每帧重渲染整个组件
function BadFollowMouse() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const onMove = e => setPos({ x: e.clientX, y: e.clientY }); // 每次移动都 setState
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);
  return <div style={{ transform: `translate(${pos.x}px, ${pos.y}px)` }} />;
}

// 好：用 ref 直接操作 DOM，绕开 React 重渲染
function GoodFollowMouse() {
  const ref = useRef(null);
  useEffect(() => {
    const onMove = e => {
      if (ref.current) {
        ref.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
      }
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);
  return <div ref={ref} />;
}

// 展开收起动画：优先 transform 而非 top/left
function OptimizedAnimation() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div
      className="optimized-container"
      style={{
        transform: isExpanded ? 'scale(1.1)' : 'scale(1)',
        opacity: isExpanded ? 0.8 : 1,
        transition: 'transform 0.3s ease, opacity 0.3s ease',
        willChange: 'transform, opacity'
      }}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      Optimized Animation
    </div>
  );
}

// CSS 层面：全局尊重 reduced-motion
// @media (prefers-reduced-motion: reduce) {
//   *, *::before, *::after {
//     animation-duration: 0.01ms !important;
//     animation-iteration-count: 1 !important;
//     transition-duration: 0.01ms !important;
//     scroll-behavior: auto !important;
//   }
// }

// JS 层面：用 Hook 读取用户偏好，动态决定是否播放动画
import { useState, useEffect } from 'react';

function usePrefersReducedMotion() {
  const query = '(prefers-reduced-motion: reduce)';
  const [reduced, setReduced] = useState(
    () => typeof window !== 'undefined' && window.matchMedia(query).matches
  );

  useEffect(() => {
    const mql = window.matchMedia(query);
    const onChange = () => setReduced(mql.matches);
    mql.addEventListener('change', onChange);
    return () => mql.removeEventListener('change', onChange);
  }, []);

  return reduced;
}

// 在 Framer Motion 中应用：偏好减少动态时禁用动画
function AccessibleMotion({ children }) {
  const reduced = usePrefersReducedMotion();

  return (
    <motion.div
      initial={reduced ? false : { opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: reduced ? 0 : 0.3 }}
    >
      {children}
    </motion.div>
  );
}

import { motion, useMotionValue, useTransform, useSpring, useMotionValueEvent } from 'framer-motion';

// 卡片 3D 倾斜：鼠标位置驱动 rotateX / rotateY，全程不重渲染
function TiltCard() {
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  // 把 -0.5~0.5 的归一化坐标映射为 -15deg~15deg 的旋转
  const rotateX = useTransform(y, [-0.5, 0.5], [15, -15]);
  const rotateY = useTransform(x, [-0.5, 0.5], [-15, 15]);

  // 套一层弹簧，让回中更自然（stiffness 越大越硬，damping 越大越不回弹）
  const springX = useSpring(rotateX, { stiffness: 300, damping: 30 });
  const springY = useSpring(rotateY, { stiffness: 300, damping: 30 });

  const handleMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    x.set((e.clientX - rect.left) / rect.width - 0.5);
    y.set((e.clientY - rect.top) / rect.height - 0.5);
  };

  const handleLeave = () => {
    x.set(0);
    y.set(0);
  };

  return (
    <motion.div
      onMouseMove={handleMove}
      onMouseLeave={handleLeave}
      style={{
        rotateX: springX,
        rotateY: springY,
        transformPerspective: 800,
        width: 240,
        height: 320,
      }}
      className="tilt-card"
    />
  );
}

// useMotionValueEvent：订阅数值变化做副作用（如埋点、节流上报），不触发重渲染
function ProgressWatcher() {
  const { scrollYProgress } = useScroll();
  useMotionValueEvent(scrollYProgress, 'change', (latest) => {
    if (latest > 0.9) console.log('用户已滚到底部 90%');
  });
  return null;
}

import { useRef } from 'react';
import { motion, useInView, useScroll, useTransform } from 'framer-motion';

// 滚动到视口才淡入上移；once: true 表示只播一次
function RevealOnScroll({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, margin: '0px 0px -100px 0px' });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 40 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  );
}

// 局部滚动进度驱动图片缩放（scroll-linked，随手指/滚轮实时联动）
function ScrollZoomImage({ src }: { src: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start'], // 元素顶部进入视口底部 到 元素底部离开视口顶部
  });
  const scale = useTransform(scrollYProgress, [0, 1], [1.2, 1]);

  return (
    <div ref={ref} style={{ overflow: 'hidden' }}>
      <motion.img src={src} style={{ scale }} />
    </div>
  );
}

import { LazyMotion, domAnimation, m } from 'framer-motion';

// 只加载基础动画特性（约 4.6KB），拖拽/布局动画用 domMax（约 15KB）
function App() {
  return (
    <LazyMotion features={domAnimation} strict>
      <m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
    </LazyMotion>
  );
}

import { useRef, useEffect } from 'react';

// 用 WAAPI 封装一个可复用的进场 Hook，零依赖
function useEnterAnimation<T extends HTMLElement>() {
  const ref = useRef<T>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const anim = el.animate(
      [
        { opacity: 0, transform: 'translateY(20px)' },
        { opacity: 1, transform: 'translateY(0)' },
      ],
      {
        duration: 400,
        easing: 'cubic-bezier(0.22, 1, 0.36, 1)', // easeOutQuint，快进慢停
        fill: 'both',
      }
    );
    return () => anim.cancel();
  }, []);

  return ref;
}

// 可控播放：hover 加速、离开反向，用 finished Promise 串联序列
function ControllableBox() {
  const ref = useRef<HTMLDivElement>(null);
  const animRef = useRef<Animation | null>(null);

  const start = async () => {
    const el = ref.current;
    if (!el) return;
    animRef.current = el.animate(
      [{ transform: 'scale(1)' }, { transform: 'scale(1.4)' }],
      { duration: 300, fill: 'forwards' }
    );
    await animRef.current.finished; // 等动画完成再执行下一步
    console.log('放大完成');
  };

  const reverse = () => animRef.current?.reverse();

  return <div ref={ref} onMouseEnter={start} onMouseLeave={reverse} />;
}

// 一组常用缓动函数（t 均为 0~1）
const Easing = {
  linear: (t: number) => t,
  easeInQuad: (t: number) => t * t,
  easeOutQuad: (t: number) => t * (2 - t),
  easeInOutCubic: (t: number) =>
    t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
  easeOutQuint: (t: number) => 1 - Math.pow(1 - t, 5),
  // 回弹（overshoot）：先冲过头再拉回，弹性手感
  easeOutBack: (t: number) => {
    const c1 = 1.70158;
    const c3 = c1 + 1;
    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
  },
  // 弹跳
  easeOutBounce: (t: number) => {
    const n1 = 7.5625;
    const d1 = 2.75;
    if (t < 1 / d1) return n1 * t * t;
    if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + 0.75;
    if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + 0.9375;
    return n1 * (t -= 2.625 / d1) * t + 0.984375;
  },
};

// 通用 rAF 补间动画引擎：从 from 到 to，带缓动与完成回调
function animateValue(
  from: number,
  to: number,
  duration: number,
  easing: (t: number) => number,
  onUpdate: (v: number) => void,
  onComplete?: () => void
) {
  const startTime = performance.now();
  let rafId = 0;

  const tick = (now: number) => {
    const elapsed = now - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const eased = easing(progress);
    onUpdate(from + (to - from) * eased);
    if (progress < 1) {
      rafId = requestAnimationFrame(tick);
    } else {
      onComplete?.();
    }
  };

  rafId = requestAnimationFrame(tick);
  return () => cancelAnimationFrame(rafId); // 返回取消函数
}

import { useEffect, useRef } from 'react';

// 帧率无关的匀速旋转：无论 60Hz 还是 120Hz，视觉速度一致
function useSpin(speedDegPerSec = 90) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let angle = 0;
    let last = performance.now();
    let rafId = 0;

    const loop = (now: number) => {
      const delta = (now - last) / 1000; // 转成秒
      last = now;
      angle = (angle + speedDegPerSec * delta) % 360;
      if (ref.current) ref.current.style.transform = `rotate(${angle}deg)`;
      rafId = requestAnimationFrame(loop);
    };

    rafId = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(rafId);
  }, [speedDegPerSec]);

  return ref;
}

import { useEffect, useRef, useState } from 'react';

// 通用"进入视口才显示"Hook，性能远优于监听 scroll 事件
function useInViewport<T extends HTMLElement>(options?: IntersectionObserverInit) {
  const ref = useRef<T>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        observer.unobserve(entry.target); // 只触发一次，触发后停止观察省开销
      }
    }, { threshold: 0.15, ...options });

    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return { ref, visible };
}

function FadeInSection({ children }: { children: React.ReactNode }) {
  const { ref, visible } = useInViewport<HTMLDivElement>();
  return (
    <div
      ref={ref}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(30px)',
        transition: 'opacity 0.6s ease, transform 0.6s ease',
      }}
    >
      {children}
    </div>
  );
}

/* 顶部阅读进度条：随页面滚动从 0 拉伸到 100%，纯 CSS，零 JS */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transform-origin: left;
  background: #3498db;
  animation: grow-progress linear;
  animation-timeline: scroll(root block); /* 绑定根滚动容器的垂直滚动 */
}

/* 图片进入视口时淡入上移：view() 绑定元素自身可见进度 */
@keyframes reveal {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal-on-scroll {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%; /* 从刚进入视口到进入 60% 之间完成 */
}

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

.conic-border {
  background: conic-gradient(from var(--gradient-angle), #3498db, #9b59b6, #3498db);
  animation: rotate-gradient 3s linear infinite;
}

import { useRef, useEffect } from 'react';

// SVG 对勾"绘制"动画：常用于"提交成功"反馈
function AnimatedCheck() {
  const pathRef = useRef<SVGPathElement>(null);

  useEffect(() => {
    const path = pathRef.current;
    if (!path) return;
    const length = path.getTotalLength(); // 拿到路径总长度
    path.style.strokeDasharray = String(length);
    path.style.strokeDashoffset = String(length); // 先"藏起来"
    // 强制重排后再触发过渡，确保动画生效
    path.getBoundingClientRect();
    path.style.transition = 'stroke-dashoffset 0.6s ease-out';
    path.style.strokeDashoffset = '0'; // 画出来
  }, []);

  return (
    <svg width="80" height="80" viewBox="0 0 80 80">
      <circle cx="40" cy="40" r="36" fill="none" stroke="#2ecc71" strokeWidth="4" />
      <path
        ref={pathRef}
        d="M24 42 L36 54 L58 28"
        fill="none"
        stroke="#2ecc71"
        strokeWidth="5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

.draw-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 0.8s ease-out forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

// 用 PerformanceObserver 在生产环境采集长任务（>50ms）做监控上报
import { useEffect } from 'react';

function useLongTaskMonitor() {
  useEffect(() => {
    if (!('PerformanceObserver' in window)) return;
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        // 超过 50ms 的任务会阻塞渲染，动画期间尤其致命
        if (entry.duration > 50) {
          console.warn(`长任务 ${entry.duration.toFixed(1)}ms，可能导致掉帧`);
        }
      }
    });
    observer.observe({ entryTypes: ['longtask'] });
    return () => observer.disconnect();
  }, []);
}

// 手动测量一段动画的实际帧率
function measureFps(durationMs = 1000): Promise<number> {
  return new Promise((resolve) => {
    let frames = 0;
    const start = performance.now();
    const tick = () => {
      frames++;
      if (performance.now() - start < durationMs) {
        requestAnimationFrame(tick);
      } else {
        resolve(Math.round((frames * 1000) / (performance.now() - start)));
      }
    };
    requestAnimationFrame(tick);
  });
}