SOURCE

function animate ({timing, draw, duration}) {

    let start = performance.now();
    
    return new Promise(resolve => {
        requestAnimationFrame(function animate(time) {
            //timeFraction为时间段，值为0-1之间 （timeFraction goes from 0 to 1）
            let timeFraction = (time - start) / duration;
            if (timeFraction > 1) timeFraction = 1;

            // 计算当前的动画状态（calculate the current animation state）
            let progress = timing(timeFraction)

            draw(progress); // draw it

            if (timeFraction < 1) {
            requestAnimationFrame(animate);
            } else {
            resolve(timing);
            }
        });
    });

}

const train = document.querySelector('.ball');

// 沿着x轴匀速直线运动
const linear = () => {
  const draw = (progress) => {
    train.style.transform = `translate(${progress}px, 0)`;
  }

  // 沿着x轴匀速运动
  animate({
    duration: 1000,
    timing(timeFraction) {
      return timeFraction * 100;
    },
    draw,
  });
};

// 重力
const gravity = () => {
  const draw = (progress) => {
    train.style.transform = `translate(0, ${500 * (progress - 1)}px)`;
  };

  // 沿着x轴匀速运动
  animate({
    duration: 1000,
    timing(timeFraction) {
      return timeFraction ** 2;
    },
    draw,
  });
};

// 摩擦力(匀减速运动）
const friction = () => {
  // 初始高度500px
  const draw = (progress) => {
    train.style.transform = `translate(0, ${500 * (progress - 1)}px)`;
  };

  // 沿着x轴匀速运动
  animate({
    duration: 1000,
    timing(timeFraction) {
      // 初始速度系数为2
      return timeFraction * (2 - timeFraction);
    },
    draw,
  });
};

// 平抛(x轴匀速，y轴加速)
const horizontalMotion = () => {
  const draw = (progress) => {
    train.style.transform = `translate(${500 * progress.x}px, ${500 * (progress.y - 1)}px)`;
  };

  // 有两个方向，沿着x轴匀速运动，沿着y轴加速运动
  animate({
    duration: 1000,
    timing(timeFraction) {
      return {
        x: timeFraction,
        y: timeFraction ** 2,
      }
    },
    draw,
  });
};

// 旋转 + 平抛(x轴匀速，y轴加速，旋转匀速)
const horizontalMotionWidthRotate = () => {
  const draw = (progress) => {
    train.style.transform = `translate(${500 * progress.x}px, ${500 * (progress.y - 1)}px) rotate(${2000 * progress.rotate}deg)`;
  };

  // 有两个方向，沿着x轴匀速运动，沿着y轴加速运动
  animate({
    duration: 2000,
    timing(timeFraction) {
      return {
        x: timeFraction,
        y: timeFraction ** 2,
        rotate: timeFraction,
      }
    },
    draw,
  });
};
// 拉弓(x轴匀速 + y轴初始速度为负的匀加速)
const arrowMove = () => {
  const back = (x, timeFraction) => {
    return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x);
  }
  const draw = (progress) => {
    train.style.transform = `translate(${200*progress.x}px, ${ - 500 * progress.y}px)`;
  };
  animate({
    duration: 1000,
    timing(timeFraction) {
      return {
        x: timeFraction,
        y: back(2, timeFraction),
      };
    },
    draw,
  });
};
// 贝塞尔
const bezier = () => {
  const bezierPath = (x1, y1, x2, y2, timeFraction) => {
    const x = 3 * x1 * timeFraction * (1 - timeFraction) ** 2 + 3 * x2 * timeFraction ** 2 * (1 - timeFraction) + timeFraction ** 3;
    const y = 3 * y1 * timeFraction * (1 - timeFraction) ** 2 + 3 * y2 * timeFraction ** 2 * (1 - timeFraction) + timeFraction ** 3;
    return [x, y];
  }

  const draw = (progress) => {
    const [px, py] = bezierPath(0.2, 0.6, 0.8, 0.2, progress);
    train.style.transform = `translate(${300 * px}px, ${-300 * py}px)`;
  }

  animate({
    duration: 2000,
    timing(timeFraction) {
      return timeFraction * (2 - timeFraction);
    },
    draw,
  });
}
// 缓动函数实现弹球
const bounceMove = () => {
  const bounce = (timeFraction) => {
    if (timeFraction < 1 / 2.75) {
      return 7.5625 * timeFraction * timeFraction
    } else if (timeFraction < 2 / 2.75) {
      return 7.5625 * (timeFraction -= 1.5 / 2.75) * timeFraction + 0.75
    } else if (amount < 2.5 / 2.75) {
      return 7.5625 * (timeFraction -= 2.25 / 2.75) * timeFraction + 0.9375
    } else {
      return 7.5625 * (timeFraction -= 2.625 / 2.75) * timeFraction + 0.984375
    }
  }
  const draw = (progress) => {
    train.style.transform = `translate(${200*progress.x}px, ${200 * (progress.y - 1)}px)`;
  };
  animate({
    duration: 1000,
    timing(timeFraction) {
      return {
        x: timeFraction,
        y: bounce(timeFraction),
      };
    },
    draw,
  });
};
// 弹球
const asyncBounce = () => {
  (async function() {
    let damping = 0.7, // 衰变系数
        duration = 1000,
        height = 300;
    
    while(height >= 1) {
      const down = (progress) => {
        train.style.transform = `translate(0, ${height * (progress - 1)}px)`;
      };
      await animate({
        duration: duration,
        timing(timeFraction) {
          return timeFraction ** 2;
        },
        draw: down,
      });
      height *= damping ** 2;
      duration *= damping;
      const up = (progress) => {
        train.style.transform = `translate(0, ${-height * progress}px)`;
      }
      await animate({
        duration: duration,
        timing(timeFraction) {
          return timeFraction * (2 - timeFraction);
        },
        draw: up,
      });
    }
  }());
};
// 椭圆
const ellipsis = () => {
  const draw = (progress) => {
    const x = 150 * Math.cos(Math.PI * 2 * progress);
    const y = 100 * Math.sin(Math.PI * 2 * progress);
    train.style.transform = `translate(${x}px, ${y}px)`;
  }
  
  animate({
    duration: 2000,
    timing(timeFraction) {
      return timeFraction * (2 - timeFraction);
    },
    draw,
  });
};

// 延时函数
// await animate({
//   duration: 1000,
//   timing: () => {},
//   draw: () => {},
// });

<div id="container">
  <div class="axisX"></div>
  <div class="axisY"></div>
  <div class="ball"></div>
  <div class="button-container">
    <div class="button" onClick="linear()">匀速直线</div>
    <div class="button" onClick="gravity()">重力</div>
    <div class="button" onClick="friction()">摩擦力</div>
    <div class="button" onClick="horizontalMotion()">平抛</div>
    <div class="button" onClick="horizontalMotionWidthRotate()">旋转+平抛</div>
    <div class="button" onClick="arrowMove()">拉弓</div>
    <div class="button" onClick="bezier()">贝塞尔曲线</div>
    <div class="button" onClick="bounceMove()">缓动函数实现弹球</div>
    <div class="button" onClick="asyncBounce()">弹球</div>
    <div class="button" onClick="ellipsis()">椭圆</div>
  </div>
</div>

body {
  margin: 0;
  padding: 0;
}

#container {
  position: absolute;
  width: 100%;
  height: 100vh;
}

.axisX {
  height: 2px;
  background: black;
  width: 100%;
  position: absolute;
  top: 60%;
  transform: translate(0, -1px);
}

.axisY {
  width: 2px;
  background: black;
  height: 100vh;
  position: absolute;
  left: 50%;
  transform: translate(-1px, 0);
}

.ball {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: red;
  top: calc(60% - 20px);
  left: calc(50% - 20px);
}

.ball::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  background: yellow;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.button-container {
  position: absolute;
  bottom: 50px;
  left: 100px;
}

.button {
  cursor: pointer;
  border: 2px solid black;
  padding: 10px 20px;
  font-size: 20px;
  display: inline-block;
}
.button:hover {
  background: gray;
}