Tạo ảnh động giữa các lượt xem

Tìm hiểu cách tạo ảnh động giữa hai thành phần hiển thị trong ứng dụng.

Paul Lewis

Thông thường, bạn muốn di chuyển người dùng giữa các thành phần hiển thị trong ứng dụng, cho dù đó là từ danh sách sang thành phần hiển thị chi tiết hay hiển thị thanh điều hướng bên. Ảnh động giữa các thành phần hiển thị này giúp người dùng tương tác và làm cho dự án của bạn trở nên sống động hơn.

• Sử dụng bản dịch để di chuyển giữa các thành phần hiển thị; tránh sử dụng left, top hoặc bất kỳ thuộc tính nào khác kích hoạt bố cục.
• Đảm bảo rằng mọi ảnh động bạn sử dụng đều nhanh và có thời lượng ngắn.
• Hãy cân nhắc cách ảnh động và bố cục thay đổi khi kích thước màn hình tăng lên; những gì phù hợp với màn hình nhỏ hơn có thể trông kỳ lạ khi được sử dụng trong bối cảnh máy tính.

Giao diện và hành vi của các hiệu ứng chuyển đổi chế độ xem này phụ thuộc vào loại chế độ xem mà bạn đang xử lý. Ví dụ: việc tạo ảnh động cho lớp phủ phương thức trên một thành phần hiển thị sẽ mang lại trải nghiệm khác với việc chuyển đổi giữa chế độ xem danh sách và chế độ xem chi tiết.

Thành công: Cố gắng duy trì tốc độ 60 khung hình/giây cho tất cả ảnh động. Bằng cách đó, người dùng của bạn sẽ không thấy ảnh động kết xuất gián đoạn ảnh hưởng đến trải nghiệm của họ. Đảm bảo rằng mọi phần tử ảnh động đều đã đặt will-change cho mọi nội dung bạn dự định thay đổi trước khi ảnh động bắt đầu. Đối với các hiệu ứng chuyển đổi khung hiển thị, bạn có thể sẽ muốn sử dụng will-change: transform.

Sử dụng bản dịch để di chuyển giữa các thành phần hiển thị

Để dễ hiểu hơn, giả sử có hai chế độ xem: chế độ xem danh sách và chế độ xem chi tiết. Khi người dùng nhấn vào một mục danh sách bên trong chế độ xem danh sách, chế độ xem chi tiết sẽ trượt vào và chế độ xem danh sách sẽ trượt ra.

Để đạt được hiệu ứng này, bạn cần có một vùng chứa cho cả hai thành phần hiển thị đã đặt overflow: hidden trên đó. Bằng cách đó, cả hai thành phần hiển thị đều có thể nằm cạnh nhau bên trong vùng chứa mà không hiển thị thanh cuộn ngang nào, đồng thời mỗi thành phần hiển thị có thể trượt sang bên cạnh bên trong vùng chứa nếu cần.

CSS cho vùng chứa là:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

Vị trí của vùng chứa được đặt là relative. Điều này có nghĩa là mỗi thành phần hiển thị bên trong có thể được định vị tuyệt đối ở góc trên cùng bên trái, sau đó di chuyển xung quanh bằng các phép biến đổi. Phương pháp này tốt hơn cho hiệu suất so với việc sử dụng thuộc tính left (vì thuộc tính này kích hoạt bố cục và vẽ) và thường dễ hợp lý hoá hơn.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

Việc thêm transition vào thuộc tính transform sẽ tạo ra hiệu ứng trượt đẹp mắt. Để tạo cảm giác dễ chịu, hiệu ứng này sử dụng đường cong cubic-bezier tuỳ chỉnh mà chúng ta đã thảo luận trong Hướng dẫn về hiệu ứng làm dịu tuỳ chỉnh.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Thành phần hiển thị nằm ngoài màn hình sẽ được dịch sang phải, vì vậy, trong trường hợp này, thành phần hiển thị chi tiết cần được di chuyển:

.details-view {
  transform: translateX(100%);
}

Bây giờ, bạn cần một lượng nhỏ JavaScript để xử lý các lớp. Thao tác này sẽ bật/tắt các lớp thích hợp trên các thành phần hiển thị.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

Cuối cùng, chúng ta thêm phần khai báo CSS cho các lớp đó.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

Thử nào

Bạn có thể mở rộng phạm vi này để bao gồm nhiều thành phần hiển thị và khái niệm cơ bản vẫn giữ nguyên; mỗi thành phần hiển thị không hiển thị phải nằm ngoài màn hình và được đưa vào khi cần, đồng thời thành phần hiển thị hiện đang hiển thị trên màn hình phải được di chuyển ra ngoài.

Thận trọng: Việc tạo loại hệ phân cấp này theo cách đa trình duyệt có thể sẽ gặp khó khăn. Ví dụ: iOS yêu cầu thêm một thuộc tính CSS là -webkit-overflow-scrolling: touch để "bật lại" tính năng cuộn hất, nhưng bạn không có quyền kiểm soát trục nào dành cho, như với thuộc tính mục bổ sung tiêu chuẩn. Hãy nhớ kiểm thử phương thức triển khai của bạn trên nhiều thiết bị!

Ngoài việc chuyển đổi giữa các thành phần hiển thị, kỹ thuật này cũng có thể áp dụng cho các thành phần trượt vào khác, chẳng hạn như các thành phần điều hướng trên thanh bên. Điểm khác biệt thực sự duy nhất là bạn không cần di chuyển các thành phần hiển thị khác.

Đảm bảo ảnh động hoạt động với màn hình lớn hơn

Đối với màn hình lớn hơn, bạn nên luôn giữ chế độ xem danh sách thay vì xoá chế độ xem này và trượt chế độ xem chi tiết từ bên phải. Cách này gần giống như cách xử lý thành phần hiển thị điều hướng.