实现加入购物车抛物线效果

xiguadada 发布于2019-08-30 15:53 / 3228人阅读

写在前面

最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：）

准备开始

开始只是在纸上作了草图，构思了下，才发现如果要一步到位实现像淘宝那样，有升有降，有快有慢的效果，还是比较吃力的，也比较花时间。所以，本文只是实现一个匀速的，单方向下落的抛物线效果。

原理

y = ax² + bx + c

既然是作抛物线运动，想必这个公式你应该非常熟悉了。其实所有有规律的曲线运动，都符合某一种定律，那就是前辈总结的数学公式；想当年数学老师说的“学好数理化，走遍天下都不怕”，不是没有道理。

简单回忆下抛物线公式，其中的a,b,c三个参数为常量，标志着每条抛物线的特性:

a的正负表示抛物线的开口方向,正表示向上,负表示向下,a的大小反应抛物线的开口大小,a绝对值越大开口越小抛物线越陡；

b再除以负的两倍的a,就得到了抛物线的对称轴横坐标；-b加上c为抛物线的准线的纵坐标；

c当然就是截距了,就是抛物线在y轴上的横坐标；

分析

因为我们只能获取商品位置和购物车位置两个坐标，若想以两个坐标位置求取三个未知参数abc显然是不可取的，所以为了实现初步简单的效果，我们假设抛物线经过原点(0,0), 此时c为0，这样就可以计算a和b了，运用初中数学知识就可以完美解决~

简单概括下思路：

获取商品位置和购物车位置的坐标；注意我们的坐标系Y轴向下为正（符合网页的坐标系）

点击商品时候加入购物车，执行函数中应该在body中创建一个div dom(运动点)，给它添加各种style，然后起始坐标为商品按钮的右侧中点(稍加计算)，终点为购物车按钮的位置坐标

添加计时器，如果运动点的x坐标小于终点x坐标，则其自身每次执行循环自加一定像素，而y轴根据我们计算出的a、b值和x计算得出。

达到终点后（运动点x等于购物车位置坐标x）后清空计时器，移除运动点dom

实践

其实在coding过程中，感觉有点阻碍的是计算a,b的值（因为以前学的数学知识都还给老师了-。-）,废话不多说，还是show you the code 吧~

See the Pen gwcpwx by junnan shi (@BenjaminShih) on CodePen.<br>

基本功能是实现了，但是后期需要有更多的优化，比如说假如贝塞尔函数控制速度的快慢，将单一方向运动改为上抛曲线运动等等，视觉效果和用户体验更好，本文暂时就阐述到此，下一章将会加入优化~

私有云超融合服务器 js 抛物线购物车 asp加入购物车 html 加入购物车 asp加入购物车代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116589.html

实现加入购物车抛物线效果

写在前面最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：）准备开始开始只是在纸上作了草图，构思了下，才发现如果要一步...

yunhao 2019-08-20 14:51 评论0 收藏0
Javascript中的抛物线 ~ 加入购物车小动画

摘要：上图即为归零后的坐标系，对称轴直线为在抛物线方程中，值得正负代表着抛物线的开口方向，那么值的绝对值也和抛物线的开口大小有着反比例的关系。废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理很简单的一个小特效，接下来来说一下他的原理。显而易见，这小东西肯定和抛物...

sarva 2019-08-29 11:09 评论0 收藏0
Javascript中的抛物线 ~ 加入购物车小动画

摘要：上图即为归零后的坐标系，对称轴直线为在抛物线方程中，值得正负代表着抛物线的开口方向，那么值的绝对值也和抛物线的开口大小有着反比例的关系。废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理很简单的一个小特效，接下来来说一下他的原理。显而易见，这小东西肯定和抛物...

HtmlCssJs 2019-08-05 10:02 评论0 收藏0
Javascript中的抛物线 ~ 加入购物车小动画

摘要：上图即为归零后的坐标系，对称轴直线为在抛物线方程中，值得正负代表着抛物线的开口方向，那么值的绝对值也和抛物线的开口大小有着反比例的关系。废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理很简单的一个小特效，接下来来说一下他的原理。显而易见，这小东西肯定和抛物...

AZmake 2019-08-20 10:19 评论0 收藏0
开机动画 - 收藏集 - 掘金

摘要：文基础夯实重温动画二之掘金心灵鸡汤天下事有难易乎，为之，则难者亦易矣不为，则易者亦难矣。 Android全套动画使用技巧 - 掘金我的开源社区博客同步发布更新：Android全套动画使用技巧一、Android View 动画框架 Animation框架定义了透明度、旋转、缩放和位移几种常见的动画，控制的整个View，实现原理是每次绘制视图时View所在ViewGroup中的dra......

siberiawolf 2019-06-25 11:14 评论0 收藏0