很多购物商城都有一个飞入购物车的特效,很多时候我们也都是在网上找一些插件来做,很少会管如何实现的,今天我们就来看看如果自己做一个飞入购物车的特效。先来看看做好的效果:

抛物线研究 gif 抛物线研究

实现思路

我们都知道抛物线的一般方程为y=a*x^2+b*x+c,这里有三个参数,如果想完全确定一个抛物线,最少需要三个点,而这里只有两个点,因此如何去利用这两个点去确定抛物线也是多种多样的。

抛物线还有一个顶点式,y=a*(x-h)^2+k,这的(h,k)表示顶点的坐标,这里的顶点至关重要,关乎到我们能否解出抛物线。在方程式不明确的情况下,我们可以先根据两个已知的点预估一下抛物线和顶点的纵坐标:

background Layer 1 x y A B 大致评估顶点在这个位置 预估的抛物线

假设A(x1,y1),B(x2,y2),那我们预估的顶点纵坐标可以为Math.min(y1,y2)-Math.abs(x1-x2)/3,也就是比两个点最低的那个还要小一点。大致预估了纵坐标,那么就好办了,也就是(h,k)中我们已知了k,求h,具体的求值过程如下:

background Layer 1 y1=a*(x1-h)^2+k y2=a*(x2-h)^2+k y1-k=a*(x1-h)^2 y2-k=a*(x2-h)^2 两个式子相除 y1-k=(x1-h)^2 y2-k=(x2-h)^2 因为(h,k)不会和那两个点横纵相同,因此y2-k不等于0,(x2-h)不等于0 F=正负Math.sqrt((y1-k)/(y2-k)) F=(x1-h)/(x2-h) F*x2-F*h=x1-h (F*x2-x1)/(F-1)=h 因为h在x1,x2中间, 因此(x1-h)/(x2-h)为负数 F= - Math.sqrt((y1-k)/(y2-k)) 利用临时变量F将两边拆分计算,两边同时开根号

也就是说我们先计算临时变量F,F里面有我们刚刚预估的k,得到了F,我们就可以计算出h了。

不过这里我们要注意一点,就是我们预估的k是不能小于0的(或者小于一某个数值),因为如果小于那么抛物线就跑到窗口外了,就看不到了:

background Layer 1 x y A B 预估的抛物线 这一部分看不到

因此就有一些特殊位置需要我们注意了:

background Layer 1 y x A B 两点在一条竖线 y x A B 两点都在y=0位置 (抛物线不可见) y x A B A和顶点重合 y x B A B和顶点重合

上图中的图1无法构成抛物线,图2的抛物线完全不可见,3和4因为有一端已经是0了,所以预估的k只能为0,也就是顶点和起点或者终点刚好重合了,这个时候抛物线如下:

background Layer 1 x y A B

这个时候的抛物线是非常好求的,因为有一个点已经是(h,k)了,只要把另一个点带入就求出a。

background Layer 1 h=x1,k=y1 y2=a*(x2-h)^2+k (y2-k)/(x2-h)^2=a

最后的成品:

将某一点设置为顶点求抛物线

刚刚求值的过程中,我们发现,如果把某一个点作为顶点的话,方程式是非常容易求的。

这样出来的抛物线没有一个向上抛的效果,只是从最高点抛物降落。

利用css制作简单的抛物线效果

在物理学上,抛物线最明显就是这样一个例子,从一个飞机上扔下一个东西,然后它的轨迹就是抛物线,因此我们可以分析抛物线其实就是水平和垂直方向的一个组合,水平方向匀速运动,垂直方向加速运动就是抛物线。

因此我们可以利用这样的原理,很容易的作出一个简单的抛物线效果:

只不过这个也是简单的抛物线效果,无法制作上抛的效果。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字