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

Tìm hiểu cách tạo ảnh động giữa hai khung 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 chế độ xem trong ứng dụng, cho dù đó là chế độ xem từ danh sách sang chế độ xem chi tiết hay hiển thị điều hướng thanh bên. Ảnh động giữa các khung hiển thị này giúp duy trì tương tác với người dùng và giúp các dự án của bạn trở nên sống động hơn nữa.

• Sử dụng bản dịch để di chuyển giữa các khung 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à thời lượng ngắn.
• Xem xét cách hoạt ảnh và bố cục thay đổi khi kích thước màn hình tăng; những gì phù hợp với màn hình nhỏ hơn có thể trông khác thường khi được sử dụng trong ngữ cảnh máy tính để bàn.

Giao diện và hoạt động của các hiệu ứng chuyển đổi chế độ xem này phụ thuộc vào loại chế độ xem bạn đang xử lý. Ví dụ: tạo ảnh động lớp phủ phương thức trên đầu chế độ xem phải là một 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 nhìn thấy các ảnh động gián đoạn làm ả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 thay đổi mà bạn dự định thay đổi trước khi ảnh động bắt đầu. Để chuyển đổi khung hiển thị, nhiều khả năng bạn sẽ cần sử dụng will-change: transform.

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

Để giúp cuộc sống thuận tiện hơn, giả sử có 2 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 khung hiển thị danh sách, khung hiển thị chi tiết sẽ trượt vào và khung hiển thị danh sách sẽ trượt ra.

Để có được hiệu ứng này, bạn cần có một vùng chứa cho cả hai khung hiển thị đã đặt overflow: hidden. Bằng cách đó, cả hai khung hiển thị có thể nằm bên trong vùng chứa cạnh nhau mà không hiển thị thanh cuộn ngang nào, đồng thời mỗi khung hiển thị có thể trượt từ bên này sang bên trong vùng chứa khi 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. Tức là mỗi thành phần hiển thị bên trong nó có thể được định vị tuyệt đối ở góc trên cùng bên trái và sau đó di chuyển xung quanh bằng các phép biến đổi. Phương pháp này mang lại hiệu suất tốt hơn so với sử dụng thuộc tính left (vì điều đó kích hoạt bố cục và tô màu), đồng thời thường dễ hợp lý 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 một hiệu ứng trang trình bày đẹp mắt. Để mang lại cảm giác dễ chịu, hãy sử dụng đường cong cubic-bezier tuỳ chỉnh mà chúng ta đã thảo luận trong hướng dẫn Gia tốc tuỳ chỉnh.

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

Chế độ xem nằm ngoài màn hình phải được dịch sang phải, vì vậy, trong trường hợp này, bạn cần di chuyển chế độ xem chi tiết:

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

Hiện tại, cần một số ít JavaScript để xử lý các lớp. Thao tác này sẽ chuyển đổi các lớp thích hợp trên khung 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 khung hiển thị này để bao gồm nhiều khung hiển thị và khái niệm cơ bản nên giữ nguyên; mỗi khung hiển thị không hiển thị nên được đưa ra ngoài màn hình và bật khi cần, đồng thời nên di chuyển khung hiển thị hiện tại trên màn hình ra.

Thận trọng: Bạn có thể gặp khó khăn khi thực hiện loại hệ phân cấp này trên nhiều trình duyệt. Ví dụ: iOS yêu cầu thêm thuộc tính CSS -webkit-overflow-scrolling: touch để "bật lại" thao tác cuộn bằng cử chỉ 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ử kết quả triển khai trên nhiều thiết bị!

Ngoài việc chuyển đổi giữa các chế độ xem, kỹ thuật này cũng có thể được áp dụng cho các phần tử trượt trong khác, như các phần tử điều hướng ở 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 khung hiển thị khác.

Đảm bảo rằng ảnh động của bạn phù hợp 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 duy trì chế độ xem danh sách mọi lúc thay vì xoá nó và trượt chế độ xem chi tiết từ phía bên phải sang chế độ xem chi tiết. Thao tác này khá giống với việc xử lý khung hiển thị điều hướng.