当前位置：首页 > VUE

vue实现凤凰效果

2026-01-15 23:11:37VUE

Vue 实现凤凰效果

凤凰效果通常指一种视觉动画，模拟凤凰展翅、火焰燃烧等动态效果。在 Vue 中实现这种效果，可以结合 CSS 动画、Canvas 或第三方动画库（如 GSAP）。以下是几种实现方式：

使用 CSS 动画实现火焰效果

通过 CSS 的 keyframes 和 transform 属性模拟火焰动态效果。

<template>
  <div class="phoenix-fire"></div>
</template>

<style>
.phoenix-fire {
  width: 100px;
  height: 100px;
  background: linear-gradient(to top, #ff3300, #ff9900);
  border-radius: 50%;
  animation: flicker 1s infinite alternate;
}

@keyframes flicker {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}
</style>

使用 Canvas 绘制凤凰动画

通过 Canvas 动态绘制凤凰的翅膀和火焰，结合 Vue 的生命周期控制动画。

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

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

    function drawPhoenix() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.save();
      ctx.translate(200, 200);

      // 绘制翅膀
      ctx.beginPath();
      ctx.fillStyle = '#ff6600';
      ctx.arc(0, 0, 50, angle, angle + Math.PI * 1.5);
      ctx.fill();

      // 绘制火焰
      ctx.beginPath();
      ctx.fillStyle = '#ff3300';
      ctx.arc(0, 0, 30, angle + Math.PI, angle + Math.PI * 2);
      ctx.fill();

      ctx.restore();
      angle += 0.05;
      requestAnimationFrame(drawPhoenix);
    }
    drawPhoenix();
  }
};
</script>

使用 GSAP 实现高级动画

GSAP 是一个强大的动画库，适合实现复杂的凤凰展翅效果。

<template>
  <div ref="phoenix" class="phoenix"></div>
</template>

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

export default {
  mounted() {
    const phoenix = this.$refs.phoenix;
    gsap.to(phoenix, {
      scale: 1.2,
      duration: 1,
      repeat: -1,
      yoyo: true,
      ease: 'power1.inOut'
    });
  }
};
</script>

<style>
.phoenix {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, #ff6600, #ffcc00);
  border-radius: 50%;
}
</style>

使用 SVG 动画

SVG 的路径动画适合表现凤凰的飞行轨迹。

<template>
  <svg width="400" height="400">
    <path ref="phoenixPath" d="M100,100 C200,200 300,50 400,100" fill="none" stroke="#ff6600" stroke-width="2"/>
    <circle ref="phoenixBody" cx="100" cy="100" r="10" fill="#ff9900"/>
  </svg>
</template>

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

export default {
  mounted() {
    const phoenixBody = this.$refs.phoenixBody;
    const path = this.$refs.phoenixPath;
    const length = path.getTotalLength();

    gsap.to(phoenixBody, {
      motionPath: {
        path: path,
        align: path,
        alignOrigin: [0.5, 0.5]
      },
      duration: 3,
      repeat: -1,
      ease: 'none'
    });
  }
};
</script>