vue怎么实现潜艇下潜

Vue实现潜艇下潜动画效果

使用Vue结合CSS动画或JavaScript动画库实现潜艇下潜效果，可以通过以下方式完成：

CSS动画方案 通过Vue动态绑定样式或类名，控制潜艇元素的位置变化：

<template>
  <div class="ocean">
    <div 
      class="submarine" 
      :style="{ transform: `translateY(${depth}px)` }"
      @click="dive"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      depth: 0,
      isDiving: false
    }
  },
  methods: {
    dive() {
      this.isDiving = true
      const animation = setInterval(() => {
        this.depth += 5
        if (this.depth >= 300) {
          clearInterval(animation)
          this.isDiving = false
        }
      }, 50)
    }
  }
}
</script>

<style>
.ocean {
  position: relative;
  height: 400px;
  background: linear-gradient(to bottom, #1a8cff, #004080);
}

.submarine {
  position: absolute;
  width: 100px;
  height: 40px;
  background-color: #ff6600;
  border-radius: 20px;
  transition: transform 0.3s ease;
}
</style>

GSAP动画库方案 安装GSAP后实现更流畅的动画：

npm install gsap

<template>
  <div class="ocean">
    <div class="submarine" ref="submarine"></div>
    <button @click="startDive">开始下潜</button>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    startDive() {
      gsap.to(this.$refs.submarine, {
        y: 300,
        duration: 3,
        ease: "power2.inOut",
        onComplete: () => {
          console.log('下潜完成')
        }
      })
    }
  }
}
</script>

SVG路径动画方案 让潜艇沿特定路径下潜：

<template>
  <svg viewBox="0 0 500 500">
    <path 
      id="divePath" 
      d="M100,100 Q250,150 100,300" 
      fill="none" 
      stroke="transparent"
    />
    <circle 
      r="15" 
      fill="orange"
    >
      <animateMotion
        dur="5s"
        repeatCount="1"
        fill="freeze"
        path="M100,100 Q250,150 100,300"
      />
    </circle>
  </svg>
</template>

关键实现要点

• 使用Vue的响应式数据控制动画状态
• 通过transform属性实现位置变化性能更优
• 添加水泡粒子效果可增强真实感
• 结合声音效果使用Web Audio API
• 移动端注意touch事件处理

可以根据实际需求选择简单CSS过渡、JavaScript动画或专业动画库实现，复杂场景建议使用GSAP或Anime.js等专业动画库。