vue实现冰墩墩

Vue 实现冰墩墩动画

使用 Vue 结合 CSS 动画或 Canvas 可以实现冰墩墩的动画效果。以下是两种实现方式：

使用 CSS 动画

通过 Vue 的模板和样式绑定，结合 CSS 动画实现冰墩墩的简单动画。

<template>
  <div class="bing-dwen-dwen">
    <div class="head"></div>
    <div class="body"></div>
    <div class="arms"></div>
    <div class="legs"></div>
  </div>
</template>

<style>
.bing-dwen-dwen {
  position: relative;
  width: 200px;
  height: 300px;
}

.head {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 50%;
  top: 0;
  left: 50px;
  animation: bounce 2s infinite;
}

.body {
  position: absolute;
  width: 120px;
  height: 150px;
  background-color: white;
  border-radius: 60px 60px 0 0;
  top: 90px;
  left: 40px;
}

.arms, .legs {
  position: absolute;
  background-color: white;
}

.arms {
  width: 20px;
  height: 80px;
  top: 100px;
  left: 20px;
}

.legs {
  width: 30px;
  height: 60px;
  top: 240px;
  left: 85px;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
</style>

使用 Canvas 绘制

通过 Vue 的 ref 和生命周期钩子，使用 Canvas 绘制更复杂的冰墩墩动画。

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

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');

    function drawBingDwenDwen() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制头部
      ctx.beginPath();
      ctx.arc(150, 100, 50, 0, Math.PI * 2);
      ctx.fillStyle = 'white';
      ctx.fill();

      // 绘制身体
      ctx.beginPath();
      ctx.ellipse(150, 200, 60, 80, 0, 0, Math.PI * 2);
      ctx.fill();

      // 绘制四肢
      ctx.fillRect(100, 150, 20, 60);
      ctx.fillRect(180, 150, 20, 60);
      ctx.fillRect(130, 280, 20, 40);
      ctx.fillRect(150, 280, 20, 40);
    }

    function animate() {
      drawBingDwenDwen();
      requestAnimationFrame(animate);
    }

    animate();
  }
};
</script>

使用 SVG 和 Vue 绑定

通过 SVG 和 Vue 的数据绑定实现动态效果。

<template>
  <svg width="300" height="400">
    <circle cx="150" cy="100" r="50" fill="white" />
    <ellipse cx="150" cy="200" rx="60" ry="80" fill="white" />
    <rect x="100" y="150" width="20" height="60" fill="white" />
    <rect x="180" y="150" width="20" height="60" fill="white" />
    <rect x="130" y="280" width="20" height="40" fill="white" />
    <rect x="150" y="280" width="20" height="40" fill="white" />
  </svg>
</template>

以上方法可以根据需求选择，CSS 动画适合简单效果，Canvas 适合复杂绘制，SVG 适合矢量图形和动态绑定。