当前位置：首页 > VUE

vue实现冰墩墩

2026-02-09 17:15:18VUE

Vue 实现冰墩墩动画

使用 Vue 结合 CSS 动画和 SVG 可以创建一个冰墩墩的动画效果。以下是实现步骤：

安装 Vue 和相关依赖 确保已安装 Vue CLI 或 Vue 3 项目环境。如需动画效果，可安装 gsap 或 anime.js 库。

npm install gsap

创建冰墩墩 SVG 结构 在 Vue 组件中，使用 SVG 绘制冰墩墩的基本形状。以下是一个简化版的 SVG 代码示例：

<template>
  <div class="bing-dwen-dwen">
    <svg width="300" height="300" viewBox="0 0 300 300">
      <!-- 身体 -->
      <circle cx="150" cy="150" r="100" fill="#a5def1" />
      <!-- 头部 -->
      <circle cx="150" cy="80" r="60" fill="#a5def1" />
      <!-- 眼睛 -->
      <circle cx="130" cy="70" r="10" fill="#000" />
      <circle cx="170" cy="70" r="10" fill="#000" />
      <!-- 嘴 -->
      <path d="M130 100 Q150 120 170 100" stroke="#000" fill="none" />
    </svg>
  </div>
</template>

添加动画效果 使用 gsap 实现冰墩墩的简单动画，比如眨眼或挥手：

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

export default {
  mounted() {
    gsap.to(".bing-dwen-dwen circle", {
      y: -10,
      duration: 1,
      repeat: -1,
      yoyo: true,
    });
  },
};
</script>

样式优化 通过 CSS 增强视觉效果，比如阴影或渐变：

<style>
.bing-dwen-dwen {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

svg {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
}
</style>

进阶实现：动态交互

添加点击事件 为冰墩墩添加点击交互，触发动画：

<template>
  <div class="bing-dwen-dwen" @click="animate">
    <!-- SVG 代码同上 -->
  </div>
</template>

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

export default {
  methods: {
    animate() {
      gsap.to("circle", { scale: 1.1, duration: 0.5, yoyo: true, repeat: 1 });
    },
  },
};
</script>

响应式设计 通过 Vue 的响应式数据控制动画状态：

vue实现冰墩墩

<script>
export default {
  data() {
    return {
      isHappy: false,
    };
  },
  methods: {
    toggleMood() {
      this.isHappy = !this.isHappy;
      const path = document.querySelector("path");
      path.setAttribute(
        "d",
        this.isHappy ? "M130 100 Q150 130 170 100" : "M130 100 Q150 120 170 100"
      );
    },
  },
};
</script>