vue实现翻书效果

Vue 实现翻书效果

实现翻书效果通常需要结合 CSS 3D 变换和 JavaScript 动画控制。以下是几种常见的方法：

使用 CSS 3D 变换和 Vue 过渡

通过 Vue 的过渡系统结合 CSS 可以实现基础的翻书效果：

<template>
  <div class="book">
    <div 
      class="page" 
      :class="{ 'flipped': isFlipped }"
      @click="isFlipped = !isFlipped"
    >
      <div class="front">Front Content</div>
      <div class="back">Back Content</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false
    }
  }
}
</script>

<style>
.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);
}
</style>

使用第三方库

对于更复杂的翻书效果，可以使用专门的开源库：

1. Turn.js

   • 安装：npm install turn.js

   • 示例代码：

     

     <template>
       <div id="flipbook">
         <div class="hard">Cover</div>
         <div class="hard">Back</div>
       </div>
     </template>
     
     <script>
     import 'turn.js'
     export default {
       mounted() {
         $('#flipbook').turn({
           width: 800,
           height: 600,
           autoCenter: true
         });
       }
     }
     </script>

2. Vue Page Flip

   • 专门为 Vue 设计的翻页组件

   • 安装：npm install vue-page-flip

     

   • 示例：

     <template>
       <page-flip :pages="pages" />
     </template>
     
     <script>
     import { PageFlip } from 'vue-page-flip'
     export default {
       components: { PageFlip },
       data() {
         return {
           pages: [
             '<div style="padding:20px">Page 1</div>',
             '<div style="padding:20px">Page 2</div>'
           ]
         }
       }
     }
     </script>

自定义高级翻书效果

对于需要完全自定义的场景，可以结合 GSAP 动画库：

<template>
  <div class="book-container">
    <div 
      class="page"
      @mousedown="startDrag"
      @mousemove="dragPage"
      @mouseup="releasePage"
    >
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'
export default {
  methods: {
    startDrag(e) {
      // 记录起始位置
    },
    dragPage(e) {
      // 根据鼠标位置计算翻页角度
    },
    releasePage() {
      // 使用GSAP完成翻页动画
      gsap.to('.page', {
        rotationY: 180,
        duration: 0.5,
        ease: 'power2.out'
      })
    }
  }
}
</script>

移动端适配

对于移动设备，需要添加触摸事件支持：

methods: {
  handleTouchStart(e) {
    // 记录触摸起始位置
  },
  handleTouchMove(e) {
    // 计算翻页进度
  },
  handleTouchEnd() {
    // 完成翻页动画
  }
}

实现翻书效果时需要注意：

• 性能优化，特别是在移动设备上
• 添加页面阴影等视觉效果增强真实感
• 考虑页面内容在不同状态下的显示问题
• 为SEO优化添加适当的元信息

以上方法可以根据项目需求选择适合的实现方案，从简单的CSS过渡到复杂的第三方库解决方案都能满足不同场景的需求。