当前位置：首页 > VUE

vue实现凤凰效果

2026-03-28 23:35:59VUE

Vue 实现凤凰效果

在 Vue 中实现凤凰效果通常可以通过动画库（如 GSAP 或 CSS 动画）结合 SVG 或 Canvas 来实现。以下是几种常见方法：

使用 GSAP 实现动画

GSAP 是一个强大的动画库，适合实现复杂的动画效果，如凤凰飞舞。安装 GSAP 后，可以通过 Vue 的生命周期钩子触发动画。

<template>
  <div ref="phoenixContainer" class="phoenix-animation"></div>
</template>

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

export default {
  mounted() {
    const phoenix = this.$refs.phoenixContainer;
    gsap.to(phoenix, {
      x: 100,
      y: -50,
      rotation: 360,
      duration: 2,
      repeat: -1,
      yoyo: true,
    });
  },
};
</script>

使用 SVG 和 CSS 动画

通过 SVG 绘制凤凰图形，并使用 CSS 动画实现火焰和飞舞效果。

<template>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <path 
      ref="phoenixPath" 
      d="M10 80 Q 100 10 190 80" 
      fill="none" 
      stroke="orange" 
      stroke-width="2"
    />
    <circle cx="10" cy="80" r="5" fill="red" class="phoenix-body" />
  </svg>
</template>

<style>
.phoenix-body {
  animation: fly 3s infinite alternate;
}

@keyframes fly {
  0% { transform: translate(0, 0); }
  100% { transform: translate(180px, -50px); }
}
</style>

使用 Canvas 绘制动态效果

Canvas 适合实现更复杂的动态效果，如火焰粒子系统。

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

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

    function drawPhoenix() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'orange';
      ctx.beginPath();
      ctx.arc(100, 100, 20, 0, Math.PI * 2);
      ctx.fill();

      requestAnimationFrame(drawPhoenix);
    }

    drawPhoenix();
  },
};
</script>

结合第三方库（如 Three.js）

如果需要 3D 凤凰效果，可以使用 Three.js 在 Vue 中实现。

vue实现凤凰效果

<template>
  <div ref="phoenix3d"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  mounted() {
    const container = this.$refs.phoenix3d;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);

    const geometry = new THREE.BufferGeometry();
    const material = new THREE.PointsMaterial({ color: 0xff9900, size: 0.1 });
    const particles = new THREE.Points(geometry, material);
    scene.add(particles);

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame(animate);
      particles.rotation.x += 0.01;
      renderer.render(scene, camera);
    }

    animate();
  },
};
</script>