小程序直播间点赞向上随机飘动画

本片文章不涉及canvas

动画实现技术 小程序关键帧动画

从小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation 。它具有更好的性能和更可控的接口。

本人在爬坑的时候遇到了一个贝塞尔函数做的 canvas动画，但是该动画智能开启定时器，比较耗费资源，而且第一组动画不做完是做不了第二次的，opacity也不能改变

于是我想到了wx.createAnimation()，但是这种动画写起来比较麻烦

效果图

<block wx:for="{{list}}" wx:key="index">
<image class="heart_img {{number == index?'active': ''}}" src="/assets/img/{{item}}.png"></image>
</block>

data: {
    list: ['aixin', 'gouwudai', 'qunzi', 'taiyang', 'yueliang'],
    number: -1
  },

randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
          break;
        default:
          return 0;
          break;
      }
    },
translate() {
      // 随机数
      let randomNum = this.randomNum(-30, 30)
      // number是控制active的
      this.setData({
        number: this.data.number + 1
      }, () => {
        if (this.data.number > 4) {
          this.setData({
            number: -1
          })
        }
      })
      // .active 是选择器
      this.animate('.active', [{
          opacity: 1,
          translateY: 0
        },
        {
          opacity: 0,
          translate: [randomNum, -200]
        },
      ], 1000, function () {
		//动画完成后的回调函数
      }.bind(this))
    }

实现原理，准备几个image标签，给一个类名active来 控制动画效果，这里可以用一个列表循环渲染出来image，用一个变量与index作比较形添加active类名，有active 类名的图片才会去做动画

但是此做法智能循环做动画图片，如果想让图片随机，可以考虑渲染的时候 图片的随机

附上微信文档：关键帧动画

希望可以帮助大家解决难题