Tìm hiểu cách làm mềm và gán trọng số cho ảnh động.
Không có gì trong tự nhiên di chuyển 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 chúng di chuyển. Bộ não của chúng ta có khả năng mong đợi loại chuyển động này, vì vậy khi tạo ảnh động, bạn nên sử dụng điều này để có lợi. Chuyển động tự nhiên giúp người dùng cảm thấy thoải mái hơn với ứng dụng của bạn, nhờ đó mang lại trải nghiệm tổng thể tốt hơn.
Tóm tắt
- Gia tốc giúp các ảnh động của bạn tự nhiên hơn.
- Chọn ảnh động dễ sắp xếp cho các phần tử trên giao diện người dùng.
- Tránh sử dụng ảnh động dễ điều chỉnh hoặc chuyển dần, trừ phi bạn có thể giữ cho chúng ngắn gọn; chúng có xu hướng chậm đối với người dùng cuối.
Trong hoạt hình cổ điển, thuật ngữ chuyển động bắt đầu chậm và tăng tốc là "chậm" còn chuyển động bắt đầu nhanh và giảm tốc là "chậm". Các thuật ngữ thường dùng nhất trên web cho những giải pháp này lần lượt là "dễ dàng" và "dễ dàng". Đôi khi, cả hai được kết hợp với nhau, được gọi là "dễ dàng bắt đầu". Khi đó, gia tốc (Easing) thực sự là quá trình làm cho ảnh động bớt nghiêm trọng hơn hoặc rõ ràng hơn.
Từ khóa gia tăng
Cả hiệu ứng chuyển đổi và ảnh động CSS đều cho phép bạn chọn tốc độ mà bạn muốn sử dụng cho ảnh động. Bạn có thể sử dụng các từ khoá ảnh hưởng đến tốc độ (hoặc timing
, như đôi khi được gọi) của ảnh động được đề cập. Bạn cũng có thể tuỳ chỉnh hoàn toàn với tốc độ của mình, giúp bạn tự do thể hiện cá tính của ứng dụng hơn.
Dưới đây là một số từ khoá mà bạn có thể sử dụng trong CSS:
linear
ease-in
ease-out
ease-in-out
Nguồn: Chuyển đổi CSS, W3C
Bạn cũng có thể dùng từ khoá steps
. Từ khoá này cho phép bạn tạo các hiệu ứng chuyển đổi có các bước riêng biệt. Tuy nhiên, các từ khoá được liệt kê ở trên là hữu ích nhất để tạo ảnh động tự nhiên.
Ảnh động tuyến tính
![Đường cong ảnh động dễ sử dụng tuyến tính.](https://web.developers.google.cn/static/articles/the-basics-of-easing/image/linear-ease-animation-cur-95032dc9fda11.png?authuser=3&hl=vi)
Ảnh động không có bất kỳ tốc độ nào được gọi là tuyến tính. Biểu đồ chuyển tiếp tuyến tính sẽ có dạng như sau:
Theo thời gian, giá trị tăng lên theo số lượng bằng nhau. Với chuyển động tuyến tính, mọi thứ có xu hướng mang lại cảm giác máy móc và không tự nhiên và đâ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 thẳng.
Cho dù bạn đang mã hoá hoạt ảnh của mình bằng CSS hay JavaScript, bạn sẽ thấy rằng luôn có một lựa chọn cho chuyển động tuyến tính.
Để đạt được hiệu quả như trên bằng CSS, mã sẽ có dạng như sau:
transition: transform 500ms linear;
Giảm tốc độ ảnh động
![Giảm bớt đường cong ảnh động.](https://web.developers.google.cn/static/articles/the-basics-of-easing/image/ease-animation-curve-c6df0f5e61c7a.png?authuser=3&hl=vi)
Việc giảm dần khiến ảnh động bắt đầu nhanh hơn so với ảnh động tuyến tính và ảnh động cũng giảm tốc ở cuối.
Giảm tốc độ thường là phương pháp hiệu quả nhất cho hoạt động trên giao diện người dùng, vì việc khởi động 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 giảm tốc tự nhiên ở cuối.
Có nhiều cách để đạt được hiệu quả mong muốn, nhưng đơn giản nhất là từ khoá ease-out
trong CSS:
transition: transform 500ms ease-out;
Ảnh động giảm dần
![Đường cong hiệu ứng chuyển động chậm dần.](https://web.developers.google.cn/static/articles/the-basics-of-easing/image/ease-animation-curve-c1ff704eed959.png?authuser=3&hl=vi)
Ảnh động chuyển động bắt đầu chậm và kết thúc nhanh, ngược lại với ảnh động chuyển động giảm dần.
Loại hoạt ảnh này giống như một tảng đá nặng rơi xuống, nơi nó bắt đầu từ từ rồi nhanh chóng chạm đất với tiếng đập mạnh.
Tuy nhiên, từ quan điểm tương tác, dễ dàng có thể cảm thấy hơi khác thường do kết thúc đột ngột của chúng; những thứ chuyển động trong thế giới thực có xu hướng giảm tốc chứ không chỉ đơn giản là dừng lại đột ngột. Quá trình tải chậm cũng gây ra tác động xấu đến việc người dùng cảm thấy chậm chạp khi bắt đầu, từ đó tác động tiêu cực đến cảm nhận về tốc độ phản hồi trên trang web hoặc ứng dụng của bạn.
Để sử dụng ảnh động dễ chuyển đổi, tương tự như ảnh động dễ mở rộng và ảnh động tuyến tính, bạn có thể sử dụng từ khoá của loại ảnh động này:
transition: transform 500ms ease-in;
Ảnh động giảm dần
![Đường cong ảnh động giảm dần.](https://web.developers.google.cn/static/articles/the-basics-of-easing/image/ease-out-animation-curve-ed508ac2b4378.png?authuser=3&hl=vi)
Việc giảm tốc cả vào trong và bên ngoài cũng giống như việc xe tăng tốc và giảm tốc, nếu được sử dụng một cách thận trọng, có thể mang lại hiệu quả ấn tượng hơn là chỉ giảm tốc.
Đừng sử dụng thời lượng hoạt ảnh quá dài, vì hoạt ảnh sẽ bắt đầu chậm chạp. Thường thì khoảng 300 đến 500 mili giây là phù hợp, nhưng con số chính xác phụ thuộc rất nhiều vào cảm nhận của dự án. Tuy nhiên, nhờ có khởi động chậm, kết thúc nhanh và kết thúc chậm mà độ tương phản tăng lên trong ảnh động, điều này có thể làm người dùng hài lòng.
Để tạo ảnh động dễ thêm, bạn có thể sử dụng từ khoá CSS ease-in-out
:
transition: transform 500ms ease-in-out;