場(chǎng)景描述：一般情況下，加入購(gòu)物車(chē)的動(dòng)畫(huà)效果都會(huì)是上圖的3的路線(xiàn)，在這篇文章里，我們來(lái)實(shí)現(xiàn)1和2路線(xiàn)的加入購(gòu)物車(chē)的動(dòng)效（3路線(xiàn)的動(dòng)畫(huà)效果網(wǎng)上有很多，具體可以參考這篇文章來(lái)實(shí)現(xiàn)： www.cnblogs.com/greengage/p… ）。

實(shí)現(xiàn)方式：不管是上圖中的哪一種效果，我們都是用CSS3里的cubic-bezier（三次貝塞爾曲線(xiàn)）來(lái)實(shí)現(xiàn)的。具體什么是三次貝塞爾曲線(xiàn)，可以參考這篇文章： www.bbsmax.com/A/RnJWwpbRJ…

#實(shí)現(xiàn)流程：

1、獲取屏幕的高度大小

wx.getSystemInfo({//  獲取頁(yè)面的有關(guān)信息
      success: function (res) {
        wx.setStorageSync('systemInfo', res)        var ww = res.windowWidth;        var hh = res.windowHeight;
        that.globalData.ww = ww;
        that.globalData.hh = hh;
      }
    });

2、獲取點(diǎn)擊的位置（購(gòu)物車(chē)的位置我們定為最上方或者最下方），定義移動(dòng)距離

/*加入購(gòu)物車(chē)動(dòng)效*/
  _flyToCartEffect: function (events) {    //獲得當(dāng)前點(diǎn)擊的位置，距離可視區(qū)域左上角
    var touches = events.touches[0];    var diff = {      x: '25px',      y: app.globalData.hh -touches.clientY-40 + 'px'//向下
      // y: 25- touches.clientY  + 'px'//向上

    },
      style = 'display: block;-webkit-transform:translate(' + diff.x + ',' + diff.y + ') rotate(350deg) scale(0)';  //移動(dòng)距離
    this.setData({      isFly: true,      translateStyle: style
    });    var that = this;
    setTimeout(() => {
      that.setData({        isFly: false,        translateStyle: '-webkit-transform: none;',  //恢復(fù)到最初狀態(tài)
        isShake: true,
      });
      setTimeout(() => {        var counts = that.data.cartTotalCounts + that.data.productCounts;
        that.setData({          isShake: false,          cartTotalCounts: counts
        });
      }, 200);
    }, 1000);
  },

3、在css里調(diào)用beizer函數(shù)

.fiexd-cart.animate{  animation: aCartScale 200ms cubic-bezier(.17,.67,.83,.67);  animation-fill-mode: backwards;
}

aCartScale是，在曲線(xiàn)的最后，實(shí)現(xiàn)了個(gè)購(gòu)物車(chē)抖動(dòng)的動(dòng)畫(huà)

@-webkit-keyframes aCartScale{
  0%{    -webkit-transform: scale(1.1);
  }
  100% {    -webkit-transform: scale(1);
  }
}

至此，流程全部介紹完畢，下面是全部的代碼（里面可能有一些沒(méi)用的css樣式代碼，讀者可以自行根據(jù)需要?jiǎng)h除）：

js代碼：

var app = getApp();
Page({  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {    isFly:false
  },  /*添加到購(gòu)物車(chē)*/
  onAddingToCartTap: function (events) {    //防止快速點(diǎn)擊
    if (this.data.isFly) {      return;
    }    this._flyToCartEffect(events);
  },  /*加入購(gòu)物車(chē)動(dòng)效*/
  _flyToCartEffect: function (events) {    //獲得當(dāng)前點(diǎn)擊的位置，距離可視區(qū)域左上角
    var touches = events.touches[0];    var diff = {      x: '25px',      y: app.globalData.hh -touches.clientY-40 + 'px'//向下
      // y: 25- touches.clientY  + 'px'//向上

    },
      style = 'display: block;-webkit-transform:translate(' + diff.x + ',' + diff.y + ') rotate(350deg) scale(0)';  //移動(dòng)距離
    this.setData({      isFly: true,      translateStyle: style
    });    var that = this;
    setTimeout(() => {
      that.setData({        isFly: false,        translateStyle: '-webkit-transform: none;',  //恢復(fù)到最初狀態(tài)
        isShake: true,
      });
      setTimeout(() => {        var counts = that.data.cartTotalCounts + that.data.productCounts;
        that.setData({          isShake: false,          cartTotalCounts: counts
        });
      }, 200);
    }, 1000);
  },

})

wxml代碼：

<view class="container detail-container">
  <view class="fixed-btns-box" bindtap="onCartTap">
    <view class="fiexd-cart {{isShake?'animate':''}}">
      <image src="../../imgs/icon/cart@top.png"></image>
      <view wx:if="{{cartTotalCounts>0}}">{{cartTotalCounts}}</view>
    </view>
  </view>

  <view 
  style="position: fixed;right: 50rpx;bottom:100rpx;width: 100rpx;"
  class="add-cart-btn {{product.stock==0?'disabled':''}}" bindtap="onAddingToCartTap">
    <text style="width: 360rpx">加入分享</text>
    <image class="cart-icon" src="../../imgs/icon/cart.png"></image>
    <image id="small-top-img" class="small-top-img {{isFly?'animate':''}}" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575871576&di=dda9d07660c88bea6553c3279b0a8cf0&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.pc6.com%2Fup%2F2011-9%2F2011926155953.jpg"
      mode="aspectFill" style="{{translateStyle}}"></image>
  </view>


  

  <view class="fixed-btns-box2" bindtap="onCartTap">
    <view class="fiexd-cart {{isShake?'animate':''}}">
      <image src="../../imgs/icon/cart@top.png"></image>
      <view wx:if="{{cartTotalCounts>0}}">{{cartTotalCounts}}</view>
    </view>
  </view></view>

wxss代碼：

.detail-container {  background-color:#F9F9F9}.detail-header-box,.detail-bottom-box{  background-color: #fff;
}.detail-topic-img{  display: flex;  justify-content: center;
}.detail-topic-img image{  width: 100%;
}.fixed-btns-box{  position: fixed;  top:50rpx;  right:12px;  width: 80rpx;

}.fixed-btns-box2{  position: fixed;  right:12px;  width: 80rpx;  bottom: 50rpx;

}.fiexd-cart image{  height: 64rpx;  width: 64rpx;
}.fiexd-cart view{  font-size: 24rpx;  background-color: #AB956D;  color: white;  position: absolute;  right: 64rpx;  top: 0rpx;  height: 36rpx;  width: 36rpx;  line-height: 36rpx;  border-radius: 36rpx;  text-align: center;
}.fiexd-cart.animate{  animation: aCartScale 200ms cubic-bezier(.17,.67,.83,.67);  animation-fill-mode: backwards;
}

@-webkit-keyframes aCartScale{
  0%{    -webkit-transform: scale(1.1);
  }
  100% {    -webkit-transform: scale(1);
  }
}.product-counts,.add-cart-btn{  height: 100%;  display: flex;  font-size: 24rpx;  align-items: center;  justify-content: center;
}.product-counts{  width: 50%;
}.add-cart-btn{  position: relative;  flex: 1;
}.add-cart-btn:active{  color: #fff;
}.add-cart-btn.disabled{  color: #D5D5DB;
}.small-top-img{  height: 160rpx;  width: 160rpx;  right:6rpx;  position: absolute;  opacity: 0;
}.small-top-img.animate{  opacity: 1;  -webkit-transition:all 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}.add-cart-btn .cart-icon{  margin-left: 40rpx;  height: 32rpx;  width: 32rpx;
}.disabled{    pointer-events: none;
}