微信小程序实现拼团成功动画

 

微信小程序实现如上效果。

分为两个组件:

• PinTuan: 整体组件
• PinTuanHead: 每个头像组件

代码如下：

PinTuan.js

Component({
  attached:function() {
    // 获取头像地址数据，返回一个头像地址数组
    notification.addObserver('你自己的消息事件', (config) => {
      this._getServeHeadData(config);
    }, this);
  },

  detached: function() {
    this._stopInterval();
    this._stopTimeOut();
  },

  ready: function() {
    // 初始化适配rpx
    this._initRpx();
  },
  
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    personNum: 1,
    successedImg: 'XXX.png',
    joinText: "即将成团",
    clockText: "00:00:00",  // 倒计时文字初始值
    headsArr: [],  // 所有头像url地址库
    headUrls: [],  // 头像url数组
    moveHead: '',  // 头像飞动图片
    headAniData: {},  // 头像动画animation
    successAni: {},  // 成功动画animation
    pinTuanAni: {},  // 拼团整体上滚刷新animation
    headAniOrigin: true,  // 头像飞动动画是否归位
    successAniOrigin: true,  // 成功动画是否归位
    pinTuanAniOrigin: true,  // 拼团组件动画是否归位
    pinTuanSuccess: false,  // 拼团成功图标显示
    countDownSeedTimer: 10,  // 倒计时最小随机数，也是拼团成功最大时间随机数
    pinTuanMinSeedTimer: 3,  // 拼团最小随机时间
    maxHour: 8,  // 倒计时随机最大小时
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _getServeHeadData: function(config) {
      console.log('check config = ', config)
      // 初始化服务器配置
      if (!config.recent) return;
      const recent = config.recent;
      
      this.setData({
        headsArr: recent,
      });

      this._updateHeadAni();
      this._updateCountDown();
    },

    _initRpx: function() {
      // 适配屏幕移动距离
      wx.getSystemInfo({
        success: res => {
          let rpx = 1 * (res.windowWidth * res.pixelRatio) / (375 * res.pixelRatio);
          this.setData({
            rpx: rpx
          });
        },
      })
    },

    _randomCountDownTime: function(time) {
      if (time < 0) {
        this._stopInterval();
        return;
      }
      let hour = Math.floor(time / 3600) % 10;
      let minute = Math.floor((time / 60) % 60);
      let second = Math.floor(time % 60);
      let timeStr = '0' + hour + ':' + (minute < 10 ? ('0' &