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

Kayce Basques

Sofia Emelianova

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

Để chụp ảnh động, hãy mở bảng điều khiển Ả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. Làm chậm, phát lại hoặc kiểm tra mã nguồn để tìm ảnh động nhóm.
• 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.

Lưu ý quan trọng: Bạn có thể chỉnh sửa thời gian chuyển đổi CSS và tốc độ ảnh động, cũng như định cấu hình đường cong Bezier tuỳ chỉnh bằng Trình chỉnh sửa tốc độ trong Elements > Ngăn Kiểu.

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 hoạt ảnh 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ề hoạt ảnh nhóm, do đó các nhà thiết kế chuyển động và nhà phát triển sẽ soạn thảo và đặt thời gian cho từng hoạt ảnh riêng lẻ xuất hiện dưới dạng một hiệu ứng hình ảnh mạch lạc. 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 Ảnh động (Animations) sẽ 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 chúng không đồng bộ, chúng sẽ được kết thúc 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 Tuỳ chỉnh và kiểm soát Công cụ cho nhà phát triển > Công cụ khác > Ảnh động.

• 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.

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 di chuyển thẻ lên đầu Công cụ cho nhà phát triển.

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 hoạt ảnh được kích hoạt khi tải trang hoặc đã dừng, hãy tải lại trang và bảng điều khiển đang mở.

Làm quen với giao diện người dùng bảng điều khiển Ảnh động

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

1. Chế độ kiểm soát. Từ đâ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 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 chuột và lịch biểu 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 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 di chuyển bằng chuột.
   • Tính bằng mili giây cho ả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 ảnh động, tua nhanh hoặc chuyển đến một thời đ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 đó:

• Hãy di chuột qua hình thu nhỏ của video đó trong ngăn Overview (Tổng quan) để xem trước video đó.
• 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 này xuất hiện trong ngăn Details (Chi tiết) ) rồi nhấn 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 Tốc độ ảnh động trong thanh Đ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 đó từ ngăn Overview (Tổng quan) để xem 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.

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.

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 đó.

Phần ngoài cùng bên trái, tối hơn của ảnh động là định nghĩa của phần đó. 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.

Nếu 2 phần tử được áp dụng cùng một ảnh động, bảng điều khiển Animations sẽ chỉ định cho các thành phần đó giá trị 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 dưới đây hai phần tử div.eye.left::after và div.eye.right::after có cùng ả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.

Sửa đổi ảnh động

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

• Thời lượng ảnh động.
• Dấu thời gian khung chính.
• Độ trễ thời gian bắt đầu.

Lưu ý quan trọng: Mọi thay đổi bạn thực hiện trong thẻ Ảnh động đều áp dụng kiểu cùng dòng cho các phần tử tương ứng, nhờ đó, bạn có thể xem và phát lại ảnh động thu được ngay lập tức.

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

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

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 yếu tố này để thay đổi thời gian của khung hình chính.

Để 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.

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

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

Hãy thử thực hiện trên trang minh hoạ này:

1. Mở bảng điều khiển Animations. 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 mục điều khiển trên thanh tác vụ.
2. Trong Elements, hãy kiểm tra phần tử bằng class="pulser" và trong Elements, 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 cách các thay đổi trong Kiểu ảnh hưởng đến ảnh động được chụp bằng bảng Animations.

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

Với View Transitions API (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 dạng ảnh động giữa hai trạng thái. Trong ảnh động, API sẽ tạo cây giả phần tử 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 Elements > Kiểu:

1. Mở Công cụ cho nhà phát triển rồi kiểm tra một trang có 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 một ảnh động. Bảng điều khiển Animations (Ảnh động) sẽ ghi lại ảnh động 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>.

   

4. Trong mục Elements > Kiểu, sửa đổi CSS của 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 bài viết Chuyển đổi suôn sẻ và đơn giản bằng View Transitions API.