react实现弧形菜单

实现弧形菜单的方法

在React中实现弧形菜单可以通过CSS和JavaScript结合完成。以下是一种常见的方法：

使用CSS和React状态管理

通过CSS的transform属性旋转菜单项，结合React的状态管理实现交互效果。

import React, { useState } from 'react';
import './ArcMenu.css';

const ArcMenu = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  const menuItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  return (
    <div className="arc-menu-container">
      <button className="menu-toggle" onClick={toggleMenu}>
        Toggle Menu
      </button>
      <div className={`arc-menu ${isOpen ? 'open' : ''}`}>
        {menuItems.map((item, index) => (
          <div
            key={index}
            className="menu-item"
            style={{
              transform: `rotate(${index * (360 / menuItems.length)}deg) translate(100px) rotate(-${index * (360 / menuItems.length)}deg)`,
            }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  );
};

export default ArcMenu;

CSS样式设置

对应的CSS样式文件（ArcMenu.css）应包含以下内容：

.arc-menu-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.menu-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

.arc-menu {
  position: relative;
  width: 100%;
  height: 100%;
}

.menu-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background-color: #2196F3;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.arc-menu.open .menu-item {
  opacity: 1;
  pointer-events: auto;
}

使用第三方库

对于更复杂的弧形菜单效果，可以考虑使用专门的动画库如Framer Motion：

import { motion } from 'framer-motion';

const ArcMenuWithFramer = () => {
  const [isOpen, setIsOpen] = useState(false);

  const variants = {
    open: (i) => ({
      opacity: 1,
      x: 100 * Math.cos((i * 2 * Math.PI) / 5),
      y: 100 * Math.sin((i * 2 * Math.PI) / 5),
      transition: { type: 'spring', stiffness: 300, damping: 20 }
    }),
    closed: { opacity: 0, x: 0, y: 0 }
  };

  return (
    <div className="arc-menu-container">
      <button onClick={() => setIsOpen(!isOpen)}>
        Toggle
      </button>
      {[0, 1, 2, 3, 4].map((i) => (
        <motion.div
          key={i}
          custom={i}
          animate={isOpen ? "open" : "closed"}
          variants={variants}
          className="menu-item"
        >
          Item {i + 1}
        </motion.div>
      ))}
    </div>
  );
};

响应式设计考虑

为了使弧形菜单适应不同屏幕尺寸，可以添加媒体查询和动态计算半径：

const radius = Math.min(window.innerWidth, window.innerHeight) * 0.3;

然后在transform样式中使用这个动态计算的radius值替代固定的100px。

以上方法提供了从基础到进阶的弧形菜单实现方案，可根据项目需求选择适合的方式。