Ả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 trong Công cụ của Chrome cho nhà phát triển.

Tổng quan

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

Bảng điều khiển Animations có hai mục đích chính:

  • Kiểm tra ảnh động. Chậm lại, phát lại hoặc kiểm tra mã nguồn của 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ợ tính năng chỉnh sửa khung hình chính và Bezier.

Bảng điều khiển Animations (Ảnh động) hỗ trợ ảnh động CSS, hiệu ứng chuyển đổi CSS, ảnh động trên web và View Transitions API. Chưa hỗ trợ ảnh động requestAnimationFrame.

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

Nhóm ảnh động là một tập hợp các ảnh động xuất hiện liên quan với nhau.

Hiện tại, web không có khái niệm thực sự về ảnh động nhóm, vì vậy, nhà thiết kế chuyển động và nhà phát triển sẽ kết hợp và căn chỉnh thời gian cho từng ảnh động để xuất hiện dưới dạng một hiệu ứng hình ảnh nhất quán. Bảng điều khiển Ả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, bảng điều khiển Animations (Ảnh động) sẽ nhóm các ảnh động được kích hoạt trong cùng một khối tập lệnh với nhau, nhưng nếu các ảnh động đó không đồng bộ, thì chúng sẽ nằm trong các nhóm khác nhau.

Mở bảng điều khiển Ảnh động

Có hai cách để mở bảng điều khiển Ảnh động:

  • Chọn Thêm. Tuỳ chỉnh và kiểm soát DevTools > Công cụ khác > Ảnh động. Ảnh động trong trình đơn.

  • Mở Trình đơn lệnh bằng cách nhấn một trong các phím 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 kéo tương ứng. Hiện ảnh động.

Theo mặc định, bảng điều khiển Ảnh động sẽ mở ra dưới dạng một thẻ bên cạnh ngăn Bảng điều khiển. Là một 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 chuyển thẻ này lên đầu DevTools.

Bảng điều khiển Ảnh động trống.

Bảng điều khiển Animations (Ảnh động) sẽ tự động chụp các ảnh động đang diễn ra khi bạn mở bảng điều khiển này. Nếu ảnh động được kích hoạt khi tải trang hoặc đã dừng, hãy tải lại trang khi bảng điều khiển đang mở.

Làm quen với giao diện người dùng của bảng Ảnh động

Bảng điều khiển Animations (Ảnh động) có 4 phần chính:

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

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

  2. Tổng quan. Hiển thị hai nhóm ảnh động được chụp thuộc hai loại được đánh dấu bằng biểu tượng: di chuyển bằng và thông thường (theo 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 Chi tiết.

  3. Dòng thời gian. 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 di chuyển bằng .
    • Tính bằng mili giây cho ảnh động dựa trên thời gian .

    Trong dòng thời gian, bạn có thể Phát lại ảnh động, vuốt ả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 đó trong khi bảng Animations (Ảnh động) đang mở.

Kiểm tra ảnh động

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

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

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

Xem thông tin chi tiết về ảnh động

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

Trong ngăn Details (Chi tiết), mỗi ảnh động riêng lẻ 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 Chi tiết.

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

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

Một số ảnh động lặp lại vô thời hạn nếu bạn đặt thuộc tính animation-iteration-count thành infinite. Bảng điều khiển Animations (Ảnh động) cho thấy định nghĩa và vòng lặp của các ảnh động đó.

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

Phần tối nhất, ở ngoài cùng bên trái 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 biểu thị vòng lặp.

Ví dụ: trong ảnh chụp màn hình tiếp theo, phần hai và ba thể hiện lặp lại phần một.

Sơ đồ về các lần lặp lại ảnh động.

Nếu hai phần tử có cùng một ảnh động được áp dụng, thì bảng điều khiển Animations (Ảnh động) sẽ gán cho chúng cùng một màu. Màu sắc ngẫu nhiên và không có ý nghĩa. 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 một ảnh động (eyes) được áp dụng cho chúng, cũng như các phần tử div.feet::before và div.feet::after.

Ảnh động được mã hoá bằng màu.

Sửa đổi ảnh động

Có 3 cách để sửa đổi ảnh động bằng bảng điều khiển Ảnh động:

  • Thời lượng ảnh động.
  • Thời gian của 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 ban đầu:

Ảnh động 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 ảnh động xác định bất kỳ quy tắc khung hình chính nào thì các quy tắc này sẽ được thể hiện dưới dạng vòng tròn bên trong màu trắng. Kéo một trong các điểm 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ễ cho hoạt ảnh, hãy nhấp vào chính hoạt ảnh đó chứ không phải các vòng tròn, sau đó kéo nó vào bất cứ đâu.

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

Chỉnh sửa @keyframes trực tiếp

Khi sửa đổi @keyframes trong Kiểu, bạn có thể thấy các hiệu ứng trong bảng điều khiển Ảnh động ngay lập tức.

Hãy thử trên trang minh hoạ này:

  1. Mở bảng Animations (Ảnh động). Nút này tự động chụp lại ảnh động xung đang diễn ra trên trang. Chọn ảnh động trong phần điều khiển trên thanh thao tác.
  2. Trong Elements (Thành phần), hãy kiểm tra phần tử bằng class="pulser" và trong Styles (Kiểu), hãy tìm phần @keyframes pulse.
  3. Hãy thử sửa đổi khung hình chính, chẳng hạn như thay đổi khung hình chính thứ hai từ 50% thành 20%.
  4. Quan sát mức độ ảnh hưởng của các thay đổi trong Kiểu đến ảnh động được bảng điều khiển Ảnh động ghi lại.

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

Với View Transitions API (API Chuyển đổi thành phần hiển thị), bạn có thể thay đổi DOM chỉ trong một bước, đồng thời tạo hiệu ứng chuyển đổi dạng ảnh động giữa hai trạng thái. Trong một ảnh động, API sẽ tạo một cây phần tử giả có 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 mục Phần tử > Kiểu:

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

  3. Trên trang, hãy kích hoạt ảnh động. Bảng điều khiển Animations (Ảnh động) sẽ chụp ả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, ở đầu phần tử <head>.

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

  4. Trong Elements (Thành phần) > Styles (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 rồi Phát lại để xem kết quả.

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