当前位置：首页 > React

react实现开花

2026-01-26 15:23:06React

React 实现开花效果的方法

在 React 中实现开花效果，可以通过 CSS 动画、Canvas 或第三方动画库来实现。以下是几种常见的方法：

使用 CSS 动画

通过 CSS 的 @keyframes 和 transform 属性，可以创建花瓣展开的动画效果。

import React from 'react';
import './Flower.css';

const Flower = () => {
  return (
    <div className="flower">
      {[...Array(8)].map((_, i) => (
        <div key={i} className="petal" style={{ transform: `rotate(${i * 45}deg)` }} />
      ))}
    </div>
  );
};

export default Flower;

对应的 CSS 文件 Flower.css：

.flower {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
}

.petal {
  position: absolute;
  width: 50px;
  height: 20px;
  background-color: pink;
  border-radius: 50%;
  transform-origin: 0 100%;
  animation: bloom 2s ease-in-out forwards;
}

@keyframes bloom {
  from {
    transform: rotate(0deg) scale(0);
  }
  to {
    transform: rotate(var(--rotate)) scale(1);
  }
}

使用 Canvas 绘制

通过 Canvas 可以更灵活地控制开花效果的细节，例如花瓣的形状和颜色渐变。

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

const FlowerCanvas = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let angle = 0;
    const petals = 8;
    const radius = 50;

    const drawFlower = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < petals; i++) {
        const x = canvas.width / 2 + Math.cos(angle + i * (2 * Math.PI / petals)) * radius;
        const y = canvas.height / 2 + Math.sin(angle + i * (2 * Math.PI / petals)) * radius;
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, 2 * Math.PI);
        ctx.fillStyle = `hsl(${i * 45}, 80%, 70%)`;
        ctx.fill();
      }
      angle += 0.01;
      requestAnimationFrame(drawFlower);
    };

    drawFlower();
  }, []);

  return <canvas ref={canvasRef} width={300} height={300} />;
};

export default FlowerCanvas;

使用第三方动画库（如 Framer Motion）

Framer Motion 提供了声明式的动画 API，可以轻松实现复杂的开花效果。

import React from 'react';
import { motion } from 'framer-motion';

const FlowerFramer = () => {
  const petals = 8;

  return (
    <div style={{ position: 'relative', width: '200px', height: '200px', margin: '50px auto' }}>
      {[...Array(petals)].map((_, i) => (
        <motion.div
          key={i}
          style={{
            position: 'absolute',
            width: '60px',
            height: '60px',
            borderRadius: '50%',
            background: `hsl(${i * 45}, 80%, 70%)`,
            originX: 0,
            originY: '100%',
          }}
          initial={{ rotate: 0, scale: 0 }}
          animate={{ rotate: i * 45, scale: 1 }}
          transition={{ duration: 1, delay: i * 0.1 }}
        />
      ))}
    </div>
  );
};

export default FlowerFramer;

使用 SVG 动画

SVG 的路径动画可以用于创建更复杂的花瓣形状和开花效果。

import React from 'react';

const FlowerSVG = () => {
  return (
    <svg width="200" height="200" viewBox="0 0 200 200">
      {[...Array(8)].map((_, i) => (
        <path
          key={i}
          d="M100,100 L150,50 A20,20 0 0,1 170,70 L120,120 Z"
          fill={`hsl(${i * 45}, 80%, 70%)`}
          transform={`rotate(${i * 45}, 100, 100)`}
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            from={`0 100 100`}
            to={`${i * 45} 100 100`}
            dur="1s"
            begin={`${i * 0.1}s`}
            fill="freeze"
          />
        </path>
      ))}
    </svg>
  );
};

export default FlowerSVG;