Scene description: usually, add to cart the animation will be above 3 lines, in this article, we come to realize 1 and 2 line of the dynamic effect of the add to cart (3 line animation effects of the Internet has a lot of, specific can refer to this article: www.cnblogs.com/greengage/p.) .

Implementation: We used CUBIC bezier (cubic Bezier curve) in CSS3 to achieve either effect. Specific what is three times of Bessel curve, you can refer to this article: www.bbsmax.com/A/RnJWwpbRJ…

# Implementation process:

1. Get the screen height
Wx.getsysteminfo ({// obtain the information about the page success:function (res) {
        wx.setStorageSync('systemInfo', res) var ww = res.windowWidth; var hh = res.windowHeight; that.globalData.ww = ww; that.globalData.hh = hh; }});Copy the code
2. Get the position of the click (the position of the shopping cart is set as the top or bottom) and define the moving distance
/* FlyToCarteffect:function[0] {var touches = events.touches[0]; var diff = { x:'25px',
      y: app.globalData.hh -touches.clientY-40 + 'px'// Touches. // y: 25-touches'px'}, style ='display: block; -webkit-transform:translate(' + diff.x + ', ' + diff.y + ') rotate(350deg) scale(0)'; // move distance this.setData({isFly:true,
      translateStyle: style
    });
    var that = this;
    setTimeout(() => {
      that.setData({
        isFly: false,
        translateStyle: '-webkit-transform: none; '// Restore to original state isShake:true});setTimeout(() => {
        var counts = that.data.cartTotalCounts + that.data.productCounts;
        that.setData({
          isShake: false,
          cartTotalCounts: counts
        });
      }, 200);
    }, 1000);
  },
Copy the code
3. Call beizer in CSS
.fiexd-cart.animate{
  animation: aCartScale 200ms cubic-bezier(.17,.67,.83,.67);
  animation-fill-mode: backwards;
}
Copy the code
ACartScale is, at the end of the curve, an animation of a shopping cart shake
@-webkit-keyframes aCartScale{0%{-webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); }}Copy the code
Now that the flow is complete, here is the code (there may be some useless CSS style code in it, you can remove it if you want) :
Js code:
var app = getApp(); Page({** ** ** ** ** ** */ data: {isFly:false}, /* Add to cart */ onAddingToCartTap:function(events) {// Prevent quick clicksif (this.data.isFly) {
      return; } this._flyToCartEffect(events); }, /* Add to cart */ _flyToCartEffect:function[0] {var touches = events.touches[0]; var diff = { x:'25px',
      y: app.globalData.hh -touches.clientY-40 + 'px'// Touches. // y: 25-touches'px'}, style ='display: block; -webkit-transform:translate(' + diff.x + ', ' + diff.y + ') rotate(350deg) scale(0)'; // move distance this.setData({isFly:true,
      translateStyle: style
    });
    var that = this;
    setTimeout(() => {
      that.setData({
        isFly: false,
        translateStyle: '-webkit-transform: none; '// Restore to original state isShake:true});setTimeout(() => {
        var counts = that.data.cartTotalCounts + that.data.productCounts;
        that.setData({
          isShake: false, cartTotalCounts: counts }); }, 200); }, 1000); }})Copy the code
WXML code:
<view class="container detail-container">
  <view class="fixed-btns-box" bindtap="onCartTap">
    <view class="fiexd-cart {{isShake? 'animate':''}}">
      <image src=".. /.. /imgs/icon/[email protected]"></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&imgt ype=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/[email protected]"></image>
      <view wx:if="{{cartTotalCounts>0}}">{{cartTotalCounts}}</view>
    </view>
  </view>

</view>
Copy the code
WXSS code:
.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; }Copy the code