小程序animation实现类似每日优鲜加入购物车动画

效果图：
效果图视频转gif效果较差，实际效果很好哦！

html:

<block wx:for="{{ leftList }}" wx:for-item="item" wx:key="leftList">
      <view class="goods-item" bindtap="gotoDetails" data-id="{{item.id}}">
        <image class='page_image class-image class-image-left' style='height:{{item.Height}}px' src='{{item.goodsPic}}' mode="aspectFill" id="{{'left' + index}}"></image>
        <image 
          src="{{addGoodsSrc}}" 
          class="animation-img" 
          style="height:{{item.Height}}px;opacity:{{showGoodsPic?'1':'0'}}"
          animation='{{goodsAnimation}}' 
        ></image>
        <view class='page_title' style='height:{{waterfallGap}}rpx'>
          <view class='page_title_spen'>{{ item.goodsName }}</view>
          <view class='goods-desc'>商品描述性文字</view>
          <view 
            class="goods-price-box" 
            catchtap="addCart" 
            data-src="{{item.goodsPic}}" 
            data-type = "left"
            data-index="{{index}}">
            <price-filter>
              <view slot="symbol">￥</view>
              <view slot="price">{{item.goodsPrice}}</view>
            </price-filter>
            <image class="add-cart-icon" src="/images/common/addCart.png" ></image>
            <view class="goods-num">{{item.sailNum}}</view>
          </view>
        </view>
      </view>
    </block>

css:

.goods-item{
  background: white;
  margin-bottom: 14rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.page_image{
  display: block;
  width: 100%;
}

.page_title{
  padding: 20rpx;
}
.page_title_spen{
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size: 30rpx;
  line-height: 36rpx;
  text-align: justify;
  color: #333
}

.goods-desc{
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  font-size: 28rpx;
  color: #999;
}

.goods-price-box{
  position: relative;
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.goods-num{
  position: absolute;
  min-width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  top: -16rpx;
  right: -16rpx;
  background: red;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  font-size: 20rpx;
}

.goods-sale-price{font-size: 34rpx;font-weight: bold;color:var(--price-color)}
.add-cart-icon{display: block;width: 56rpx;height: 56rpx}

.animation-img {
  position: fixed;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

js:

import debounce from "../../../debounce.js"; //函数节流，可以去掉
const animationBack = wx.createAnimation({ //还原商品动画的起始位置及图片大小
  duration: 50,
  timingFunction: 'linear'
})
const animation = wx.createAnimation({ //商品加入购物车动画
  duration: 500,
  timingFunction: 'ease-in'
})
let activeImgInfo = []
Component({
  data: {
    //购物车x坐标
    animationx: wx.getSystemInfoSync().windowWidth / 4 * 2.5,
    //购物车y坐标
    animationy: wx.getSystemInfoSync().windowHeight + 50,
    //是否显示飞行物，默认不显示
    showGoodsPic: true,
    //动画对象
    goodsAnimation: {},
    //当前点击的商品图片
    addGoodsSrc: '',
    count:1
  },

  methods: {
	//加入购物车
    addCart: debounce.throttle(function (e) {
      var that = this;
      let target = e[0].currentTarget.dataset;
      let activeId = '#' + target.type + target.index; //获取目标节点id
      const getEleInfo = this.createSelectorQuery();
      getEleInfo.select(activeId).boundingClientRect(function (rect) {
        activeImgInfo = [rect.width, rect.height, rect.top, rect.left]; //获取目标节点的信息(宽、高、top、left)
        that.setData({ //赋值点击的商品图片并展示
          addGoodsSrc: target.src
        }, function () {
          animationBack.left(activeImgInfo[3]).top(activeImgInfo[2]).width(activeImgInfo[0]).height(activeImgInfo[1]).step()
          that.setData({
            goodsAnimation: animationBack.export()
          })
          setTimeout(() => {
			animation.left(that.data.animationx).top(that.data.animationy).width(0).height(0).step()
            that.setData({
              showGoodsPic: true,
              goodsAnimation: animation.export()
            })
            setTimeout(() => {
              var counttemp = that.data.count + 1
              that.setData({
                showGoodsPic: false,
                count:counttemp
              })
            }, 500)
          }, 100)
        })
      }).exec()
      // this.triggerEvent("clickDom", e[0].currentTarget.dataset.data);
    }, 600)
  }
})