vue实现能量球

Vue 实现能量球效果

实现能量球效果可以通过结合 Vue 的动态数据绑定和 CSS 动画完成。以下是一个完整的实现方案，包含动态能量填充和交互效果。

基础结构

创建 Vue 组件模板，包含一个圆形能量球容器和内部填充层：

<template>
  <div class="energy-ball-container">
    <div 
      class="energy-ball" 
      :style="{ '--energy-level': energyLevel }"
      @click="addEnergy"
    >
      <div class="energy-fill"></div>
      <span class="energy-text">{{ energyLevel }}%</span>
    </div>
  </div>
</template>

脚本部分

使用 Vue 的响应式数据管理能量值：

<script>
export default {
  data() {
    return {
      energyLevel: 30 // 初始能量值
    }
  },
  methods: {
    addEnergy() {
      this.energyLevel = Math.min(this.energyLevel + 10, 100)
    }
  }
}
</script>

样式设计

通过 CSS 变量实现动态高度，并使用渐变色彩增强视觉效果：

<style scoped>
.energy-ball-container {
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.energy-ball {
  --size: 200px;
  --border-width: 8px;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #e0e0e0;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 0 15px rgba(0,0,0,0.2),
    0 5px 20px rgba(0,0,0,0.1);
  cursor: pointer;
}

.energy-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(var(--energy-level) * 1%);
  background: linear-gradient(
    to top, 
    #00b4db, 
    #0083b0
  );
  transition: height 0.5s ease-out;
}

.energy-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  z-index: 2;
}
</style>

高级效果增强

添加粒子动画提升视觉冲击力：

// 在 methods 中添加粒子效果方法
generateParticles() {
  const ball = this.$el.querySelector('.energy-ball')
  for (let i = 0; i < 10; i++) {
    const particle = document.createElement('div')
    particle.classList.add('energy-particle')
    particle.style.left = `${Math.random() * 100}%`
    particle.style.animationDelay = `${Math.random() * 0.5}s`
    ball.appendChild(particle)
  }
}

对应 CSS 粒子样式：

.energy-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  bottom: 0;
  opacity: 0;
  animation: float-up 1.5s ease-in infinite;
}

@keyframes float-up {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

响应式交互

添加能量耗尽警告效果：

watch: {
  energyLevel(newVal) {
    if (newVal < 20) {
      this.$el.querySelector('.energy-ball').classList.add('warning')
    } else {
      this.$el.querySelector('.energy-ball').classList.remove('warning')
    }
  }
}

警告状态样式：

.energy-ball.warning {
  animation: pulse 0.8s infinite alternate;
}

@keyframes pulse {
  from {
    box-shadow: 0 0 0 0 rgba(255, 50, 50, 0.7);
  }
  to {
    box-shadow: 0 0 0 10px rgba(255, 50, 50, 0);
  }
}

这个实现方案包含了完整的交互逻辑和视觉效果，通过点击能量球可以增加能量值，能量低于20%时会触发警告动画，同时伴有粒子上升效果增强视觉反馈。