公司设计网站有什么好处,爱心建站网,安陆网站建设,seo博客写作微信小程序使用画布实现飘落泡泡功能#xff1a;从组件封装到页面调用的完整实践
先看示例截图#xff1a;
一、背景与技术选型 在微信小程序中实现类似于飘落的泡泡或者樱花飘落的功能#xff0c;一般主要有 Canvas 和图片两种方案#xff1a;
#xff08;1#xff…微信小程序使用画布实现飘落泡泡功能从组件封装到页面调用的完整实践
先看示例截图
一、背景与技术选型 在微信小程序中实现类似于飘落的泡泡或者樱花飘落的功能一般主要有 Canvas 和图片两种方案
1Canvas 方案性能优异资源占用小但视觉表现依赖绘图 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 classcanvas canvas-iddownCanvas/canvas2.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 petalCount50 speed5/down-rain四、总结与拓展 本文通过组件化设计实现了微信小程序中基于Canvas 的飘落泡泡的效果。实际项目中可根据活动预算和性能要求选择合适的实现方案
1对性能要求高、视觉要求低的场景推荐使用 Canvas 方案 2对视觉效果要求高、预算充足的场景推荐使用图片方案
编写不易谢谢点赞收藏关注后续更新更多示例呦~
