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

惠民小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈小程序购物车抛物线动画的实现。

最新消息， 近日， 微信官方对小程序组件进行两个调整，给用户提供更自主的

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

要实现抛物线动画，我当时想到的是用插件的方式，网上有很多，但是要兼容小程序还是有点困难，况且小程序的主包有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).export();that.animationY = this.flyY(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,timingFunction: 'ease-in',})animation.translateY(bottomY-ballY).step();return animation;}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!