用java编写一个抛物线运动_用js实现简单的抛物线运动

前言

老早就看过一些购物车的抛物线效果,也想自己凑热闹动手来实现一遍。

然后(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

完整代码:

Document

div {

width: 50px;

height: 50px;

border-radius: 50%;

overflow: hidden;

position: absolute;

}

#div1 {

<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值