当前位置：首页 > VUE

vue框架实现樱花特效

2026-02-20 18:07:58VUE

实现樱花特效的方法

在Vue中实现樱花特效通常涉及使用Canvas绘制樱花飘落动画。以下是一个完整的实现方案，包含组件封装和动画控制。

创建樱花组件

新建一个Vue组件（如SakuraEffect.vue）用于处理樱花特效：

<template>
  <canvas ref="canvas" class="sakura-canvas"></canvas>
</template>

<script>
export default {
  name: 'SakuraEffect',
  data() {
    return {
      canvas: null,
      ctx: null,
      sakuraArray: [],
      animationFrame: null
    }
  },
  props: {
    count: {
      type: Number,
      default: 15
    },
    speed: {
      type: Number,
      default: 5
    }
  },
  mounted() {
    this.initCanvas()
    this.createSakura()
    this.animate()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrame)
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.canvas
      this.ctx = this.canvas.getContext('2d')
      this.resizeCanvas()
      window.addEventListener('resize', this.resizeCanvas)
    },
    resizeCanvas() {
      this.canvas.width = window.innerWidth
      this.canvas.height = window.innerHeight
    },
    Sakura(x, y, size, speed) {
      this.x = x
      this.y = y
      this.size = size
      this.speed = speed
      this.rotation = Math.random() * Math.PI * 2
      this.rotationSpeed = Math.random() * 0.01 + 0.003
    },
    createSakura() {
      for (let i = 0; i < this.count; i++) {
        const x = Math.random() * this.canvas.width
        const y = Math.random() * this.canvas.height
        const size = Math.random() * 10 + 5
        const speed = Math.random() * 2 + 1
        this.sakuraArray.push(new this.Sakura(x, y, size, speed))
      }
    },
    drawSakura(sakura) {
      this.ctx.save()
      this.ctx.translate(sakura.x, sakura.y)
      this.ctx.rotate(sakura.rotation)
      this.ctx.fillStyle = 'rgba(255, 183, 197, 0.7)'
      this.ctx.beginPath()
      for (let i = 0; i < 5; i++) {
        this.ctx.lineTo(0, sakura.size)
        this.ctx.translate(0, sakura.size)
        this.ctx.rotate((Math.PI * 2) / 10)
        this.ctx.lineTo(0, -sakura.size)
        this.ctx.translate(0, -sakura.size)
        this.ctx.rotate(((Math.PI * 6) / 10))
      }
      this.ctx.closePath()
      this.ctx.fill()
      this.ctx.restore()
    },
    updateSakura(sakura) {
      sakura.y += sakura.speed * this.speed / 10
      sakura.rotation += sakura.rotationSpeed
      if (sakura.y > this.canvas.height) {
        sakura.y = -20
        sakura.x = Math.random() * this.canvas.width
      }
    },
    animate() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.sakuraArray.forEach(sakura => {
        this.drawSakura(sakura)
        this.updateSakura(sakura)
      })
      this.animationFrame = requestAnimationFrame(this.animate)
    }
  }
}
</script>

<style scoped>
.sakura-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
}
</style>

在应用中使用组件

在需要樱花特效的页面中引入并使用该组件：

<template>
  <div>
    <!-- 其他页面内容 -->
    <SakuraEffect :count="30" :speed="3" />
  </div>
</template>

<script>
import SakuraEffect from '@/components/SakuraEffect.vue'

export default {
  components: {
    SakuraEffect
  }
}
</script>

自定义参数说明

count：控制樱花数量，默认15片
speed：控制飘落速度，默认5（值越大越快）

优化建议

性能优化：当页面不可见时暂停动画

document.addEventListener('visibilitychange', () => {
if (document.hidden) {
 cancelAnimationFrame(this.animationFrame)
} else {
 this.animate()
}
})

添加交互效果：鼠标移动时产生新的樱花

addMouseInteraction() {
window.addEventListener('mousemove', (e) => {
 if (Math.random() > 0.7) {
   const size = Math.random() * 10 + 5
   const speed = Math.random() * 2 + 1
   this.sakuraArray.push(new this.Sakura(e.clientX, e.clientY, size, speed))
   if (this.sakuraArray.length > 100) {
     this.sakuraArray.shift()
   }
 }
})
}