Cách thiết kế hoạt ảnh

Hoạt ảnh là một đồ thị

• Để thiết kế được thì phải có thể tái tạo và có thể kết hợp.
• Mọi hoạt ảnh đều là việc một giá trị thay đổi theo một đầu vào nào đó (thời gian, cuộn trang, vị trí chuột, v.v.), và có thể vẽ sự thay đổi này thành đồ thị.
• Hình dạng của đồ thị chính là thứ quyết định cảm giác chuyển động, và công cụ để tạo ra đường cong đó theo ý muốn là toán học.

Các công cụ toán học

• Đường cong Bézier (easing): Biểu diễn tăng giảm tốc với điểm bắt đầu và kết thúc đã xác định. Nguyên lý là hai điểm điều khiển kéo đường cong như nam châm. Được tạo ra bằng cách áp dụng đệ quy phép nội suy tuyến tính. Cùng một chuyển động nhưng cảm giác truyền tải sẽ hoàn toàn khác nhau tùy theo ease-in hay ease-out
• Tiếp cận theo hàm mũ: value += (target - value) * factor chỉ với một dòng để bám theo mục tiêu một cách mượt mà. Vẫn tự nhiên ngay cả khi mục tiêu thay đổi theo từng frame. Dùng cho hiệu ứng bám theo con trỏ, bộ đếm, thanh tiến trình, v.v.
• Lò xo: Dao động tắt dần dựa trên hai lực là lực hồi phục và lực giảm chấn. Cảm giác được quyết định bởi hai giá trị stiffness và damping. Khác với easing, nó không có duration, và khi mục tiêu thay đổi thì sẽ chuyển tiếp tự nhiên trong khi vẫn giữ vận tốc hiện tại
• Mô phỏng vật lý: Kết hợp các quy luật vật lý như trọng lực, va chạm, ma sát, v.v. Điểm cốt lõi là "chỉ cần định nghĩa quy tắc thì chuyển động sẽ tự được tạo ra". Với confetti chẳng hạn, không cần thiết kế riêng quỹ đạo của hàng chục đối tượng; chỉ cần đặt trọng lực và lực cản không khí. Tuy nhiên vì khả năng dự đoán thấp hơn nên phù hợp với hiệu ứng phụ trợ hơn là các chuyển tiếp cốt lõi của UI
• atan2: Hàm tính hướng giữa hai điểm. Dùng khi phần tử nhìn theo hướng di chuyển, hoặc cho hiệu ứng nghiêng 3D khi thẻ xoay theo hướng con trỏ
• Hàm lượng giác: Tối ưu cho lặp lại theo chu kỳ. Nếu tạo độ lệch pha giữa nhiều phần tử thì sẽ tạo ra hiệu ứng sóng. Dùng cho typing indicator, nền nổi, v.v.
• Sóng răng cưa: Khác với chuyển động qua lại mượt mà của sin, đây là lặp lại một chiều tiến từ 0→1 rồi lập tức reset. Dùng cho pulse ring, ping, tiến trình lặp lại, v.v.

Thiết kế hoạt ảnh phức tạp

• Hàm theo từng đoạn: Chia một đường cong phức tạp thành nhiều đoạn để thiết kế từng phần riêng rồi ghép lại. Cho phép tinh chỉnh có chủ đích chi tiết hơn so với mô phỏng vật lý (ví dụ: cố ý giảm độ cao của độ nảy)
• Xác định phụ thuộc: Điểm khởi đầu của thiết kế hoạt ảnh là "giá trị phụ thuộc vào cái gì?". Có thể phân thành ba loại: dựa trên thời gian (phổ biến nhất), dựa trên giá trị (cuộn trang, vị trí chuột), và dựa trên sự kiện (được kích hoạt bởi click, hover)
• Pipelining: Sắp xếp các mảnh theo thứ tự trên trục thời gian. Kết hợp các chiến lược bố trí như tuần tự, chồng lấp, đồng thời, stagger, v.v. Có thể chỉnh sửa từng mảnh một cách độc lập
• Chuyển trạng thái: Cách chuyển sang giai đoạn tiếp theo dựa trên điều kiện thay vì thời gian. Nếu nêu rõ điều kiện chuyển như phóng→nổ→lan tỏa→biến mất của pháo hoa thì có thể quản lý bằng state machine
• Tách thuộc tính: Tách nhiều thuộc tính (kích thước, màu sắc, độ trong suốt, v.v.) thành các track độc lập. Mỗi track không cần biết về nhau nên việc tinh chỉnh vi mô hoặc bổ sung sẽ dễ hơn

Những điều cần cân nhắc

• Tính ngẫu nhiên: Cần dùng ngẫu nhiên có kiểm soát thay vì hoàn toàn ngẫu nhiên. Điều cốt lõi là xác định ranh giới của "kiểm soát đến đâu và giao cho ngẫu nhiên từ đâu"
• Tính hai chiều: Khi hướng thay đổi trong lúc đang xuất hiện, cần thiết kế để nó đảo chiều tiếp nối từ trạng thái hiện tại thì mới tránh được cảm giác giật hoặc gượng gạo

Giới hạn và điểm mạnh của hoạt ảnh bằng code

• Những hoạt ảnh phức tạp như chuyển động nhân vật hay morphing tinh vi thì phù hợp hơn với công cụ chuyên dụng như Lottie, Rive hoặc video.
• Ngược lại, điểm mạnh của hoạt ảnh bằng code nằm ở các tương tác thời gian thực phản hồi tức thì với đầu vào của người dùng.