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

  let start = performance.now();
  
  return new Promise(resolve => {
     requestAnimationFrame(function animate(time) {
        // timeFraction goes from 0 to 1
        let timeFraction = (time - start) / duration;
        if (timeFraction > 1) timeFraction = 1;

        // calculate the current animation state
        let progress = easing(timeFraction)

        draw(progress); // draw it

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

     });
  });

}

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

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

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

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

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

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

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

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

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

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

  // 有两个方向，沿着x轴匀速运动，沿着y轴加速运动
  animate({
    duration: 2000,
    easing(timeFraction) {
      return {
        x: timeFraction,
        y: timeFraction ** 2,
        rotate: timeFraction,
      }
    },
    draw,
  });
};
// 拉弓
const arrowMove = () => {
  const back = (x, timeFraction) => {
    return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x);
  }
  const draw = (progress) => {
    ball.style.transform = `translate(${200*progress.x}px, ${ - 500 * progress.y}px)`;
  };
  animate({
    duration: 1000,
    easing(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);
    ball.style.transform = `translate(${300 * px}px, ${-300 * py}px)`;
  }

  animate({
    duration: 2000,
    easing(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) => {
    ball.style.transform = `translate(${200*progress.x}px, ${200 * (progress.y - 1)}px)`;
  };
  animate({
    duration: 1000,
    easing(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) => {
        ball.style.transform = `translate(0, ${height * (progress - 1)}px)`;
      };
      await animate({
        duration: duration,
        easing(timeFraction) {
          return timeFraction ** 2;
        },
        draw: down,
      });
      height *= damping ** 2;
      duration *= damping;
      const up = (progress) => {
        ball.style.transform = `translate(0, ${-height * progress}px)`;
      }
      await animate({
        duration: duration,
        easing(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);
    ball.style.transform = `translate(${x}px, ${y}px)`;
  }
  
  animate({
    duration: 2000,
    easing(timeFraction) {
      return timeFraction * (2 - timeFraction);
    },
    draw,
  });
};

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