Chuyển sang đường địa hình và tạo ảnh động hoàn toàn tuỳ chỉnh cho dự án của bạn.
Đôi khi, bạn không muốn sử dụng các từ khóa gia tốc được đi kèm với CSS hoặc bạn sẽ sử dụng Ảnh động trên web hoặc khung JavaScript. Trong những trường hợp này, bạn thường có thể xác định các đường cong (hoặc phương trình) của riêng mình và điều này giúp bạn kiểm soát tốt hơn cảm nhận của ảnh động trong dự án.
Tóm tắt
- Tốc độ tuỳ chỉnh giúp bạn thể hiện cá tính cho dự án của mình.
- Bạn có thể tạo các đường cong Bézier hình khối giống với các đường cong ảnh động mặc định (dễ dàng di chuyển, dễ vào, v.v.), nhưng có điểm nhấn ở nhiều vị trí.
- Sử dụng JavaScript khi bạn cần kiểm soát nhiều hơn về thời gian và hành vi của ảnh động, ví dụ: hoạt ảnh đàn hồi hoặc trả về.
Nếu đang tạo ảnh động bằng CSS, bạn sẽ thấy rằng bạn có thể xác định các đường cong Bézier khối để xác định thời gian. Trên thực tế, các từ khoá ease, ease-in, ease-out và linear ánh xạ tới đường cong Bézier được xác định trước. Đường cong này được trình bày chi tiết trong quy cách chuyển đổi CSS và thông số kỹ thuật của Ảnh động trên web.
Các đường cong Bézier này nhận bốn giá trị hoặc hai cặp số, trong đó mỗi cặp mô tả các toạ độ X và Y của các điểm điều khiển của đường cong Bézier lập phương. Điểm bắt đầu của đường cong Bézier có toạ độ là (0, 0) và điểm cuối có toạ độ (1, 1); bạn có thể cài đặt giá trị X và Y của hai điểm điều khiển. Giá trị X cho hai điểm điều khiển phải nằm trong khoảng từ 0 đến 1 và giá trị Y của mỗi điểm điều khiển có thể vượt quá giới hạn [0, 1], mặc dù thông số kỹ thuật không rõ ràng bằng bao nhiêu.
Việc thay đổi giá trị X và Y của từng điểm điều khiển sẽ tạo ra một đường cong rất khác biệt, và do đó tạo ra cảm giác khác biệt rất lớn đối với ảnh động của bạn. Ví dụ: nếu điểm điều khiển đầu tiên nằm ở khu vực phía dưới bên phải, thì ảnh động sẽ bắt đầu chậm. Nếu ở khu vực trên cùng bên trái, quá trình khởi động sẽ rất nhanh. Ngược lại, nếu điểm điều khiển thứ hai nằm ở khu vực dưới cùng bên phải của lưới, điểm điều khiển sẽ kết thúc rất nhanh ở cuối; nếu ở phía trên cùng bên trái, điểm điều khiển sẽ kết thúc chậm.
Để so sánh, dưới đây là 2 đường cong: đường cong dễ bắt đầu và đường cong tuỳ chỉnh:
Xem ảnh động bằng tốc độ tuỳ chỉnh
CSS cho đường cong tùy chỉnh là:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
Hai số đầu tiên là toạ độ X và Y của điểm điều khiển đầu tiên và hai số thứ hai là toạ độ X và Y của điểm điều khiển thứ hai.
Việc tạo đường cong tuỳ chỉnh rất thú vị và giúp bạn kiểm soát đáng kể cảm giác của ảnh động. Ví dụ: với đường cong ở trên, bạn có thể thấy rằng đường cong này giống với đường cong giảm tốc độ di chuyển cổ điển, nhưng có phần "bắt đầu" rút ngắn và phần cuối giảm tốc.
Thử nghiệm với công cụ đường cong ảnh động này và xem đường cong ảnh hưởng đến cảm nhận của ảnh động như thế nào.
Dùng khung JavaScript để kiểm soát nhiều hơn
Đôi khi, bạn cần kiểm soát nhiều hơn cả đường cong Bézier khối có thể làm được. Nếu bạn muốn cảm thấy độ nảy đàn hồi, bạn có thể cân nhắc sử dụng khung JavaScript, bởi vì đây là hiệu ứng khó đạt được với CSS hoặc Ảnh động trên web.
TweenMax
Một khung mạnh mẽ là GreenSock’s TweenMax (hoặc TweenLite nếu bạn muốn giữ cho mọi thứ thực sự nhẹ), vì bạn có nhiều quyền kiểm soát từ nó trong thư viện JavaScript nhỏ và đó là cơ sở mã rất hoàn thiện.
Để sử dụng TweenMax, hãy thêm tập lệnh sau vào trang của bạn:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Sau khi tạo tập lệnh, bạn có thể gọi TweenMax cho phần tử của mình rồi cho biết thuộc tính nào bạn muốn, cũng như bất kỳ tốc độ nào bạn muốn. Có nhiều tuỳ chọn gia tốc mà bạn có thể sử dụng; mã dưới đây sử dụng tuỳ chọn gia tốc đàn hồi:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
Tài liệu về TweenMax nêu bật tất cả các tuỳ chọn mà bạn có tại đây, vì vậy, bạn nên đọc tài liệu này.