微信小程序 抛物线动画

微信小程序 加入购物车抛物线动画，不是贝塞尔曲线，但效果还可以

wxml

<view bindtap="toCart" animation="{{animationCart2}}" style="position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999;{{toCartShow?'display:block':'display:none'}}">
    <view animation="{{animationCart1}}" style="width:50rpx;height:50rpx;">
        <image src='/pages/resource/img/heart.png' style="width:50rpx;height:50rpx;"></image>
    </view>
</view>

<view id='cart'></view>

js

//toCart 方法放在点击事件上
toCart: function(e) {
    let startX = e.changedTouches[0].clientX
    let startY = e.changedTouches[0].clientY
    console.log(startX, startY)
    let that = this
    var animation3 = wx.createAnimation({
        duration: 1,
        timingFunction: "step-start",
        delay: 0
    })
    var animation4 = wx.createAnimation({
        duration: 1,
        timingFunction: "step-start",
        delay: 0
    })
    animation3.translateX(startX).opacity(1).step()
    animation4.translateY(startY).step()
    this.setData({
        toCartShow:true,
        animationCart1: animation3.export(),
        animationCart2: animation4.export(),
    }, () => {
        //#cart为目标元素的id，请自行设置
        this.get_wxml('#cart', (rects) => {
            console.log('rects', rects)
            let targetX = rects[0].left
            let targetY = rects[0].top
            console.log(targetX, targetY)
            // 显示遮罩层
            var animation1 = wx.createAnimation({
                duration: 300,
                timingFunction: "ease-out",
                delay: 0
            })
            var animation2 = wx.createAnimation({
                duration: 300,
                timingFunction: "ease-in",
                delay: 0
            })
            animation1.translateX(targetX).opacity(0.3).step()
            animation2.translateY(targetY).step()
            this.setData({
                animationCart1: animation1.export(),
                animationCart2: animation2.export(),
            })
            setTimeout(()=>{
                this.setData({
                    toCartShow: false,
                })
            },300)
        })
    })
}
get_wxml: function(className, callback) {
    wx.createSelectorQuery().selectAll(className).boundingClientRect(callback).exec()
},