vue实现水管道交错

Vue 实现水管道交错效果

在 Vue 中实现水管道交错效果，可以通过 CSS 动画和 Vue 的动态绑定结合实现。以下是具体实现方法：

使用 CSS 动画和 Vue 动态样式

定义水管道的基本样式和动画效果，通过 Vue 控制动画的播放状态和方向。

<template>
  <div class="water-pipes">
    <div 
      v-for="(pipe, index) in pipes" 
      :key="index" 
      class="pipe" 
      :style="{
        'animation-delay': `${index * 0.2}s`,
        'animation-direction': pipe.direction
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pipes: [
        { direction: 'alternate' },
        { direction: 'alternate-reverse' },
        { direction: 'alternate' },
        { direction: 'alternate-reverse' }
      ]
    }
  }
}
</script>

<style>
.water-pipes {
  display: flex;
  justify-content: space-around;
  height: 200px;
}

.pipe {
  width: 40px;
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
  animation: wave 2s infinite ease-in-out;
}

@keyframes wave {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.5);
  }
}
</style>

使用 SVG 和 Vue 动态路径

通过 SVG 绘制水管路径，并利用 Vue 动态调整路径参数实现交错效果。

<template>
  <svg width="400" height="200" viewBox="0 0 400 200">
    <path 
      v-for="(pipe, index) in pipes" 
      :key="index" 
      :d="pipe.path" 
      fill="none" 
      stroke="#00f2fe" 
      stroke-width="10"
      :style="{
        'animation-delay': `${index * 0.3}s`
      }"
      class="pipe-wave"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      pipes: [
        { path: 'M50,50 C100,100 150,0 200,50' },
        { path: 'M50,150 C100,100 150,200 200,150' }
      ]
    }
  }
}
</script>

<style>
.pipe-wave {
  animation: wave 3s infinite ease-in-out;
}

@keyframes wave {
  0%, 100% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 100;
  }
}
</style>

使用 Canvas 和 Vue 动态绘制

通过 Canvas API 动态绘制水管道，结合 Vue 的数据响应实现动画效果。

<template>
  <canvas ref="canvas" width="400" height="200"></canvas>
</template>

<script>
export default {
  data() {
    return {
      pipes: [
        { x: 50, y: 50, width: 20, height: 100, speed: 0.05, offset: 0 },
        { x: 150, y: 50, width: 20, height: 100, speed: 0.08, offset: 50 },
        { x: 250, y: 50, width: 20, height: 100, speed: 0.06, offset: 30 }
      ]
    }
  },
  mounted() {
    this.animate();
  },
  methods: {
    animate() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const animateFrame = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        this.pipes.forEach(pipe => {
          pipe.offset += pipe.speed;
          const waveHeight = Math.sin(pipe.offset) * 20;
          ctx.fillStyle = '#4facfe';
          ctx.fillRect(
            pipe.x, 
            pipe.y + waveHeight, 
            pipe.width, 
            pipe.height
          );
        });
        requestAnimationFrame(animateFrame);
      };
      animateFrame();
    }
  }
}
</script>

使用第三方库（如 GSAP）

结合 GSAP 动画库实现更复杂的水管道交错动画效果。

<template>
  <div ref="pipes" class="water-pipes">
    <div v-for="(pipe, index) in pipes" :key="index" class="pipe"></div>
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  data() {
    return {
      pipes: new Array(4).fill(null)
    }
  },
  mounted() {
    this.animatePipes();
  },
  methods: {
    animatePipes() {
      const pipes = this.$refs.pipes.children;
      gsap.to(pipes, {
        scaleY: 1.5,
        duration: 2,
        stagger: 0.2,
        yoyo: true,
        repeat: -1,
        ease: 'sine.inOut'
      });
    }
  }
}
</script>

<style>
.water-pipes {
  display: flex;
  justify-content: space-around;
  height: 200px;
}

.pipe {
  width: 40px;
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
}
</style>