微信小程序加入购物车小圆点动画

    先看看是不是你想要的效果，免得浪费时间。初次发布，经验欠佳。还望见谅。

                                                                                                                                                                

看了好多文章，实现的方法有好多种。但是代码大多冗长难懂。于是借鉴多个作者的样例，自己稍加修改了一下。

思路是使用小程序的api animation.translate()来转移和复位，代码显得简洁易懂一点。 由于初学水平有限，还望指点一二。奉上qq号15966836，期望有志同道合的友人相互提点。话不多说，上代码。

test.wxss

.contain {
  height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;box-sizing: border-box;
} 
.item {
  width: 720rpx;height: 100rpx;display: flex;flex-direction: row;align-items: center;font-weight: bold;padding-left: 30rpx;border-bottom: 1rpx solid #efeff4;
}
.item-name{
  width: 80%;height: 99rpx;line-height: 99rpx;
}
.item-imgbox{
  width: calc(20% - 30rpx);height: 100rpx;position: relative;
}
.circle{
  width: 40rpx;height: 40rpx;
  position: absolute;right: 30rpx;top:30rpx ;
  
}
.item-img{
  width: 40rpx;height: 40rpx;
  position: absolute;right: 30rpx;top:30rpx ;
}
.hover {
  background: #d9d9db;
}
.bottom{
  position: fixed;bottom: 0px;left:0px;z-index: 5;
  height: 100rpx;width: 100%;
}
.bottomview{
  position: relative;
  height: 100rpx;width: 100%;background-color: #efeff4;
}
.shopcar {
  position: absolute;left: 40rpx;top: 20rpx;
}
.shopcarimg {
  width: 60rpx;height: 60rpx;
}
.countcircle {
  background-color: red;
  position: absolute;font-weight: bold;
  left: 90rpx;top:0rpx;
  width: 35rpx;height: 35rpx;line-height: 35rpx;
  border-radius: 20rpx;
  color: white;
  font-size: 30rpx;text-align: center;
}

test.wxml

<!--pages/shangjiadir/test/test.wxml-->
<scroll-view class="contain">
<view wx:for='1234567890123456789' class="item"  hover-class="hover"wx:key='item'>
<view class="item-name">商品{{index}}</view>
<view class="item-imgbox">

<image class="circle"
data-idx="{{index}}"src="/pages/icon/plus.png"
id="{{'img'+index}}"animation="{{anim[index]}}"></image>
<image class="item-img"src="/pages/icon/plus.png"
bindtap="addshopcar"data-idx="{{index}}"
></image>
</view>
</view>
</scroll-view>
<view class="bottom">
<view class="bottomview">
<view class="countcircle"wx:if="{{count > 0}}">{{count}}</view>
<view class="shopcar" id="shopcar"><image src="/pages/icon/box.png" class="shopcarimg"></image>
</view>
</view>
</view>

 test.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //购物车x坐标
    dsttop:0 ,
    //购物车y坐标
    dstleft:0 ,
    //商品记数
    count: 0,
    //每个元素上都创建一个animation对象
    anim:[],
   },
  onLoad(options){
    
  },
  onReady() {
    var that = this
    var arr = []
    for(var i = 0 ; i < 19 ; i++)
    {
      var ani = wx.createAnimation({duration: 300,timingFunction: 'linear'})//动画时长300毫秒，从从头到尾速度一致
      arr.push(ani)
    }
    this.setData({anim:arr})
    //获取购物车坐标
    wx.createSelectorQuery().select('#shopcar').boundingClientRect(function(res){
     that.setData({ 
       dsttop:res.top,
       dstleft:res.left
      })
    }).exec()
  },
  //点击加入购物车
  addshopcar(e){
    var idx = e.currentTarget.dataset.idx
    var dsttop = this.data.dsttop
    var dstleft = this.data.dstleft
    var top
    var left
    //根据元素id取得元素坐标
    wx.createSelectorQuery().select('#img'+idx).boundingClientRect(function(rect){
      left = rect.left    // 节点的左边界坐标
      top = rect.top   // 节点的上边界坐标
    }).exec()
      var that = this
      var anistr = "anim["+idx+"]"//只修改数组中的单个对象属性的写法
      //延时执行是为了等上面取到数据
      setTimeout(function(){
      that.data.anim[idx].translate(dstleft - left,dsttop - top).step()
      //导入动画
      that.setData({[anistr]: that.data.anim[idx].export()})
      //export()方法执行后返回的对象不是animation,所以重新创建一下
      that.setData({
        [anistr]:wx.createAnimation(),count:that.data.count +=1
      })
      setTimeout(function(){
      //待进入购物车动画完成后，将圆点位置还原  
      that.data.anim[idx].translate(0,0).step({duration:0})
      that.setData({[anistr]:that.data.anim[idx].export()})
      that.setData({[anistr]:wx.createAnimation()})
      },500)
      },50)        
  },
})