I. Giới thiệu
Easing function là một thuật toán toán học của motion design, được sử dụng để để điều khiển tốc độ thay đổi của một giá trị theo thời gian – ví dụ như di chuyển một vật thể, phóng to ảnh, hoặc thay đổi màu sắc – sao cho trông tự nhiên và hấp dẫn hơn. Đây là một khái niệm phổ biến trong đồ họa máy tính, animation, UI/UX.
Ứng dụng trong:
- Giao diện người dùng (UX/UI): giúp các hiệu ứng chuyển đổi mượt mà và tạo cảm giác tự nhiên hơn.
- Animation: mô phỏng các hiệu ứng vật lý như tăng tốc, giảm tốc, bật nảy, đàn hồi,..
- Phát triển game: mô phỏng các chuyển động nhân vật, vật thể, camera, các hiệu ứng tấn công, va chạm,..
II. Các easing function
1. Linear function
Linear function là hàm duy trì tốc độ không đổi trong suốt quá trình hoạt hình, không tăng tốc hoặc giảm tốc.
Code:
function linear(x: number): number {
return x;
}2. Sine easing function
Là easing functions dựa trên hàm sin(x) hoặc cos(x), giúp tạo chuyển động mềm mại, nhẹ nhàng và tự nhiên.
Code:
function easeInSine(x: number): number {
return 1 - Math.cos((x * Math.PI) / 2);
}
function easeOutSine(x: number): number {
return Math.sin((x * Math.PI) / 2);
}
function easeInOutSine(x: number): number {
return -(Math.cos(Math.PI * x) - 1) / 2;
}3. Quad easing function
Đây là những easing functions phổ biến dựa trên hàm bậc hai (quadratic function). Các hàm này điều chỉnh sự thay đổi của một giá trị theo thời gian, tạo ra sự biến đổi tốc độ rõ rệt, từ từ tăng hoặc giảm dần một cách mượt mà.
Một số ứng dụng:
– InQuad: dùng khi cần bắt đầu một chuyển động nhẹ nhàng như nhân vật từ từ chạy.
– OutQuad: dùng khi giảm tốc các đối tượng như bóng rơi xuống đất và từ từ dừng lại.
– InOutQuad: Dùng cho các hiệu ứng di chuyển giữa các trang, hiệu ứng chuyển đổi màn hình.
Code:
function easeInQuad(x: number): number {
return x * x;
}
function easeOutQuad(x: number): number {
return 1 - (1 - x) * (1 - x);
}
function easeInOutQuad(x: number): number {
return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
}4. Cubic easing function
Cubic easing functiton là những hàm easing dùng hàm bậc ba (Cubic function) để điều chỉnh tốc độ thay đổi của một giá trị theo thời gian. Vì vậy, chúng tạo ra các hiệu ứng mượt mà và linh hoạt hơn so với các hàm easing bậc hai (như easeInQuad, easeOutQuad), với những chuyển động phức tạp hơn.
Một số ứng dụng:
- easeInCubic: Dùng cho chuyển động mạnh mẽ, ví dụ như mở ứng dụng hoặc các menu có hiệu ứng phóng to.
- easeOutCubic: Dùng để tạo ra hiệu ứng giảm tốc mạnh khi nhân vật hoặc đối tượng gần đến mục tiêu.
- easeInOutCubic: Tạo ra chuyển động mượt mà cho các hiệu ứng như nhảy, bay, chuyển động của camera, giúp giảm cảm giác giật khi di chuyển trong môi trường game.
Code:
function easeInCubic(x: number): number {
return x * x * x;
}
function easeOutCubic(x: number): number {
return 1 - Math.pow(1 - x, 3);
}
function easeInOutCubic(x: number): number {
return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}5. Quart easing function
Là các hàm easing sử dụng hàm bậc bốn (quartic functions) để điều chỉnh sự thay đổi của một giá trị theo thời gian, do đó, những hàm này tạo ra hiệu ứng chuyển động mạnh mẽ, với độ dốc lớn hơn so với cubic easing functions. Vì vậy, quart easing functions có thể tạo ra những chuyển động mạnh mẽ hơn, đồng thời cũng tạo ra sự chuyển đổi mượt mà giữa các giai đoạn bắt đầu và kết thúc.
Một số ứng dụng:
- easeInQuart: Tốc độ thay đổi bắt đầu rất chậm và tăng mạnh mẽ về sau. Nó mang lại cảm giác như một khởi động từ từ, sau đó tăng tốc mạnh. VD: nhân vật trong game tăng tốc mạnh từ idle state.
- easeOutQuart: Bắt đầu với tốc độ nhanh, rồi giảm tốc mạnh mẽ ở cuối. Tạo cảm giác phanh lại mạnh khi kết thúc. VD: ví dụ như bóng bay xuống và dừng lại khi chạm đất.
- easeInOutQuart: Bắt đầu và kết thúc chậm, nhưng tăng tốc mạnh mẽ ở giữa. Thích hợp để tạo cảm giác mượt mà và động lực mạnh mẽ ở giữa.
Code:
function easeInQuart(x: number): number {
return x * x * x * x;
}
function easeOutQuart(x: number): number {
return 1 - Math.pow(1 - x, 4);
}
function easeInOutQuart(x: number): number {
return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
}6. Quint easing function
Tương tự với quad easing function, cubic easing function hay quart easing function. Quint easing function là là các hàm easing sử dụng hàm bậc năm (quintic functions) để điều chỉnh sự thay đổi của giá trị theo thời gian. Nó mang lại cảm giác chuyển động mạnh mẽ và sâu sắc hơn các function trên. Hiệu quả trong việc tạo ra các chuyển động ban đầu chậm rãi, sau đó tăng tốc mạnh mẽ.
Một số ứng dụng:
- easeInQuint: Tốc độ thay đổi bắt đầu rất chậm, nhưng sau đó tăng mạnh mẽ với độ dốc lớn, tạo cảm giác tăng tốc cực kỳ mạnh.. VD: tạo các hiệu ứng chuyển động mạnh của nhân vật như nhảy.
- easeOutQuint: Tương tự với easeOutQuart nhưng thể hiện rõ ràng hơn. VD: áp dụng vào giảm tốc mạnh cho vật thể như va chạm.
- easeInOutQuint: Bắt đầu và kết thúc chậm, nhưng tăng tốc mạnh mẽ ở giữa. Tạo cảm giác chân thực hơn với các pha chuyển động của nhân vật trong game.
Code:
function easeInQuint(x: number): number {
return x * x * x * x * x;
}
function easeOutQuint(x: number): number {
return 1 - Math.pow(1 - x, 5);
}
function easeInOutQuint(x: number): number {
return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;
}
