Tìm hiểu về các Easing Functions (#2)

Phần trước chúng ta đã tìm hiểu về khái niệm Easing funtion và một số easing function như Linear, Sine, Quad, Cubic, Quart, Quint và cấu trúc hàm toán học hình thành nó. Lần này, chúng ta tiếp tục tìm hiểu các hàm còn lại trong mô hình easing function của Robert Penner.

I. Các easing functions

1. Expo easing function

Là một easing có tốc độ chuyển động sẽ thay đổi theo cấp số nhân sử dụng hàm chủ đạo là pow(), tạo các chuyển động bắt đầu chậm và tăng tốc rất nhanh ở cuối hoặc ngược lại.

Ứng dụng:

• Chuyển động của nhân vật game: tạo các chuyển động tự nhiên như nhảy, lướt,… Các chuyển động nhanh, đột ngột ở đầu và chậm ở gần cuối tạo cảm giác phản xạ.
• Scroll animation: Bắt đầu và kết thúc của hiệu ứng cuộn trong, với bắt đầu chậm dùng easeInExpo và kết thúc bằng eseOutExpo để tạo cảm giác tự nhiên hơn.
• Hiệu ứng phóng to/thu nhỏ: Giúp người dùng thấy được đối tượng nhanh hơn giảm cảm giác chờ đợi và animation tự nhiên hơn.

Code:

function easeInExpo(x: number): number {
   return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
}

function easeOutExpo(x: number): number {
  return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
}

function easeInOutExpo(x: number): number {
  return x === 0
    ? 0
    : x === 1
    ? 1
    : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2
    : (2 - Math.pow(2, -20 * x + 10)) / 2;
}

2. Circ easing function

Là một loại easing function tạo ra các hiệu ứng cuyển động theo hình tròn, với tốc độ thay đổi không điều, bắt đầu chậm sau đó tăng tốc nhanh hoặc ngược lại. Vì vậy, chúng thường được dùng để tạo các hiệu ứng chuyển động nhẹ nhàng, mượt mà nhưng không quá đơn giản hơn Linear function.

Ứng dụng:

• Hiệu ứng quay tại chỗ: tạo cảm giác tư nhiên hơn so với Linear function đối với các hiệu ứng quay tại chỗ hoặc quanh tâm.
• Hiệu ứng nhấn nút: có thể dùng làm hiệu ứng scale cho các đối tượng UI do người dùng tương tác. Vd: Khi người dùng nhấn nút, nút sẽ bị scale lại và từ từ dãn ra, từ chậm tới nhanh.

Code:

function easeInCirc(x: number): number {
   return 1 - Math.sqrt(1 - Math.pow(x, 2));
}

function easeOutCirc(x: number): number {
   return Math.sqrt(1 - Math.pow(x - 1, 2));
}

function easeInOutCirc(x: number): number {
  return x < 0.5
    ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2
    : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
}

3. Back easing function

Là một loại easing function khá độc đáo, thương được dùng để tạo các hiệu ứng chuyển động lùi lại rồi tiến lên, với chuyển động lùi lại tạo cảm giác lấy đà và bật lại mạnh mẽ.

Ứng dụng:

• Thường được dùng cho các hiệu ứng UI: tạo cảm giác UI sống động hơn, thu hút hơn.
• Tạo hiệu ứng đóng và mở popup: thường dùng easeOutBack để tạo hiệu ứng mở popup, menu hoặc thông báo.
• Chuyển động nhảy của nhân vật game.

Code:

function easeInBack(x: number): number {
  const c1 = 1.70158;
  const c3 = c1 + 1;

  return c3 * x * x * x - c1 * x * x;
}

function easeOutBack(x: number): number {
  const c1 = 1.70158;
  const c3 = c1 + 1;

  return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
}

function easeInOutBack(x: number): number {
  const c1 = 1.70158;
  const c2 = c1 * 1.525;

  return x < 0.5
    ? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
    : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
}

4. Elastic easing function

Là một easing function thường được dùng tạo ra các hiệu ứng co giãn, đàn hồi hoặc các dao động vị trí trước khi dừng.

Ứng dụng:

• Hiệu ứng nhún nhảy: áp dụng cho các chuyển động hoặc scale với hiệu ứng co giãn.
• Tạo các hiệu ứng nảy, lò xo trong game.
• Hiệu ứng quán tính: các hiệu ứng quán tính như mở popup với tốc độ nhanh cần vài lần nhúng để giảm tốc độ tạo cảm giác tự nhiên hơn.

Code:

function easeInElastic(x: number): number {
  const c4 = (2 * Math.PI) / 3;

  return x === 0
    ? 0
    : x === 1
    ? 1
    : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4);
}

function easeOutElastic(x: number): number {
  const c4 = (2 * Math.PI) / 3;

  return x === 0
    ? 0
    : x === 1
    ? 1
    : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
}

function easeInOutElastic(x: number): number {
  const c5 = (2 * Math.PI) / 4.5;

  return x === 0
    ? 0
    : x === 1
    ? 1
    : x < 0.5
    ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2
    : (Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5)) / 2 + 1;
}

5. Bounce easing function

Là một easing function thường dùng để tạo các hiệu ứng nảy nhiều lần trước khi dừng lại.

Ứng dụng:

• Hiệu ứng nảy khi rơi vật phẩm trong game: Vd: vật phẩm hoặc tiền rơi ra từ quái vật khi rơi xuống đất nảy thêm vài lần tạo cảm giác tự nhiên hơn.

Code:

function easeOutBounce(x: number): number {
  const n1 = 7.5625;
  const d1 = 2.75;

  if (x < 1 / d1) {
      return n1 * x * x;
  } else if (x < 2 / d1) {
      return n1 * (x -= 1.5 / d1) * x + 0.75;
  } else if (x < 2.5 / d1) {
      return n1 * (x -= 2.25 / d1) * x + 0.9375;
  } else {
      return n1 * (x -= 2.625 / d1) * x + 0.984375;
  }
}

function easeInBounce(x: number): number {
  return 1 - easeOutBounce(1 - x);
}

function easeInOutBounce(x: number): number {
  return x < 0.5
    ? (1 - easeOutBounce(1 - 2 * x)) / 2
    : (1 + easeOutBounce(2 * x - 1)) / 2;
}

II. Preview

III. Nguồn

Easing Functions Cheat Sheet

Easing Functions Explained: Everything You Need to Know

Previous: Tìm hiểu về các Easing Functions (#1) – NCC ANT

Next: Tìm hiểu về các Easing Functions: Demo (#3) – NCC ANT