微信小程序直播间点赞动画在 uni-app 中不能直接用 canvas 动画，因其 2D canvas 不支持 drawImage 和稳定 requestAnimationFrame；推荐用 view + animation 实现轻量粒子效果，需节流、唯一 ID 管理及及时销毁节点防内存泄漏。
微信小程序直播间点赞动画在 uni-app 中为什么不能直接用 canvas 动画？
因为 uni-app 编译到微信小程序时，canvas 组件默认是 2D 上下文（type="2d"），但微信原生 createCanvasContext 的粒子动画依赖 drawImage、globalAlpha 和逐帧重绘能力，而 uni-app 的 canvas 2D 实现不支持 drawImage（会报错 canvas.drawImage is not a function），也不支持 requestAnimationFrame 的稳定回调。直接搬原生 JS 粒子逻辑会白屏或卡死。
用 view + animation 实现轻量级点赞粒子效果（推荐）
放弃 canvas，改用 uni-app 原生 animation API 驱动多个 view 元素飞出，性能足够、兼容性好、调试直观。
- 每个点赞生成 3–5 个
view，用绝对定位从按钮中心出发 - 用
uni.createAnimation设置不同top/left终点、旋转角度、透明度渐变和缩放 - 动画时长控制在
600ms左右，避免堆积；动画结束后removeChild或用v-if销毁节点 - 注意：微信小程序中
animation的transformOrigin默认是50% 50%，无需额外设置
示例关键代码：
const animation = uni.createAnimation({
duration: 600,
timingFunction: 'ease-out'
})
animation.translate(100, -120).rotate(180).opacity(0).scale(0.6)
this.$nextTick(() => {
this.animationData = animation.export()
})
uni-app 中如何批量管理点赞粒子并防止内存泄漏？
频繁触发点赞会导致 view 节点无限累积，尤其在滚动列表里。必须手动清理。
- 给每个粒子加唯一
id（如timestamp + Math.random()），存入数组this.particles - 动画结束时通过
@animationend或setTimeout触发清除逻辑（微信小程序中@animationend有时不触发，建议双保险） - 使用
v-if而非v-show控制显隐，确保 DOM 真实移除 - 在页面
onUnload或组件beforeDestroy（Vue 2）/unmounted（Vue 3）中清空定时器和粒子数组
真要上 canvas 粒子？只能走 cover-view + 原生小程序插件桥接
如果设计要求极高（比如百粒子同屏、带轨迹拖尾），uni-app 自身 canvas 不可行，得绕路：
- 用
cover-view+cover-image叠在live-player上层做伪粒子（限制多，不能遮挡操作按钮） - 或在
mp-weixin平台下，用requirePlugin引入微信官方live-pusher插件的配套 UI 组件（部分版本支持自定义点赞浮层） - 更彻底的方案：把直播间页面单独写成原生小程序分包，通过
uni.navigateToMiniProgram跳转，uni-app 只负责入口和用户态同步
多数业务场景里，view + animation 方案已足够 —— 用户感知不到 canvas 和 CSS 动画的区别，但稳定性高得多。
粒子数量一超过 20 个/秒，就必须加节流（比如 lastTap + 300ms 内忽略重复点赞），否则动画队列会崩。这点容易被忽略，但线上最容易因此卡顿。
