Ảnh động: Kiểm tra và sửa đổi các hiệu ứng ảnh động CSS

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Kiểm tra và sửa đổi ảnh động bằng thẻ ngăn Ảnh động của Chrome Công cụ cho nhà phát triển.

Tổng quan

Để chụp ảnh động, hãy mở thẻ Ảnh động. Tính năng này tự động phát hiện ảnh động và sắp xếp thành các nhóm.

Thẻ Ảnh động có hai mục đích chính:

  • Kiểm tra ảnh động. Giảm tốc độ, phát lại hoặc kiểm tra mã nguồn cho một nhóm ảnh động.
  • Sửa đổi ảnh động. Sửa đổi thời gian, độ trễ, thời lượng hoặc độ lệch khung hình chính của một nhóm ảnh động. Không hỗ trợ chỉnh sửa khung hình chính và Bezier.

Thẻ Ảnh động hỗ trợ ảnh động CSS, chuyển đổi CSS, ảnh động trên web và API Chuyển đổi khung hiển thị. Ảnh động requestAnimationFrame chưa được hỗ trợ.

Nhóm ảnh động là gì?

Nhóm ảnh động là một tập hợp các ảnh động dường như có liên quan với nhau.

Hiện tại, web chưa có khái niệm thực sự về ảnh động theo nhóm, do đó các nhà thiết kế và nhà phát triển chuyển động phải soạn và định thời gian cho các ảnh động riêng lẻ xuất hiện dưới dạng một hiệu ứng hình ảnh nhất quán. Thẻ Ảnh động dự đoán các ảnh động có liên quan dựa trên thời gian bắt đầu (không bao gồm độ trễ) và nhóm chúng cạnh nhau.

Nói cách khác, thẻ Ảnh động nhóm các ảnh động được kích hoạt trong cùng một khối tập lệnh, nhưng nếu không đồng bộ, chúng sẽ kết thúc trong các nhóm khác nhau.

Bắt đầu

Có 2 cách để mở thẻ Ảnh động:

  • Chọn Xem thêm. Tuỳ chỉnh và điều khiển Công cụ cho nhà phát triển > Công cụ khác > Ảnh động. Ảnh động trong trình đơn.

  • Mở trình đơn Command bằng cách nhấn một trong các thao tác sau:

    • Trên macOS: Command+Shift+P
    • Trên Windows, Linux hoặc ChromeOS: Control+Shift+P

    Sau đó, hãy bắt đầu nhập Show Animations rồi chọn bảng điều khiển Ngăn tương ứng. Hiện ảnh động.

Theo mặc định, thẻ Ảnh động sẽ mở ra dưới dạng thẻ bên cạnh ngăn Bảng điều khiển. Dưới dạng thẻ ngăn, bạn có thể sử dụng thẻ này với bất kỳ bảng điều khiển nào hoặc di chuyển thẻ lên đầu Công cụ cho nhà phát triển.

Thẻ Hoạt ảnh trống.

Thẻ Ảnh động có 4 phần chính:

Các phần trong bảng điều khiển Ảnh động.

  1. Chế độ điều khiển. Tại đây, bạn có thể chặn Xoá tất cả nhóm ảnh động đã chụp, tạm dừng Tạm dừng hoặc play_arrow Resume hoặc thay đổi tốc độ của nhóm ảnh động đã chọn.

  2. Tổng quan. Hiển thị các nhóm ảnh động được chụp thuộc hai loại được đánh dấu bằng biểu tượng: chuột được cuộn và lịch biểu thông thường (dựa trên thời gian).

    Chọn một nhóm ảnh động tại đây để kiểm tra và sửa đổi nhóm đó trong ngăn Details (Chi tiết).

  3. Tiến trình. Tuỳ thuộc vào loại nhóm ảnh động, dòng thời gian có thể là:

    • Tính bằng pixel cho ảnh động cuộn chuột.
    • Tính bằng mili giây đối với các ảnh động dựa trên thời gian lập lịch.

    Trong dòng thời gian, bạn có thể phát lại Phát lại một ảnh động, tua qua ảnh động hoặc chuyển đến một điểm cụ thể.

  4. Chi tiết. Kiểm tra và sửa đổi nhóm ảnh động đã chọn.

Để chụp ảnh động, hãy kích hoạt ảnh động đó khi thẻ Animations đang mở. Nếu một ảnh động được kích hoạt khi tải trang, hãy tải lại ảnh đó.

Kiểm tra ảnh động

Sau khi chụp ảnh động, có một số cách để phát lại ảnh động đó:

  • Di chuột qua hình thu nhỏ trong ngăn Tổng quan để xem trước hình thu nhỏ đó.
  • Kéo con trỏ vị trí (thanh dọc màu đỏ) để tua ảnh động trong khung nhìn hoặc nhấp vào một vị trí bất kỳ trên Dòng thời gian để đặt con trỏ vị trí tại một điểm cụ thể. Ảnh động sẽ tiếp tục phát nếu đã phát và dừng lại.
  • Chọn nhóm ảnh động trong ngăn Overview (Tổng quan) (để nhóm đó xuất hiện trong ngăn Details (Thông tin chi tiết)) rồi nhấn vào nút Nút phát lại. Replay (Phát lại). Ảnh động được phát lại trong khung nhìn.

Nhấp vào nút Nút tốc độ ảnh động. Tốc độ ảnh động trên thanh Điều khiển để thay đổi tốc độ xem trước của nhóm ảnh động đã chọn.

Xem chi tiết ảnh động

Sau khi bạn đã chụp một nhóm ảnh động, hãy nhấp vào nhóm đó từ ngăn Tổng quan để xem thông tin chi tiết của nhóm đó.

Trong ngăn Details (Chi tiết), mỗi ảnh động sẽ có hàng riêng. Để xem toàn bộ tên của phần tử tương ứng, hãy đổi kích thước cột tên.

Ngăn Details (Chi tiết).

Di chuột qua ảnh động để làm nổi bật ảnh động đó trong khung nhìn. Nhấp vào ảnh động để chọn ảnh động đó trong bảng điều khiển Elements (Phần tử).

Di chuột qua ảnh động để làm nổi bật ảnh động đó trong khung nhìn.

Một số ảnh động lặp lại vô thời hạn nếu thuộc tính animation-iteration-count của chúng được đặt thành infinite. Thẻ Ảnh động hiển thị các định nghĩa và vòng lặp của chúng.

Lặp lại ảnh động.

Phần ngoài cùng bên trái, tối hơn của ảnh động là phần định nghĩa. Các phần bên phải, được làm mờ nhiều hơn đại diện cho sự lặp lại.

Ví dụ: trong ảnh chụp màn hình tiếp theo, phần 2 và 3 thể hiện các lần lặp lại của phần 1.

Sơ đồ lặp lại ảnh động.

Nếu 2 phần tử được áp dụng cùng một ảnh động, thì thẻ Animations sẽ chỉ định cùng một màu cho các phần tử đó. Màu sắc là ngẫu nhiên và không có ý nghĩa quan trọng. Ví dụ: trong ảnh chụp màn hình bên dưới hai phần tử div.eye.left::after và div.eye.right::after có cùng ảnh động (eyes) áp dụng cho các phần tử div.feet::before và div.feet::after.

Hoạt ảnh được mã hóa màu.

Sửa đổi ảnh động

Có 3 cách để sửa đổi ảnh động bằng thẻ Ảnh động:

  • Thời lượng ảnh động.
  • Xác định thời gian khung hình chính.
  • Độ trễ thời gian bắt đầu.

Đối với phần này, giả sử ảnh chụp màn hình tiếp theo thể hiện ảnh động gốc:

Hoạt ảnh gốc trước khi sửa đổi.

Để thay đổi thời lượng của ảnh động, hãy kéo vòng tròn đầu tiên hoặc cuối cùng.

Thời lượng đã sửa đổi.

Nếu hoạt ảnh xác định bất kỳ quy tắc khung hình chính nào thì những quy tắc này được biểu thị dưới dạng vòng tròn bên trong màu trắng. Kéo một trong các nhãn này để thay đổi thời gian của khung hình chính.

Khung hình chính đã sửa đổi.

Để thêm độ trễ vào ảnh động, hãy nhấp vào chính ảnh động đó chứ không nhấp vào hình tròn rồi kéo vào bất cứ đâu.

Đã sửa đổi độ trễ.

Chỉnh sửa các phần tử giả ::view-transition trong ảnh động

Với API Chuyển đổi khung hiển thị, bạn có thể thay đổi DOM trong một bước duy nhất, trong khi tạo hiệu ứng chuyển đổi động giữa hai trạng thái. Trong quá trình tạo ảnh động, API sẽ tạo một cây phần tử giả theo cấu trúc như sau:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Cách chỉnh sửa cấu trúc này trong phần Phần tử > Kiểu:

  1. Mở Công cụ cho nhà phát triển rồi kiểm tra một trang đã sử dụng API chuyển đổi khung hiển thị. Ví dụ: trang minh hoạ này.
  2. Trong mục Ảnh động, hãy nhấp vào tạm dừng Tạm dừng.

  3. Trên trang, hãy kích hoạt ảnh động. Bảng điều khiển Animations sẽ chụp lại ảnh đó và tạm dừng ngay lập tức. Giờ đây, bạn có thể tìm thấy cấu trúc ::view-transition trong DOM, ở trên phần tử <head>.

    Chỉnh sửa CSS của phần tử giả ::view-transition.

  4. Trong Phần tử > Kiểu, hãy sửa đổi CSS của các phần tử giả ::view-transition.

  5. Tiếp tục ảnh động và Phát lại để xem kết quả.

Để biết thêm thông tin, hãy xem bài viết Chuyển đổi mượt mà và đơn giản bằng View Transitions API.