支付宝小程序商品加入购物车动画

思路：一个盒子做匀速运动，盒子里的小球做变速运动

js
Page({
  data: {
    tran: [ ],//传参//1小球纵向移动距离//0小球横向移动距离//2//购物车宽度
    clientY: 0,//点击位置y坐标
    cartX: 0,//购物车左边位置
    cartY: 0,//购物车图表上边位置
    list: [{ name: '商品1' }, { name: '商品2' }, { name: '商品3' }],
    width: 0,//购物车宽
    show: false,
    flag: false,
  },
  onLoad() {
  },
  onReady() {
   my.createSelectorQuery()//获取动态点坐标,作为动画初始值
      .select('#cart').boundingClientRect()
      .exec((ret) => {
        console.log(ret)//动态点位置信息
        this.setData({
          cartX: ret[0].left,
          cartY: ret[0].top,
          width: ret[0].width,
        })
      })
  },
  add(e) {
    if (this.data.flag) {
      return;
    }
    let that = this
    let tran = [e.detail.clientX, e.detail.clientY - this.data.cartY,this.data.width]//传参,运动参数横向距离,总想距离,购物车宽度
    let position=[e.detail.clientX - this.data.cartX,e.detail.clientY - this.data.cartY]//传参,小球运动起点位置
   console.log(tran,position)
    this.setData({//圆点就为
      tran,
      position,
      show: true,
      flag: true,
    }, () => {
      this.init.init()//使用子组件中自定义事件
    })

    //动画结束执行数据回归初始化
    setTimeout(function () {
      that.setData({
        show: false,
        flag: false
      })
    }, 1000)
  },
  flyCart(ref) {//获取组件实例
    console.log(ref)
    this.init = ref
  },
  cart(e) {
    console.log(e.detail)

  }
});

///html
<view class="one" a:for="{{list}}">
  <text>{{item.name}}</text>
  <view class="pot">
    <text style="font-size:28px;padding:5px 30px;" onTap="add" ref="flyCart" >+</text>
  </view>
</view>

<view class="btn">
 <my-component7 ref="flyCart"
  tranY="{{tranY}}" 
    show="{{show}}"
     tran="{{tran}}"
     position="{{position}}"
     />
  <text id="cart" onTap="cart">购物车</text>
</view>

///css
.one{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
page{
  background: #fff;
}


.btn{
  position: fixed;
  background: #999;
  bottom:40px;
  left: 5px;

  
}

.box{
  width: 10px;
  height:10px;
  border-radius: 10px;
  /* border: 1px solid #999; */
    position: absolute;

}
.dian{
  width: 10px;
  height:10px;
  background: red;
  border-radius: 10px;
}

运动组件在附件