CSS Cubic Bezier जेनरेटर - ऑनलाइन ईज़िंग फ़ंक्शन बनाएं

function evaluateBezier(t, p0, p1, p2, p3) {
  const u = 1 - t;
  return u * u * u * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t * p3;
}

function cubicBezierY(x, x1, y1, x2, y2) {
  if (x <= 0) return 0;
  if (x >= 1) return 1;
  let low = 0, high = 1, mid;
  for (let i = 0; i < 20; i++) {
    mid = (low + high) / 2;
    const cx = evaluateBezier(mid, 0, x1, x2, 1);
    if (Math.abs(cx - x) < 0.0001) break;
    cx < x ? (low = mid) : (high = mid);
  }
  return evaluateBezier((low + high) / 2, 0, y1, y2, 1);
}

function formatCubicBezier(x1, y1, x2, y2) {
  const r = (n) => Math.round(n * 100) / 100;
  return `cubic-bezier(${r(x1)}, ${r(y1)}, ${r(x2)}, ${r(y2)})`;
}

console.log(formatCubicBezier(0.25, 0.1, 0.25, 1));
// cubic-bezier(0.25, 0.1, 0.25, 1)

// Animate using the bezier curve
function animate(x1, y1, x2, y2, durationMs, onProgress) {
  const start = performance.now();
  function tick(now) {
    const t = Math.min((now - start) / durationMs, 1);
    onProgress(cubicBezierY(t, x1, y1, x2, y2));
    if (t < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}