2021-06-23 自由落体运动,抛物线运动和缓冲运动的实现

思路

自由落体运动

1.小球落下:设置绝对定位,定时器中改变其top值
2.运动停止:设置目标值,达到目标值时清除定时器
3.回弹:单次方向到头时小球反向运动并缩小上限

抛物线运动

1.垂直方向上设置自由落体运动
2.水平方向上设置匀速往返运动
3.水平方向上到达边界时,就令水平方向上的速度为其相反数

缓冲运动

1.小球落下:设置绝对定位,定时器中改变其top值
2.小球速度随着定时器递减,让其减速下落
3.运动停止:设置目标值,达到目标值时清除定时器

代码

html:

<div class="box">
    <div class="ball1"></div>
    <div class="ball2"></div>
    <div class="ball3"></div>
    <div class="line"></div>
</div>
<input type="button" value="自由落体">
<input type="button" value="抛物线">
<input type="button" value="缓冲运动">

css: