当前位置：首页 > VUE

vue实现管道流动

2026-02-18 20:36:13VUE

Vue 实现管道流动效果

管道流动效果通常用于展示数据流动、进度或动态路径，可以通过 CSS 动画和 Vue 的动态绑定实现。

基础实现：CSS 动画 + Vue 动态样式

定义一个带有流动效果的管道样式，通过 Vue 控制动画的启停或方向：

<template>
  <div class="pipe-container">
    <div class="pipe" :style="{ 'animation-play-state': isFlowing ? 'running' : 'paused' }"></div>
    <button @click="toggleFlow">{{ isFlowing ? '暂停' : '流动' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlowing: true
    };
  },
  methods: {
    toggleFlow() {
      this.isFlowing = !this.isFlowing;
    }
  }
};
</script>

<style>
.pipe-container {
  width: 300px;
  height: 30px;
  position: relative;
  overflow: hidden;
  background-color: #f0f0f0;
  border-radius: 15px;
}

.pipe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #4CAF50, transparent);
  animation: flow 2s linear infinite;
}

@keyframes flow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
</style>

动态数据驱动流动效果

结合 Vue 的响应式数据，根据数值比例控制流动进度条：

<template>
  <div class="progress-pipe">
    <div class="pipe-fill" :style="{ width: progress + '%' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 30
    };
  },
  mounted() {
    setInterval(() => {
      this.progress = (this.progress % 100) + 10;
    }, 1000);
  }
};
</script>

<style>
.progress-pipe {
  width: 300px;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.pipe-fill {
  height: 100%;
  background: linear-gradient(90deg, #2196F3, #00BCD4);
  transition: width 0.5s ease;
}
</style>

SVG 实现复杂管道流动

对于需要弯曲管道的场景，可以使用 SVG 路径动画：

<template>
  <svg width="200" height="100" viewBox="0 0 200 100">
    <path 
      d="M20,50 Q100,0 180,50" 
      stroke="#ddd" 
      stroke-width="10" 
      fill="none"
    />
    <path 
      class="flowing-path" 
      d="M20,50 Q100,0 180,50" 
      stroke="#4CAF50" 
      stroke-width="8" 
      fill="none"
    />
  </svg>
</template>

<style>
.flowing-path {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: dash 3s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>

结合第三方库（如 GSAP）

对于更复杂的动画需求，可以使用 GSAP 库实现精细控制：

<template>
  <div ref="pipe" class="advanced-pipe"></div>
</template>

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

export default {
  mounted() {
    gsap.to(this.$refs.pipe, {
      backgroundPositionX: '100%',
      duration: 3,
      repeat: -1,
      ease: 'none'
    });
  }
};
</script>

<style>
.advanced-pipe {
  width: 300px;
  height: 30px;
  background: linear-gradient(90deg, #8BC34A, #CDDC39, #8BC34A);
  background-size: 200% 100%;
}
</style>

这些方法可根据具体需求选择使用，CSS 动画适合简单效果，SVG 适合复杂路径，GSAP 则提供更强大的动画控制能力。

vue实现管道流动