音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

html5小程序飞入购物车(抛物线绘制运动轨迹点)
日期:2021-09-04 20:12:01   来源:脚本之家

前言:最近有朋友在做小程序的过程中,遇到开发过飞入购物车效果的功能的需求。针对这个情况一些网上的demo,多少会有一些不符合情景的问题(bug)存在,针对这一情况小编决定帮朋友写一个方案来帮助解决问题。

思考如果实现 ? 超级简单的!

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

平抛运动

html5小程序飞入购物车(抛物线绘制运动轨迹点)

上抛运动

html5小程序飞入购物车(抛物线绘制运动轨迹点)

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

此方案的本质就是,根据购物车起点和终点,分别做为抛物线的两点,这样一个感念就是要以起始点作为直角坐标系(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

效果

html5小程序飞入购物车(抛物线绘制运动轨迹点)

小程序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飞入购物车内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    HTMLCSSDreamweaverFrontpage