react 实现漂浮
实现漂浮效果的几种方法
在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>;
}选择建议
- 简单效果：优先使用CSS动画，性能最佳且无需额外依赖。
- 复杂交互：选择React Spring或Framer Motion，支持物理引擎和手势交互。
- 精细控制：自定义JavaScript方案适合需要完全掌控动画逻辑的场景。
每种方法均可通过调整参数（如持续时间、浮动距离）实现不同的视觉效果。
