@H_403_0@本文实例讲述了JS小球抛物线轨迹运动的两种实现方法。分享给大家供大家参考,具体如下:
@H_4030@js实现小球抛物轨迹运动的大致思路:
@H403_0@1、用
setInterval()
方法,进行间隔性刷新,更新小球位置,以实现动态效果2、绘制小球和运动区域,运动区域可通过flex布局实现垂直居中
3、用物理公式<span style="color: #0000ff">S(y)=1/2gt*t,<span style="color: #0000ff">S(x)=V(x)t来计算路径
现确定<span style="color: #0000ff">V(x)=4m/s,刷新的时间间隔设置为0.1s。原本px和米之间的转换,不同尺寸转换不同,本例采用17寸显示器,大约1px=0.4mm。但浏览器太小,因此只能模拟抛物线轨迹,本例将px和米之间缩成100倍。
@H_4030@<span style="font-size: medium">
第一种:通过border-radius绘制小球
@H403_0@思路:用
border-radius: 50%
绘制小球,给小球设置relative,每次计算小球当前位置,赋给top和left。计算运动轨迹时,可用变量自增计算setInterval
调用次数,每次是0.1s,这样可计算总时间。代码如下:<div class="jb51code">
<pre class="brush:js;">
<!DOCTYPE>