售前咨询:18660077704
在线咨询:0535-6676670
AM 9:00 - PM 18:00
19 2020-03

小程序购物车加入动画

发布日期:2020-03-19 09:29:52
浏览数:

      商品进入购物车的动画基本是电商商城的标志,但是在小程序中如何实现呢?下面就为大家介绍一下吧。

  分析

  要实现抛物线动画,我当时想到的是用插件的方式,网上有很多,但是要兼容小程序还是有点困难,况且小程序的主包有2M限制;

  那么如何在小程序中实现这种效果呢?

  wx.createAnimation

  css3 transition

  实现方式有了,我们再来看一下什么是抛物线,数学上定义抛物线的种类有很多,但就上图的效果而言,需要 水平方向匀速运动 & 垂直方向加速运动 ; wx.createAnimation 提供 timingFunction , 即水平方向 linear , 垂直方向 ease-in

  小程序实现

  本次实现基于 wepy框架 (非小程序原生),所以 $apply ---> setData 就好了~

  html

  点击

  JS

  // 设置延迟时间

  methods = {

  handleClick: (e) => {

  // x, y表示手指点击横纵坐标, 即小球的起始坐标

  let ballX = e.detail.x,

  ballY = e.detail.y;

  this.isLoading = true;

  this.$apply();

  this.createAnimation(ballX, ballY);

  }

  }

  setDelayTime(sec) {

  return new Promise((resolve, reject) => {

  setTimeout(() => {resolve()}, sec)

  });

  }

  // 创建动画

  createAnimation(ballX, ballY) {

  let that = this,

  bottomX = that.$parent.globalData.windowWidth,

  bottomY = that.$parent.globalData.windowHeight-50,

  animationX = that.flyX(bottomX, ballX), // 创建小球水平动画

  animationY = that.flyY(bottomY, ballY); // 创建小球垂直动画

  that.ballX = ballX;

  that.ballY = ballY;

  that.showBall = true;

  that.$apply();

  that.setDelayTime(100).then(() => {

  // 100ms延时, 确保小球已经显示

  that.animationX = animationX.export();

  that.animationY = animationY.export();

  that.$apply();

  // 400ms延时, 即小球的抛物线时长

  return that.setDelayTime(400);

  }).then(() => {

  that.animationX = this.flyX(0, 0, 0).export();

  that.animationY = this.flyY(0, 0, 0).export();

  that.showBall = false;

  that.isLoading = false;

  that.$apply();

  })

  }

  // 水平动画

  flyX(bottomX, ballX, duration) {

  let animation = wx.createAnimation({

  duration: duration || 400,

  timingFunction: 'linear',

  })

  animation.translateX(bottomX-ballX).step();

  return animation;

  }

  // 垂直动画

  flyY(bottomY, ballY, duration) {

  let animation = wx.createAnimation({

  duration: duration || 400,

  timingFunction: 'ease-in',

  })

  animation.translateY(bottomY-ballY).step();

  return animation;

  }


感觉好就要分享哦:

TAG标签:暂未添加标签