前言
老早就看过一些购物车的抛物线效果,也想自己凑热闹动手来实现一遍。
然后(lll¬ω¬) 书到用时方恨少,发现高中学到物理啊、数学啊,都忘光了,抛物线公式都忘了0 0。
顺手百度一波,从百度可知:y=ax^2+bx+c
ps:顺路吐槽一下,以前学习是为了应付考试,该忘的都忘了,根本不知道怎么运用到实际生活中,没有学以致用
实现
吐槽完了,现在我们准备看看怎么实现我们的抛物线动画啦
首先从公式和我们页面的dom可知,坐标点(x,y)是已知的,参数a、b、c是未知
因为坐标系是由我们设定,所以我们可以假设我们的初始点为(0,0) O(∩_∩)O这样也是方便我们后面的计算
代入公式可知,c = 0 则剩下的问题就是求a、b了
假设a=0.001 => 实际指焦点到准线的距离,可以抽象成曲率,这里模拟扔物体的抛物线,因此是开口向下的
则 b = (y - 0.001 * x * x) / x , 那么b也是可以算出来的了,知道了这些,终于,我们可以写代码了 O(∩_∩)O
完整代码:
Documentdiv {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
position: absolute;
}
#div1 {
<