微信小程序完成简单的模仿抖音点赞效果动画wx.createAnimation

先看看效果图吧

很明显主要有两个重点
（1）是点击任意地方赞的按钮就在哪里出现
（2）是放大缩小
先看wxml吧

<view wx:if="{{swiperappear}}" data-time="{{lastTime}}" bindtap="dbclick"  style="height:{{swipers[current].height}}" hover-class="none" hover-stop-propagation="false">
      <image  style='width:100%; height:100%;' mode="aspectFill" src="{{swipers[0].url}}"   lazy-load="false" binderror="" bindload=""></image>
      <view wx:if="{{praise}}"    class="praisetop" style="position:absolute; left:{{row-50}}px; top:{{top-50}}px;width:210rpx;height:210rpx;">
        <image class="praisein" animation='{{animationMiddleHeaderItem}}' style="width:100%;height:100%;" src="../../images/praise.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
    </image>
  </view>

    </view>

• 在这里我们把点击事件叫bindtap被点击的图片放在下面加入animation
• 这个逻辑很简单点击然后praise变成true出现！！！但是有一个值得特别注意的地方就是praise一定要先出现给animation的动画执行时间

praise一定要在animation先出现在文档流这样才能完成动画效果
点在哪里点赞按钮就在哪里出现这个东西很简单一定要想清楚这个逻辑
（1）将x轴位置设为position飞出文档流然后将x轴绑上{{row}}row在dbclick事件的回参e.detail.x
（2）讲y轴位置设为position飞出文档流然后将x轴绑上{{top}}top在dbclick事件的回参e.detail.y

接下来我们看看js

dbclick:function(e){
    var that = this
    var curTime = e.timeStamp
    var lastTime = e.currentTarget.dataset.time
    if(curTime-lastTime>0){
      if(curTime-lastTime<600){
        console.log('asdhfkjasdk')
        that.setData({
          praise:true,
          top:e.detail.y,
          //y轴位置
          row:e.detail.x
     	//x轴位置
 
        })
        //接下来声明动画添加1秒，又快到慢
        var animationMiddleHeaderItem = wx.createAnimation({  
          duration:1000,    // 以毫秒为单位  
          timingFunction: 'ease-out'
        }); 
        animationMiddleHeaderItem.opacity(0.6).scale(0.5,0.5).step();
    //opacity动画加个透明度，scale表示放大缩小多少step表示执行完整个动画才执行下一个
        that.setData({
          animationMiddleHeaderItem: animationMiddleHeaderItem.export() //输出动画
     
        })
        setTimeout(() => {
          that.setData({
            praise:false
          })
        }, 1000);
        



        // 点赞开始
        api.getData2('/cgi-bin/api/freesamples/MiShow/like/?id=' + that.data.dataItem.id, { 'content-type': 'application/json', 'TOKEN': app.globalData.token }, function (res) {
          api.getData2('/cgi-bin/api/freesamples/MiShow/info/?id=' + that.data.id, { 'content-type': 'application/json', 'TOKEN': app.globalData.token }, function (res) {
            const obj = {
              ind: that.data.ind,
              nums: res.data.data.likes
            }
            app.globalData.updateLike = obj
          })
          console.log(res.data)
          if (res.data.result_code == 1) {
            console.log(that.data.dianzan)
            if (that.data.dianzan){
      
            }else{
              wx.showToast({
                title: '点赞成功',
                icon: 'none',
                duration: 2000
              })
              const dataItems = that.data.dataItem
              dataItems.likes = dataItems.likes + 1
              that.setData({
                dataItem: dataItems
              })
            }
            that.setData({
              dianzan: true
            })
          }
        })




         
            
        //   circleCount++;  
        //   if (circleCount == 1000) {  
        //     circleCount = 0;  
        //   }  
        // }.bind(that), 1000);
      }
    }

    that.setData({
      lastTime:curTime
    })

  },