小程序抛物线可连点加入购物车

首先构造小球层，小球层里应有一个inner层，用于控制匀速水平移动，而小球层就控制变速垂直移动，似乎这样就可实现抛物线运动了。（ps：其实我也不是很清楚，还有若真的弄成抛物线，小球总是下落不到终点就消失了，望大神解释下）

wxml:

<button class="shop" bindtap="addToCart">click</button>
<view class="cart-basket"></view>
<view 
    class="ball"
    wx:for="{{balls}}"
    wx:for-item="ball"
    wx:key="wx:key"
    style="{{ ball.inited ? 'transition: transform 0.5s ease-in; transform: translate3d(0, ' + offsetY + 'px,0); top: ' + ballY + 'px;' : '' }}">
    <view 
        class="inner"
        style="{{ ball.inited ? 'transition: transform 0.5s linear; transform: translate3d( ' + offsetX + 'px,0,0); left: ' + ballX + 'px; opacity: 1;' : '' }}"></view>
</view>

wxss:

.shop {
    width: 100px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0px;
    top: 5px;
}
.cart-basket {
    width: 48px;
    height: 48px;
    position: fixed;
    right: 106px;
    bottom: 43px;
    box-shadow: 0px -4px 16px 0px rgba(39,39,39,0.15), 0px 7px 16px 0px rgba(39,39,39,0.15);
    border-radius: 50%;
    background-color: #ffffff;
    z-index: 1;
}
.ball {
    position: fixed;
}
.ball .inner {
    width: 20px;
    height: 20px;
    position: fixed;
    background-color: lightpink;
    border-radius: 50%;
    opacity: 0;
}

js:

const BALLS_LENGTH = 5,
      BALL_HALF = 10;
function getBalls() {
    let balls = [];
    for (let i = 0; i < BALLS_LENGTH; i++) {
        balls.push({ inited: false });
    }
    return balls;
}

Page({
  data: {
    cartBasketRect: {},     // 购物车篮的rect信息
    offsetX: 0,
    offsetY: 0,
    ballX: 0,
    ballY: 0,
    balls: getBalls(),
  },
  onLoad () {
    this.getCartBasketRect();
  },
  getCartBasketRect () {
    wx.createSelectorQuery()
        .selectAll('.cart-basket')
        .boundingClientRect(rects => {
            rects.map(rect => {
                this.setData({
                    cartBasketRect: rect
                });
            });
        }).exec();
  },
  addToCart (e) {
    let ballX = e.touches[0].clientX - BALL_HALF,
        ballY = e.touches[0].clientY - BALL_HALF;
    let offsetX = -Math.abs(this.data.cartBasketRect.left - ballX + BALL_HALF),
        offsetY = Math.abs(this.data.cartBasketRect.top - ballY - BALL_HALF);
    const balls = this.data.balls;

    this.setData({
        ballX,
        ballY,
        offsetX,
        offsetY
    });

    for (let i = 0; i < BALLS_LENGTH; i++) {
        const ball = balls[i];
        if (!ball.inited) {
            ball.inited = true;
            this.setData({ balls });

            setTimeout(() => {
                ball.inited = false;
                this.setData({ balls });
            }, 500);
            break;
        }
    }
  }
})

github地址：https://github.com/kofzx/parabola
上照骗：

image.png

该demo似乎也有些许bug，希望不足之处能指出，一起学习改进。