vue怎么实现潜艇下潜

Vue 实现潜艇下潜动画效果

使用 Vue 结合 CSS 动画或 JavaScript 动画库（如 GSAP）可以实现潜艇下潜的视觉效果。以下是两种常见实现方式：

基于 CSS 动画的实现

在 Vue 组件的 <style> 部分定义关键帧动画，通过修改 transform 属性控制潜艇位置：

.submarine {
  position: absolute;
  width: 100px;
  height: 60px;
  transition: transform 2s ease-in-out;
}
.submarine.diving {
  transform: translateY(300px) rotate(10deg);
}

在模板中使用动态类名绑定：

<template>
  <div 
    class="submarine" 
    :class="{ diving: isDiving }"
    @click="toggleDive"
  ></div>
</template>

通过数据驱动状态变化：

export default {
  data() {
    return {
      isDiving: false
    }
  },
  methods: {
    toggleDive() {
      this.isDiving = !this.isDiving;
    }
  }
}

使用 GSAP 实现高级动画

安装 GSAP 库后可以实现更复杂的运动轨迹：

import gsap from 'gsap';

export default {
  methods: {
    startDive() {
      gsap.to(".submarine", {
        y: 500,
        duration: 3,
        ease: "power2.inOut",
        rotation: 15,
        onComplete: this.onDiveComplete
      });
    }
  }
}

添加气泡特效增强真实感

通过动态生成气泡元素增强下潜效果：

<template>
  <div class="ocean">
    <div class="submarine" ref="sub"></div>
    <div 
      v-for="(bubble, index) in bubbles"
      :key="index"
      class="bubble"
      :style="bubble.style"
    ></div>
  </div>
</template>

使用 JavaScript 间隔创建气泡：

data() {
  return {
    bubbles: []
  }
},
methods: {
  createBubble() {
    const xPos = Math.random() * 100;
    this.bubbles.push({
      style: {
        left: `${xPos}%`,
        animationDuration: `${Math.random() * 3 + 2}s`
      }
    });
    setTimeout(() => {
      this.bubbles.shift();
    }, 5000);
  }
},
mounted() {
  setInterval(this.createBubble, 300);
}

注意事项

• 使用 will-change: transform 优化动画性能
• 深海效果可通过渐变背景色实现
• 移动端注意添加触摸事件支持
• 复杂场景建议使用 Vue 的状态管理管理动画状态

以上方法可根据实际需求组合使用，CSS 方案适合简单动画，GSAP 适合需要精确控制的复杂动画场景。