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

    抛物线研究

    实现思路

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

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

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

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

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

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

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

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

    最后的成品:

    预估顶点纵坐标求抛物线

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

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

    将一点作为顶点求抛物线

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

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

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

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

    css简单模拟抛物线

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

    DEMO下载

    点击下载[0积分]一共下载0
    回到顶部
    我要评论

    所有评论

      相关文章