当前位置：首页 > React

react实现翻书动画效果

2026-01-27 09:28:14React

React 实现翻书动画效果

在 React 中实现翻书动画效果可以通过 CSS 动画和状态管理结合实现。以下是两种常见的方法：

使用 CSS 3D 变换和过渡

通过 CSS 的 transform 和 transition 属性实现翻页的 3D 效果。

react实现翻书动画效果

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

const BookPage = ({ isFlipped, content }) => {
  return (
    <div className={`page ${isFlipped ? 'flipped' : ''}`}>
      <div className="front">{content.front}</div>
      <div className="back">{content.back}</div>
    </div>
  );
};

const Book = () => {
  const [flipped, setFlipped] = useState(false);
  const content = {
    front: 'Front Content',
    back: 'Back Content'
  };

  return (
    <div className="book">
      <BookPage isFlipped={flipped} content={content} />
      <button onClick={() => setFlipped(!flipped)}>Flip Page</button>
    </div>
  );
};

export default Book;

对应的 CSS 文件（Book.css）：

react实现翻书动画效果

.book {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.page {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.page.flipped {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

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

Framer Motion 提供了更高级的动画控制，适合复杂的翻书效果。

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

const BookPage = ({ isFlipped, content }) => {
  return (
    <motion.div
      style={{
        width: '200px',
        height: '300px',
        position: 'relative',
        transformStyle: 'preserve-3d'
      }}
      animate={{ rotateY: isFlipped ? 180 : 0 }}
      transition={{ duration: 1 }}
    >
      <div
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backfaceVisibility: 'hidden',
          background: 'white',
          border: '1px solid #ccc'
        }}
      >
        {content.front}
      </div>
      <div
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backfaceVisibility: 'hidden',
          background: 'white',
          border: '1px solid #ccc',
          transform: 'rotateY(180deg)'
        }}
      >
        {content.back}
      </div>
    </motion.div>
  );
};

const Book = () => {
  const [flipped, setFlipped] = useState(false);
  const content = {
    front: 'Front Content',
    back: 'Back Content'
  };

  return (
    <div style={{ perspective: '1000px' }}>
      <BookPage isFlipped={flipped} content={content} />
      <button onClick={() => setFlipped(!flipped)}>Flip Page</button>
    </div>
  );
};

export default Book;

实现多页翻书效果

对于多页翻书效果，可以通过动态渲染多个页面并管理其翻转状态实现。

const MultiPageBook = () => {
  const [flippedPages, setFlippedPages] = useState([]);
  const pages = [
    { front: 'Page 1 Front', back: 'Page 1 Back' },
    { front: 'Page 2 Front', back: 'Page 2 Back' }
  ];

  const flipPage = (index) => {
    setFlippedPages(prev => {
      const newFlipped = [...prev];
      newFlipped[index] = !newFlipped[index];
      return newFlipped;
    });
  };

  return (
    <div style={{ perspective: '1000px' }}>
      {pages.map((page, index) => (
        <div key={index} style={{ marginBottom: '20px' }}>
          <BookPage
            isFlipped={flippedPages[index]}
            content={page}
          />
          <button onClick={() => flipPage(index)}>
            Flip Page {index + 1}
          </button>
        </div>
      ))}
    </div>
  );
};