当前位置：首页 > React

react如何衰减

2026-01-13 09:35:10React

React 中的动画衰减效果实现

在 React 中实现衰减效果（如滚动衰减、拖动释放后的惯性滑动）通常需要结合物理动画原理或第三方动画库。以下是几种常见方法：

使用 CSS 动画和 `@keyframes`

通过 CSS 定义衰减动画，适用于简单场景：

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.fade-element {
  animation: fadeOut 2s ease-out;
}

在 React 组件中通过类名控制：

react如何衰减

function FadingComponent() {
  const [isVisible, setIsVisible] = useState(true);
  return (
    <div 
      className={isVisible ? 'fade-element' : ''}
      onClick={() => setIsVisible(false)}
    />
  );
}

使用 `react-spring` 实现物理衰减

react-spring 支持弹簧物理模型，天然适合衰减效果：

import { useSpring, animated } from 'react-spring';

function DecayAnimation() {
  const props = useSpring({
    from: { opacity: 1 },
    to: { opacity: 0 },
    config: { mass: 1, tension: 180, friction: 12 }
  });
  return <animated.div style={props}>内容</animated.div>;
}

通过调整 mass（质量）、tension（张力）、friction（摩擦力）参数控制衰减曲线。

react如何衰减

自定义 JavaScript 衰减函数

手动实现基于时间的衰减算法（如指数衰减）：

function useDecayAnimation(initialValue, decayRate = 0.9) {
  const [value, setValue] = useState(initialValue);
  useEffect(() => {
    const timer = setInterval(() => {
      setValue(v => v * decayRate);
      if (Math.abs(value) < 0.01) clearInterval(timer);
    }, 16);
    return () => clearInterval(timer);
  }, []);
  return value;
}

拖拽衰减实现（结合 `react-use-gesture`）

处理拖拽释放后的惯性滑动：

import { useSpring, animated } from 'react-spring';
import { useDrag } from 'react-use-gesture';

function DraggableWithDecay() {
  const [{ x }, api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ down, movement: [mx], velocity }) => {
    api.start({
      x: down ? mx : mx + velocity * 200,
      config: { friction: 10 }
    });
  });
  return <animated.div {...bind()} style={{ x }} />;
}

velocity 参数捕捉拖拽速度，释放后触发衰减运动。