//index.js

Page({

data: {

  animationData: {},

  animating: '',

},

onLoad: function () {

},

/*

 * t: current time（当前时间）；

 * b: beginning value（初始值）；

 * c: change in value（变化量）；

 * d: duration（持续时间）。

 */

bounceEaseOut: function (t, b, c, d) {//弹性线

  if ((t /= d) < (1 / 2.75)) {

    return c * (7.5625 * t * t) + b;

  } else if (t < (2 / 2.75)) {

    return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;

  } else if (t < (2.5 / 2.75)) {

    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;

  } else {

    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;

  }

},

easeOutBack: function (t, b, c, d, s) {//抛物线

  if (s == undefined) s = 1.70158;

  return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;

},

startAm: function (that, e) {

  var atime = 0.6//动画持续时间

  var etime = 100//动画结束时间

  that.setData({

    animating: e.target.dataset.goodsid

  })

  setTimeout(() => {

    that.setData({

      animating: ''

    })

  }, etime)

  var animation = wx.createAnimation({

    duration: 100,

    timingFunction: 'ease',

  })

  that.animation = animation

  //变化量坐标

  var offx = 320 / 2 - e.touches[0].clientX//购物车所在位置x - 加入购物车按钮的位置x

  var offy = 405- 50 - e.touches[0].clientY//购物车所在位置Y - 加入购物车按钮的位置Y

  //console.log("变化量坐标", offx, offy, that.bounceEaseOut(1 / 10, 0, offy, 1))

  //每1/10秒变化量坐标：

  //console.log("每1/10秒变化量坐标", offx / 10, that.bounceEaseOut(1 / 10, 0, offy, 1))

  animation

    .translate(1 * offx / 20, that.bounceEaseOut(1 / 20, 0, offy, atime)).step()

    .translate(2 * offx / 20, that.bounceEaseOut(2 / 20, 0, offy, atime)).step()

    .translate(3 * offx / 20, that.bounceEaseOut(3 / 20, 0, offy, atime)).step()

    .translate(4 * offx / 20, that.bounceEaseOut(4 / 20, 0, offy, atime)).step()

    .translate(5 * offx / 20, that.bounceEaseOut(5 / 20, 0, offy, atime)).step()

    .translate(6 * offx / 20, that.bounceEaseOut(6 / 20, 0, offy, atime)).step()

    .translate(7 * offx / 20, that.bounceEaseOut(7 / 20, 0, offy, atime)).step()

    .translate(8 * offx / 20, that.bounceEaseOut(8 / 20, 0, offy, atime)).step()

    .translate(9 * offx / 20, that.bounceEaseOut(9 / 20, 0, offy, atime)).step()

    .translate(10 * offx / 20, that.bounceEaseOut(10 / 20, 0, offy, atime)).step()

    .translate(11 * offx / 20, that.bounceEaseOut(11 / 20, 0, offy, atime)).step()

    .translate(12 * offx / 20, that.bounceEaseOut(12 / 20, 0, offy, atime)).step()

    .translate(13 * offx / 20, that.bounceEaseOut(13 / 20, 0, offy, atime)).step()

    .translate(14 * offx / 20, that.bounceEaseOut(14 / 20, 0, offy, atime)).step()

    .translate(15 * offx / 20, that.bounceEaseOut(15 / 20, 0, offy, atime)).step()

    .translate(16 * offx / 20, that.bounceEaseOut(16 / 20, 0, offy, atime)).step()

    .translate(17 * offx / 20, that.bounceEaseOut(17 / 20, 0, offy, atime)).step()

    .translate(18 * offx / 20, that.bounceEaseOut(18 / 20, 0, offy, atime)).step()

    .translate(19 * offx / 20, that.bounceEaseOut(19 / 20, 0, offy, atime)).step()

    .translate(20 * offx / 20, that.bounceEaseOut(20 / 20, 0, offy, atime)).step()

    .opacity(0).step().translate(0, 0).step().opacity(1).step()

  that.setData({

    animationData: animation.export()

  })

  setTimeout(function () {

    animation.translate(0, 0).step()

    that.setData({

      animationData: animation.export()

    })

  }.bind(this), etime)

},

cartPlus: function (e) {

  var that = this

   //加入购物车动画

  that.startAm(that,e)    

},

})

<view data-goodsId='' bindtap="cartPlus" animation='{{animating==im.goodsIdStr?animationData:""}}'>加入购物车</view >