当前位置：首页 > React

react 实现漂浮

2026-01-26 16:38:34React

实现漂浮效果的几种方法

在React中实现漂浮效果（如悬浮、缓慢移动等）可以通过CSS动画、JavaScript动画库或结合两者来完成。以下是几种常见方法：

使用CSS动画

通过@keyframes和transform属性创建漂浮动画，结合React组件的className或内联样式应用动画。

/* 漂浮动画CSS */
.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

// React组件应用
function FloatingComponent() {
  return <div className="floating">漂浮元素</div>;
}

使用React Spring库

React Spring是一个流行的物理动画库，适合实现自然流畅的漂浮效果。

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

function FloatingComponent() {
  const props = useSpring({
    from: { transform: 'translateY(0px)' },
    to: async (next) => {
      while (true) {
        await next({ transform: 'translateY(-10px)' });
        await next({ transform: 'translateY(0px)' });
      }
    },
    config: { duration: 1500 },
  });

  return <animated.div style={props}>漂浮元素</animated.div>;
}

使用Framer Motion库

Framer Motion提供声明式动画API，支持复杂的漂浮轨迹。

import { motion } from 'framer-motion';

function FloatingComponent() {
  return (
    <motion.div
      animate={{
        y: [-5, 5, -5],
      }}
      transition={{
        duration: 2,
        repeat: Infinity,
        ease: "easeInOut",
      }}
    >
      漂浮元素
    </motion.div>
  );
}

自定义JavaScript动画

通过requestAnimationFrame和useEffect实现手动控制。

import { useEffect, useRef } from 'react';

function FloatingComponent() {
  const ref = useRef();

  useEffect(() => {
    let startTime = null;
    const duration = 2000;
    const distance = 10;

    const animate = (timestamp) => {
      if (!startTime) startTime = timestamp;
      const progress = (timestamp - startTime) % duration;
      const y = Math.sin((progress / duration) * Math.PI * 2) * distance;
      ref.current.style.transform = `translateY(${y}px)`;
      requestAnimationFrame(animate);
    };

    requestAnimationFrame(animate);
  }, []);

  return <div ref={ref}>漂浮元素</div>;
}