Tìm hiểu cách làm mềm và phân bổ trọng số cho ảnh động.
Trong tự nhiên, không có gì di chuyển một cách tuyến tính từ điểm này sang điểm khác. Trong thực tế, mọi thứ có xu hướng tăng tốc hoặc giảm tốc khi di chuyển. Não bộ của chúng ta được thiết kế để mong đợi loại chuyển động này, vì vậy, khi tạo ảnh động, bạn nên tận dụng điều này. Chuyển động tự nhiên giúp người dùng cảm thấy thoải mái hơn khi sử dụng ứng dụng, từ đó mang lại trải nghiệm tổng thể tốt hơn.
Tóm tắt
- Tính năng làm dịu giúp ảnh động của bạn trông tự nhiên hơn.
- Chọn ảnh động giảm dần cho các thành phần trên giao diện người dùng.
- Tránh sử dụng ảnh động với hiệu ứng từ từ xuất hiện hoặc từ từ biến mất, trừ phi bạn có thể giữ cho ảnh động ngắn gọn; người dùng cuối thường cảm thấy ảnh động như vậy bị chậm.
Trong hoạt ảnh cổ điển, thuật ngữ chỉ chuyển động bắt đầu chậm và tăng tốc là "chậm lại" còn đối với chuyển động bắt đầu nhanh và giảm tốc là "chậm lại". Thuật ngữ thường dùng nhất trên web cho các hiệu ứng này là "ease in" (mượt dần vào) và "ease out" (mượt dần ra). Đôi khi, hai hiệu ứng này được kết hợp với nhau, được gọi là "ease in out" (mượt dần vào và ra). Do đó, việc làm dịu là quá trình làm cho ảnh động ít nghiêm trọng hoặc rõ ràng hơn.
Từ khóa đơn giản
Hiệu ứng chuyển đổi và ảnh động CSS đều cho phép bạn chọn loại tốc độ bạn muốn sử dụng cho ảnh động của mình. Bạn có thể sử dụng các từ khoá ảnh hưởng đến tốc độ (hoặc timing, đôi khi được gọi) của ảnh động đang được đề cập. Bạn cũng có thể tuỳ chỉnh hoàn toàn hiệu ứng làm dịu, nhờ đó bạn có thể tự do thể hiện cá tính của ứng dụng.
Sau đây là một số từ khoá mà bạn có thể sử dụng trong CSS:
linearease-inease-outease-in-out
Nguồn: CSS Transitions, W3C
Bạn cũng có thể sử dụng từ khoá steps, cho phép tạo các hiệu ứng chuyển tiếp có các bước riêng biệt, nhưng các từ khoá được liệt kê ở trên hữu ích nhất để tạo ảnh động tự nhiên.
Ảnh động tuyến tính
Ảnh động không có bất kỳ loại hiệu ứng làm dịu nào được gọi là tuyến tính. Đồ thị chuyển đổi tuyến tính có dạng như sau:
Khi thời gian trôi qua, giá trị này sẽ tăng lên theo lượng bằng nhau. Với chuyển động tuyến tính, mọi thứ có xu hướng trông giống như robot và không tự nhiên, đây là điều mà người dùng thấy khó chịu. Nói chung, bạn nên tránh chuyển động tuyến tính.
Cho dù đang mã hoá ảnh động bằng CSS hay JavaScript, bạn sẽ thấy luôn có tuỳ chọn cho chuyển động tuyến tính.
Để đạt được hiệu ứng trên bằng CSS, mã sẽ có dạng như sau:
transition: transform 500ms linear;
Ảnh động giảm dần
Hiệu ứng giảm dần khiến ảnh động bắt đầu nhanh hơn so với ảnh động tuyến tính và cũng có tốc độ giảm dần ở cuối.
Hiệu ứng làm dịu thường là hiệu ứng tốt nhất cho giao diện người dùng, vì hiệu ứng bắt đầu nhanh mang lại cho ảnh động của bạn cảm giác phản hồi nhanh, trong khi vẫn cho phép làm chậm tự nhiên ở cuối.
Có nhiều cách để tạo hiệu ứng làm dịu, nhưng đơn giản nhất là sử dụng từ khoá ease-out trong CSS:
transition: transform 500ms ease-out;
Ảnh động tăng dần
Ảnh động dễ dàng bắt đầu từ từ và kết thúc nhanh, trái ngược với ảnh động dễ dàng kết thúc.
Loại ảnh động này giống như một hòn đá nặng rơi xuống, bắt đầu từ từ và chạm đất nhanh chóng với một tiếng ầm vang.
Tuy nhiên, từ quan điểm tương tác, hiệu ứng chuyển động từ từ có thể hơi bất thường vì kết thúc đột ngột; những thứ di chuyển trong thế giới thực có xu hướng giảm tốc thay vì chỉ dừng đột ngột. Hiệu ứng làm dịu cũng có tác động bất lợi là tạo cảm giác chậm chạp khi bắt đầu, ảnh hưởng tiêu cực đến nhận thức về khả năng phản hồi trong trang web hoặc ứng dụng của bạn.
Xem ảnh động có hiệu ứng dễ chịu
Để sử dụng ảnh động tăng dần, tương tự như ảnh động giảm dần và ảnh động tuyến tính, bạn có thể sử dụng từ khoá của ảnh động đó:
transition: transform 500ms ease-in;
Ảnh động từ từ
Việc giảm tốc cả vào và ra giống như một chiếc xe đang tăng tốc và giảm tốc, và nếu được sử dụng một cách thận trọng, có thể mang lại hiệu ứng ấn tượng hơn so với việc chỉ giảm tốc.
Không sử dụng thời lượng ảnh động quá dài do ảnh động bắt đầu chậm. Thông thường, bạn nên chọn khoảng thời gian từ 300 đến 500 mili giây, nhưng con số chính xác phụ thuộc nhiều vào cảm nhận của bạn về dự án. Tuy nhiên, do bắt đầu chậm, giữa nhanh và kết thúc chậm, độ tương phản trong ảnh động tăng lên, điều này có thể khiến người dùng hài lòng.
Xem ảnh động có hiệu ứng từ từ
Để có ảnh động dễ hiểu, bạn có thể sử dụng từ khoá CSS ease-in-out:
transition: transform 500ms ease-in-out;