Tìm hiểu cách làm mềm và tăng 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 chúng di chuyển. Bộ não của chúng ta có khả năng dự đoán loại chuyển động này, vì vậy khi hoạt ảnh, bạn nên sử dụng điều này làm lợi thế của mình. 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, nhờ đó mang lại trải nghiệm tổng thể tốt hơn.
Tóm tắt
- Giảm nhẹ giúp ảnh động của bạn tự nhiên hơn.
- Chọn ảnh động dễ dàng cho các phần tử trên giao diện người dùng.
- Tránh sử dụng các ảnh động chuyển động đơn giản hoặc dễ hiểu trừ khi bạn giữ cho chúng ngắn gọn; họ có xu hướng cảm thấy chậm chạp đối với người dùng cuối.
Trong hoạt hì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 hơn". Thuật ngữ thường dùng nhất trên web cho những trường hợp này lần lượt là "dễ dàng" và "dễ dàng ra". Đôi khi cả hai được kết hợp, được gọi là "dễ dàng ra". Khi đó, giảm nhẹ thực sự là quá trình làm cho ảnh động trở nên bớt nghiêm trọng hoặc phát âm 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ể hoàn toàn tuỳ chỉnh với tốc độ của mình, điều này giúp bạn được thoải mái hơn rất nhiều để thể hiện cá tính của ứng dụng.
Dưới đây là một số từ khóa 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.
Hoạt ảnh tuyến tính
Ảnh động không có bất kỳ loại gia tốc nào được gọi là tuyến tính. Đồ thị chuyển đổi tuyến tính có dạng như sau:
Theo thời gian, giá trị sẽ tăng theo số lượng bằng nhau. Với chuyển động tuyến tính, mọi thứ thường có cảm giác máy móc và không tự nhiên, và đây là điều khiến người dùng cảm thấy khó chịu. Nói chung, bạn nên tránh chuyển động thẳng.
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 quả như trên với CSS, mã sẽ trông giống như sau:
transition: transform 500ms linear;
Giảm hiệu ứng động
Việc chạy nhanh khiến ảnh động bắt đầu nhanh hơn so với hoạt ảnh tuyến tính và ở cuối cũng giảm tốc.
Nhẹ nhàng thường là cách tốt nhất cho giao diện người dùng, vì việc khởi động nhanh mang lại cho ảnh động cảm giác phản hồi, 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 ứng dễ dàng, nhưng đơn giản nhất là từ khoá ease-out trong CSS:
transition: transform 500ms ease-out;
Ảnh động chuyển động chậm
Ảnh động dễ thấy 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 hoạt ảnh này giống như một hòn đá nặng rơi xuống, trong đó nó bắt đầu từ từ và nhanh chóng va vào mặt đất kèm theo một tiếng đập chết chóc.
Tuy nhiên, từ quan điểm tương tác, sự dễ dàng có thể cảm thấy hơi bất thường vì kết thúc đột ngột; những thứ vận động trong thế giới thực có xu hướng giảm tốc chứ không chỉ dừng lại đột ngột. Hoạt động chậm cũng có tác động tiêu cực, khiến bạn cảm thấy chậm chạp khi bắt đầu. Điều này tác động tiêu cực đến cảm nhận về khả năng phản hồi trên trang web hoặc ứng dụng của bạn.
Để sử dụng ảnh động chuyển động đơn giản, tương tự như ảnh động chuyển động đơn giản và ảnh động tuyến tính, bạn có thể sử dụng từ khoá:
transition: transform 500ms ease-in;
Ảnh động khi chuyển động nhanh
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 hoạt ảnh quá dài do hoạt ảnh bắt đầu chậm chạp. Thông thường, khoảng từ 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 dự án của bạn. Điều đó có nghĩa là do đoạn video khởi động chậm, đoạn giữa nhanh và kết thúc chậm nên ảnh động sẽ có độ tương phản cao hơn, và điều này có thể khiến người dùng hài lòng.
Để 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;