微信小程序使用画布实现飘落泡泡功能：从组件封装到页面调用的完整实践

先看示例截图：

一、背景与技术选型
在微信小程序中实现类似于飘落的泡泡或者樱花飘落的功能，一般主要有 Canvas 和图片两种方案：

（1）Canvas 方案：性能优异，资源占用小，但视觉表现依赖绘图 API
（2）图片方案：视觉效果真实，但资源加载与内存占用较高

本文将采用Canvas 方案实现飘落的泡泡组件，通过组件化设计提升代码复用性，并分享性能优化经验，帮助开发者在真实感与性能间找到平衡点。
二、组件设计与实现
2.1 组件结构设计
首先创建组件文件夹components/down-rain，目录结构如下：

components/
└─ down-rain/├── index.js         // 逻辑层├── index.wxml       // 视图层├── index.wxss       // 样式层├── index.json       // 配置文件

2.2 组件核心代码实现
以下是组件的完整实现：

Component({properties: {// 数量petalCount: { type: Number, value: 60 },//  大小petalSize: { type: Array, value: [3, 8] },// 下落速度speed: { type: Number, value: 2 },// 风力影响wind: { type: Number, value: 0.3 },},data: {canvasWidth: 0,canvasHeight: 0,ctx: null,animationTimer: null,petals: []},lifetimes: {attached() {this.initCanvas();},detached() {this.stopAnimation();}},methods: {// 初始化Canvasasync initCanvas() {const query = this.createSelectorQuery();query.select('.canvas').boundingClientRect();const { windowWidth, windowHeight } = wx.getSystemInfoSync();const canvas = wx.createCanvasContext('downCanvas', this);this.setData({canvasWidth: windowWidth,canvasHeight: windowHeight,ctx: canvas,petals: this.createPetals()});this.startAnimation();},// 创建花瓣数组 - 修改：从随机位置开始下落createPetals() {const { petalCount, petalSize } = this.properties;const { canvasWidth, canvasHeight } = this.data;const vanishLine = canvasHeight * 2 / 3; // 消失线位置return Array(petalCount).fill().map(() => {// 随机生成初始位置，y可以在画布上方const y = Math.random() * canvasHeight * 1.5 - canvasHeight * 0.5;return {x: Math.random() * canvasWidth,y,size: petalSize[0] + Math.random() * (petalSize[1] - petalSize[0]),speed: 0.5 + Math.random() * this.properties.speed,angle: Math.random() * Math.PI * 2,wind: (Math.random() - 0.5) * this.properties.wind,alpha: 0.5 + Math.random() * 0.5,startY: y, // 记录起始Y坐标用于计算消失visible: y < vanishLine // 初始可见性判断};});},// 开始动画startAnimation() {this.data.animationTimer = setInterval(() => {this.updatePetals();this.drawPetals();}, 30);},// 停止动画stopAnimation() {if (this.data.animationTimer) {clearInterval(this.data.animationTimer);}},// 更新位置updatePetals() {const { canvasWidth, canvasHeight, petals } = this.data;const vanishLine = canvasHeight * 2 / 3; this.setData({petals: petals.map(petal => {petal.y += petal.speed;petal.x += Math.sin(petal.angle) * petal.wind;petal.angle += 0.02;// 计算与消失线的距离比例const distanceRatio = Math.max(0, (petal.y - vanishLine) / (canvasHeight - vanishLine));// 超过消失线后逐渐消失if (distanceRatio > 0) {petal.alpha = Math.max(0, petal.alpha * (1 - distanceRatio));petal.visible = petal.alpha > 0;} else {petal.visible = true;petal.alpha = 0.5 + Math.random() * 0.5; // 重置透明度}// 完全消失后重置位置if (!petal.visible || petal.y > canvasHeight) {return {x: Math.random() * canvasWidth,y: -10, // 从顶部重新开始size: petal.size, // 保持原有大小speed: 0.5 + Math.random() * this.properties.speed,angle: Math.random() * Math.PI * 2,wind: petal.wind, // 保持原有风力影响alpha: 0.5 + Math.random() * 0.5,startY: -10,visible: true};}return petal;})});},// 绘制drawPetals() {const { ctx, petals } = this.data;ctx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);petals.forEach(petal => {if (petal.visible) {ctx.beginPath();ctx.arc(petal.x, petal.y, petal.size, 0, Math.PI * 2);ctx.fillStyle = `rgba(255, 192, 203, ${petal.alpha})`;ctx.fill();}});ctx.draw(false);},}
});

2.3 视图层实现

<canvas class="canvas" canvas-id="downCanvas"></canvas>

2.4 样式层实现

.canvas {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 999;
}

三、页面调用与集成
3.1 页面配置
在需要调用的界面的json文件处引入组件

{"usingComponents": {"down-rain": "/components/down-rain/index"},"navigationStyle": "custom"
}

3.2 页面布局

<down-rain petalCount="50" speed="5"></down-rain>

四、总结与拓展
本文通过组件化设计实现了微信小程序中基于Canvas 的飘落泡泡的效果。实际项目中，可根据活动预算和性能要求选择合适的实现方案：

（1）对性能要求高、视觉要求低的场景推荐使用 Canvas 方案
（2）对视觉效果要求高、预算充足的场景推荐使用图片方案

编写不易，谢谢点赞+收藏+关注，后续更新更多示例呦~