小程序轻量级点赞动画，基于CSS背景图实现

Posted 2021-06-08 Taro社区

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序轻量级点赞动画，基于CSS背景图实现相关的知识，希望对你有一定的参考价值。

问题由来

打卡鸭小程序中的点赞动画效果

优点

礼花造型的动画，其动画效果是随机产生的。据UI设计师的话来讲，就是可以促进用户多多点赞。

存在的问题

现象：在小程序的打卡列表中，点赞50次以上后，可能就无法继续点赞了。

我猜的原因为创建了50以上的画布Canvas，每个画布都加载10个图片，导致小程序性能不足，出现卡住。

完整源码

完整源码，请在小溪里博客本文链接（点击参看原文）中查看 SoureMap 来获得。

小程序礼花型点赞动画的说明：基于小程序的Canvas的 ctx.draw() 来实现的，得益于 Taro H5 有相应的 draw 的代码才得以展现。

部分源码如下

const ctx = Taro.createCanvasContext('like-animation')

let _rw = canvasWidth / 300
let _rh = canvasHeight / 150

likeTimer = setInterval(() => {

  likeList = likeList.filter(_l => _l.d >= -30).map(_l => {
    _l = nextXY(_l)
    if (_l.d <= 0) {
      ctx.save()
      ctx.scale(_rw, _rh)
      ctx.beginPath()
      if (-_l.d > 20) {
        let _ga = (_l.d + 30) / 10
        ctx.globalAlpha = _ga > 0.2 ? _ga : 0
      }
      ctx.drawImage(_l.img, _l.x, _l.y, 18, 18)
      ctx.fill()
      ctx.restore()
    }
    return _l
  })

  if (likeList.length === 0) {
    clear(options)
  }

  ctx.draw()
}, 30)

// 计算图片位置
function nextXY({ a, x, y, h, k, s, d, img }) {
  if (d <= 0) {
    x = x + s
    y = (a * Math.pow(x - h, 2)) + k
  }
  d = d - 3
  return { a, x, y, h, k, s, d, img }
}