html5小程序飞入购物车(抛物线绘制运动轨迹点)
程序员文章站
2022-06-25 19:32:28
html5小程序飞入购物车(抛物线绘制运动轨迹点)这篇文章主要介绍了html5小程序飞入购物车(抛物线绘制运动轨迹点),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起... 20-10-19...
前言:最近有朋友在做小程序的过程中,遇到开发过飞入购物车效果的功能的需求。针对这个情况一些网上的demo,多少会有一些不符合情景的问题(bug)存在,针对这一情况小编决定帮朋友写一个方案来帮助解决问题。
思考如果实现 ? 超级简单的!
无论是小程序还是h5飞入购物车无非就是 平抛 ,或者是 上抛 两种情况,对于这两种情况,初中就开始学习抛物线理论知识是完全可以搞定的,高中一年级物理学的*落体运动,平抛运动就是抛物线理论的具体实现。
平抛运动
上抛运动
构建虚拟直角坐标系,抛物线绘制轨迹点
此方案的本质就是,根据购物车起点和终点,分别做为抛物线的两点,这样一个感念就是要以起始点作为直角坐标系(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 ] 值组成的数组 */ function flycart(startpoint, endpoint, point, h = 0, hclientx) { /* 设置startpoint 为(0,0)点 , 此抛物线经过(0,0)点 ,可以推到出模型关系式 y = ax^2 + bx 或者 y = ax^ 2 1 当存在 h 的情况,抛物线会y轴向上偏移 h, 此时的关系式 y = ax^2 + bx 2 当不存在h 的情况 ,抛物线startpoint为顶点, 此时关系式 y = ax^2 */ /* 参数校验 */ function validityparameter() { let isokey = true array.isarray(startpoint) && startpoint.length !== 2 && (isokey = false) array.isarray(endpoint) && endpoint.length !== 2 && (isokey = false) (point.constructor !== number) && (isokey = false) return isokey } /* 参数验证 */ if (!validityparameter()) { return [] } /* a点横坐标 */ const xa = 0 /* a点纵坐标 */ const ya = 0 /* x轴偏移量 */ const offsetx = startpoint[0] /* y轴偏移量 */ const offsety = startpoint[1] /* b点横坐标 */ const xb = endpoint[0] - offsetx /* b纵坐标 */ const yb = endpoint[1] - offsety /* 根据b点坐标和最大高度h求系数a,b 参数*/ let b = 0 let a = 0 /* 计算系数 a ,b */ function handercomputer() { if (h < 10) { a = yb / math.pow(xb, 2) } else { /* 因为一般购物车的情况都是向下,实际上我们购物车的坐标系是反向的,所以我们这里要把h 设置成负值 */ h = -h /* 一元二次求解a,b ,现在知道一点 ( xb , yb ) 另外一点 ( maxhx,h ) */ /* 有效达到最高点时候的x坐标 */ const effectmahx = hclientx && math.abs(hclientx - offsetx) > 0 && math.abs(hclientx - offsetx) < math.abs(xb) /* 如果hclientx不满足要求,则选a , b 中点为 */ let maxhx = 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 } } /* 轨迹数组 */ const travellist = [] /* x 均等分 */ const averagex = (xb - xa) / point /* 处理直线运动 */ function handerlinearmotion(type) { if (type === 'x') { const averagey = (yb - ya) / point for (let i = 1; i <= point; i++) { travellist.push([offsetx, i * averagey + offsety]) } } else { for (let i = 1; i <= point; i++) { travellist.push([offsetx + i * averagex, offsety]) } } return travellist } /* 当 xb的绝对值小于10的情况,我们看作y轴直线运功 */ if (math.abs(xb) < 10) { return handerlinearmotion('x') } /*当 yb的绝对值小于10的情况,我们看作x轴直线运功 */ if (math.abs(yb) < 10) { return handerlinearmotion('y') } handercomputer() /* 绘制路径 */ for (let i = 1; i <= point; i++) { const currentx = averagex * i const currenty = math.pow(currentx, 2) * a + b * currentx - ya travellist.push([currentx + offsetx, currenty + offsety]) } return travellist } export default flycart
效果
小程序h5飞入购物车组件?
这里可以把这个方案和组件联系到一起,于是乎飞入购物车组件就搞定了,这里大家要记住的点
1此方案得到的是抛物线各点的left,top值,我们只需要定时改变飞入购物车的图片的left值 ,top就可以 2可以通过计数器功能来改变缩放比,说白了就是改变图片transform:scale值 3不要忘记给图片加上fixed固定定位哦:smile::smile::smile: 主要demo方法(仅供参考)
startcart(){ /* 开启购物车 */ /* this.start 储存起始点 clienty clienty ,this.end储存最终点 clientx clienty*/ this.start = {} this.start['x'] = this.data.current['x'] this.start['y'] = this.data.current['y'] const travellist = flycart([ this.start['x'] , this.start['y'] ] ,[ this.end['x'] , this.end['y'] ],25,50 ) this.startanimate(travellist) }, startanimate(travellist) { let index = 0 this.setdata({ carthidden: false, bus_x: this.start['x'], bus_y: this.start['y'] }) if(travellist.length===0) return this.timer = setinterval( ()=> { index++ const currentpoint = 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) }
这里只做了 原生小程序飞入购物车组件 ,h5大致差别不大。
git地址如下
代码地址https://github.com/alienzhaolin/flycart
到此这篇关于html5小程序飞入购物车(抛物线绘制运动轨迹点)的文章就介绍到这了,更多相关html5飞入购物车内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!