h5,小程序飞入购物车(抛物线绘制运动轨迹点) - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2021-1-5

发布人:葵宇科技

浏览次数:40

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

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

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

平抛运动

上抛运动

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

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

此方案均适合 H5 ,小程序

效果

在这里插入图片描述

小程序h5飞入购物车组件?

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

1此方案得到的是抛物线各点的left,top值,我们只需要定时改变飞入购物车的图片的left值 ,top就可以

2可以通过计数器功能来改变缩放比,说白了就是改变图片transform:scale值

3不要忘记给图片加上fixed固定定位哦