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

来源：自学PHP网时间：2020-10-20 10:36 作者：小飞侠阅读:次

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

今天带来html5小程序飞入购物车(抛物线绘制运动轨迹点)教程详解

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

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

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

平抛运动

上抛运动

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

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

/**
* 飞入购物车，轨迹点绘制
* @author

更多文章推荐