成都微信小程序加入购物车动画的实现(向上、向下)

返回列表
来源:成都网站建设,由本站于2020-11-14 编辑发布,已经有143个小伙伴看过这篇文章啦!

场景描述:一般情况下,加入购物车的动画效果都会是上图的3的路线,在这篇文章里,我们来实现1和2路线的加入购物车的动效。 实现方式:不管是上图中的哪一种效果,我们都是用CSS3里的cubic-bezier(三次贝塞尔曲线)来实现的。



1、获取屏幕的高度大小 wx.getSystemInfo({//  获取页面的有关信息      success: function (res) {        wx.setStorageSync('systemInfo', res)        var ww = res.windowWidth;        var hh = res.windowHeight;        that.globalData.ww = ww;        that.globalData.hh = hh;      }    }); 复制代码 


2、获取点击的位置(购物车的位置我们定为最上方或者最下方),定义移动距离 /*加入购物车动效*/  _flyToCartEffect: function (events) {    //获得当前点击的位置,距离可视区域左上角    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)';  //移动距离    this.setData({      isFly: true,      translateStyle: style    });    var that = this;    setTimeout(() => {      that.setData({        isFly: false,        translateStyle: '-webkit-transform: none;',  //恢复到最初状态        isShake: true,      });      setTimeout(() => {        var counts = that.data.cartTotalCounts + that.data.productCounts;        that.setData({          isShake: false,          cartTotalCounts: counts        });      }, 200);    }, 1000);  }, 复制代码 


3、在css里调用beizer函数 .fiexd-cart.animate{  animation: aCartScale 200ms cubic-bezier(.17,.67,.83,.67);  animation-fill-mode: backwards; } 复制代码 aCartScale是,在曲线的最后,实现了个购物车抖动的动画 @-webkit-keyframes aCartScale{  0%{    -webkit-transform: scale(1.1);  }  100% {    -webkit-transform: scale(1);  } } 复制代码 至此,流程全部介绍完毕,下面是全部的代码(里面可能有一些没用的css样式代码,读者可以自行根据需要删除): js代码: var app = getApp(); Page({  /**   * 页面的初始数据   */  data: {    isFly:false  },  /*添加到购物车*/  onAddingToCartTap: function (events) {    //防止快速点击    if (this.data.isFly) {      return;    }    this._flyToCartEffect(events);  },  /*加入购物车动效*/  _flyToCartEffect: function (events) {    //获得当前点击的位置,距离可视区域左上角    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)';  //移动距离    this.setData({      isFly: true,      translateStyle: style    });    var that = this;    setTimeout(() => {      that.setData({        isFly: false,        translateStyle: '-webkit-transform: none;',  //恢复到最初状态        isShake: true,      });      setTimeout(() => {        var counts = that.data.cartTotalCounts + that.data.productCounts;        that.setData({          isShake: false,          cartTotalCounts: counts        });      }, 200);    }, 1000);  }, }) 复制代码 wxml代码。

关键词:小程序开发 成都小程序开发 微信小程序开发
18980020603