最近天气刚转热。我想我应该买些春装卖掉。然后去购物的时候发现加入购物车的动画效果不错。不仅完善了交互，而且功能偏向功能，用户体验极佳~作为前端王，我也想自己实现这么炫酷的效果。我花时间写了一个演示。虽然完成后的效果比较粗糙，但是拥有毛坯房总比租房好哈哈，以后再完善也不迟。下面说说我自己的经历，顺便梳理一下思路，加深一下印象：）开始准备的时候，只是在纸上画了个草图，构思了一下，才发现如果要实现它一步到位，就像淘宝一样，会有起伏，也会有快。慢效还是比较费力费时的。因此，本文只实现了一个匀速单向下落的抛物线效果。原理y=ax2+bx+c既然是抛物线运动，你一定对这个公式非常熟悉。其实，一切有规律的曲线运动都符合一定的规律，这就是前人总结出来的数学公式；想想当年数学老师说的“学好数理化，走遍天下都不怕”也不无道理。简单回忆一下抛物线公式，其中a、b、c三个参数为常数，标示了每条抛物线的特性：a的正负表示抛物线的开口方向，正为向上，负为向下，sizeofaresponses抛物线开口的大小，a的绝对值越大，开口越小，抛物线越陡；b除以a的负数两次，得到抛物线对称轴的横坐标；-b加c为抛物线准线的垂直方向坐标；c当然是截距，也就是抛物线在y轴上的横坐标；分析因为我们只能获取商品位置和购物车位置两个坐标，如果我们要获取两个坐标位置的三个未知参数abc，显然是不可取的，所以为了达到初步简单的效果，我们假设抛物线经过原点(0,0)，此时c为0，这样就可以计算出a和b，用初中数学知识就可以完美求解~简单总结一下思路如下：获取商品位置坐标和购物车位置坐标；注意我们坐标系的Y轴是正向下（符合网页坐标系）。单击产品时，将其添加到购物车。执行函数中要在body中创建一个divdom（移动点），给它添加各种样式，然后起始坐标就是产品按钮右边的中点（稍微计算一下），然后终点是购物车按钮的位置坐标。添加一个定时器，如果移动点的x坐标小于终点x坐标，则每次执行循环时添加一定数量的像素，并根据a,b值计算y轴和我们计算的x。到达终点后（移动点x等于购物车位置坐标x），清空定时器，移除移动点dom练习。其实在编码的过程中，感觉计算a和b的值有点受阻（因为之前学过的数学知识还没有还给老师-。-)，废话不多说，给大家看代码~
