当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 小程序商城购物车抛物线动画的实现

小程序商城购物车抛物线动画的实现

2018-07-24 11:07 来源: 霸界科技

摘要:小程序商城购物车抛物线动画的实现,要如何开发,下面为大家介绍这篇文章。...

期权保本理财
  小程序商城购物车抛物线动画的实现,要如何开发,下面为大家介绍这篇文章。
 
小程序商城购物车抛物线动画的实现
 
  分析
 
  要实现抛物线动画,我当时想到的是用插件的方式,网上有很多,但是要兼容小程序还是有点困难,况且小程序的主包有2M限制;
 
  那么如何在小程序中实现这种效果呢?
 
  wx.createAnimation
 
  css3 transition
 
  实现方式有了,我们再来看一下什么是抛物线,数学上定义抛物线的种类有很多,但就上图的效果而言,需要 水平方向匀速运动 & 垂直方向加速运动 ; wx.createAnimation 提供 timingFunction , 即水平方向 linear , 垂直方向 ease-in
 
  小程序实现
 
  本次实现基于 wepy框架 (非小程序原生),所以 $apply ---> setData 就好了~
 
  html
 
  <view class="box">
 
  <view>
 
  <button bindtap="handleClick">点击</button>
 
  </view>
 
  <view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}">
 
  <view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view>
 
  </view>
 
  </view>
 
  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;
 
  }
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088