这篇文章主要为大家展示了“怎么用html5实现小程序商品飞入购物车”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么用html5实现小程序商品飞入购物车”这篇文章吧。

思考如果实现 ？ 超级简单的！

无论是小程序还是h6飞入购物车无非就是 平抛 ，或者是 上抛 两种情况，对于这两种情况，初中就开始学习抛物线理论知识是完全可以搞定的，高中一年级物理学的自由落体运动，平抛运动就是抛物线理论的具体实现。

平抛运动

上抛运动

构建虚拟直角坐标系，抛物线绘制轨迹点

此方案的本质就是，根据购物车起点和终点，分别做为抛物线的两点，这样一个感念就是要以起始点作为直角坐标系（0，0）方便后续其他坐标点的运算。还有一个应该注意的是，如果是配置了上抛h偏移量 ，就要求最高点（顶点）坐标 此方案均适合 H5 ,小程序：

/***飞入购物车，轨迹点绘制*@author????*@param{Array}start`在这里插入代码片`Point起点clientX,clientY值(必要)*@param{Array}endPoint终点clientX,clientY值(必要)*@param{number}point点数(必要)*@param{number}h抛物线向上高度(上抛运动)(可选)*@param{number}hclientX当存在h情况下，达到最高点时候的clientX值*@return{Array}[left,top]值组成的数组*/functionflycart(startPoint,endPoint,point,h=0,hclientX){/*设置startPoint为(0,0)点,此抛物线经过(0,0)点，可以推到出模型关系式y=ax^2+bx或者y=ax^21当存在h的情况，抛物线会y轴向上偏移h,此时的关系式y=ax^2+bx2当不存在h的情况，抛物线startPoint为顶点，此时关系式y=ax^2*//*参数校验*/functionValidityparameter(){letisOkey=trueArray.isArray(startPoint)&&startPoint.length!==2&&(isOkey=false)Array.isArray(endPoint)&&endPoint.length!==2&&(isOkey=false)(point.constructor!==Number)&&(isOkey=false)returnisOkey}/*参数验证*/if(!Validityparameter()){return[]}/*A点横坐标*/constxA=0/*A点纵坐标*/constyA=0/*x轴偏移量*/constoffsetX=startPoint[0]/*y轴偏移量*/constoffsetY=startPoint[1]/*B点横坐标*/constxB=endPoint[0]-offsetX/*B纵坐标*/constyB=endPoint[1]-offsetY/*根据B点坐标和最大高度h求系数a,b参数*/letb=0leta=0/*计算系数a,b*/functionhanderComputer(){if(h<10){a=yB/Math.pow(xB,2)}else{/*因为一般购物车的情况都是向下，实际上我们购物车的坐标系是反向的，所以我们这里要把h设置成负值*/h=-h/*一元二次求解a,b，现在知道一点(xB,yB)另外一点（maxHx，h）*//*有效达到最高点时候的x坐标*/consteffectMaHx=hclientX&&Math.abs(hclientX-offsetX)>0&&Math.abs(hclientX-offsetX)<Math.abs(xB)/*如果hclientX不满足要求，则选A,B中点为*/letmaxHx=effectMaHx?(hclientX-offsetX):(xB+xA)/2/*已知两点求a,b值根据解方程式解得y=ax^2+bx*/a=((yB/xB)-(h/maxHx))/(xB-maxHx)/*将a带入其中一个求解b*/b=(yB-a*Math.pow(xB,2))/xB}}/*轨迹数组*/consttravelList=[]/*x均等分*/constaverageX=(xB-xA)/point/*处理直线运动*/functionhanderLinearMotion(type){if(type==='X'){constaverageY=(yB-yA)/pointfor(leti=1;i<=point;i++){travelList.push([offsetX,i*averageY+offsetY])}}else{for(leti=1;i<=point;i++){travelList.push([offsetX+i*averageX,offsetY])}}returntravelList}/*当xB的绝对值小于10的情况，我们看作Y轴直线运功*/if(Math.abs(xB)<10){returnhanderLinearMotion('X')}/*当yB的绝对值小于10的情况，我们看作x轴直线运功*/if(Math.abs(yB)<10){returnhanderLinearMotion('Y')}handerComputer()/*绘制路径*/for(leti=1;i<=point;i++){constcurrentX=averageX*iconstcurrentY=Math.pow(currentX,2)*a+b*currentX-yAtravelList.push([currentX+offsetX,currentY+offsetY])}returntravelList}exportdefaultflycart

小程序h6飞入购物车组件？

这里可以把这个方案和组件联系到一起，于是乎飞入购物车组件就搞定了，这里大家要记住的点

1此方案得到的是抛物线各点的left,top值，我们只需要定时改变飞入购物车的图片的left值 ,top就可以 2可以通过计数器功能来改变缩放比，说白了就是改变图片transform:scale值 3不要忘记给图片加上fixed固定定位哦:smile::smile::smile: 主要demo方法(仅供参考)：

startCart(){/*开启购物车*//*this.start储存起始点clientYclientY,this.end储存最终点clientXclientY*/this.start={}this.start['x']=this.data.current['x']this.start['y']=this.data.current['y']consttravelList=flycart([this.start['x'],this.start['y']],[this.end['x'],this.end['y']],25,50)this.startAnimate(travelList)},startAnimate(travelList){letindex=0this.setData({cartHidden:false,bus_x:this.start['x'],bus_y:this.start['y']})if(travelList.length===0)returnthis.timer=setInterval(()=>{index++constcurrentPoint=travelList.shift()this.setData({bus_x:currentPoint[0],bus_y:currentPoint[1],scale:1-index/25})if(travelList.length===0){clearInterval(this.timer)this.triggerEvent('close')}},33)}

以上是“怎么用html5实现小程序商品飞入购物车”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！