用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2020-10-19 10:38

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

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

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

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

平抛运动

上抛运动

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

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

此方案均适合 H5 ,小程序

效果

在这里插入图片描述

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

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

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

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏