Để chụp hoạt ảnh, hãy mở tab Ảnh động. Nó tự động phát hiện hình ảnh động và sắp xếp chúng thành các nhóm
Tab Animations có hai mục đích chính
- Kiểm tra hình ảnh động. Làm chậm, phát lại hoặc kiểm tra mã nguồn cho một nhóm hoạt hình
- Sửa đổi hình ảnh động. Sửa đổi thời gian, độ trễ, thời lượng hoặc độ lệch khung hình chính của nhóm hoạt ảnh. Chỉnh sửa khung hình chính và Bezier không được hỗ trợ
Gotchas
Bạn có thể chỉnh sửa thời gian của quá trình chuyển tiếp CSS và nới lỏng hoạt hình cũng như định cấu hình các đường cong Bezier tùy chỉnh bằng Trình chỉnh sửa nới lỏng trong ngăn Thành phần > Kiểu
Tab Hoạt ảnh hỗ trợ hoạt ảnh CSS, chuyển tiếp CSS và hoạt ảnh web. requestAnimationFrame
hình ảnh động hiện không được hỗ trợ
# Nhóm hoạt hình là gì?
Nhóm hoạt ảnh là một tập hợp các hoạt ảnh có vẻ liên quan với nhau
Hiện tại, web không có khái niệm thực sự về hoạt hình nhóm, vì vậy các nhà thiết kế và nhà phát triển chuyển động soạn thảo và đặt thời gian cho các hoạt ảnh riêng lẻ xuất hiện dưới dạng một hiệu ứng hình ảnh nhất quán. Tab Hoạt ảnh dự đoán các hoạt ảnh 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, tab Hoạt hình nhóm các hoạt ảnh đượ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ẽ nằm trong các nhóm khác nhau
# Bắt đầu
Có hai cách để mở tab Ảnh động
Chọn
Tùy chỉnh và kiểm soát DevTools > Công cụ khác > Ảnh động.Mở Menu Lệnh bằng cách nhấn một trong các thao tác sau
- Trên macOS. Lệnh+Shift+P
- Trên Windows, Linux hoặc ChromeOS. Điều khiển+Shift+P
Sau đó bắt đầu nhập
Show Animations
và chọn ngăn kéo tương ứng.
Theo mặc định, tab Hoạt hình mở ra dưới dạng một tab bên cạnh ngăn Bảng điều khiển. Là một tab ngăn kéo, bạn có thể sử dụng nó với bất kỳ bảng điều khiển nào hoặc di chuyển nó lên đầu DevTools
Tab Hoạt hình được nhóm thành bốn ngăn chính [phần]
- điều khiển. Từ đây, bạn có thể xóa tất cả các nhóm hoạt ảnh đang chụp hoặc thay đổi tốc độ của nhóm hoạt ảnh hiện được chọn
- Tổng quan. Chọn một nhóm hoạt hình ở đây để kiểm tra và sửa đổi nó trong ngăn Chi tiết
- Mốc thời gian. Tạm dừng và bắt đầu hoạt ảnh từ đây hoặc chuyển đến một điểm cụ thể trong hoạt ảnh
- Thông tin chi tiết. Kiểm tra và sửa đổi nhóm hoạt hình hiện được chọn
Để chụp hoạt ảnh, hãy kích hoạt hoạt ảnh đó khi tab Hoạt ảnh đang mở. Nếu một hình động được kích hoạt khi tải trang, hãy tải lại nó
# Kiểm tra hình ảnh động
Khi bạn đã chụp một hoạt ảnh, có một số cách để phát lại hoạt ảnh đó
- Di chuột qua hình thu nhỏ của nó trong ngăn Tổng quan để xem bản xem trước của nó
- Nhấp và kéo thanh dọc màu đỏ để xóa hình ảnh động của khung nhìn
- Chọn nhóm hoạt ảnh từ ngăn Tổng quan [để nhóm được hiển thị trong ngăn Chi tiết] và nhấn nút Phát lại. Hoạt hình được phát lại trong chế độ xem.
Nhấp vào các nút
# Xem chi tiết hoạt hình
Sau khi bạn đã chụp một nhóm hoạt hình, hãy nhấp vào nhóm đó từ ngăn Tổng quan để xem chi tiết. Trong ngăn Chi tiết, mỗi hoạt ảnh riêng lẻ có hàng riêng
Di chuột qua một hình ảnh động để làm nổi bật nó trong chế độ xem. Nhấp vào hoạt ảnh để chọn nó trong bảng Thành phần
Một số hoạt ảnh 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
. Tab Hoạt hình hiển thị các định nghĩa và phép lặp của chúng
Phần ngoài cùng bên trái, tối hơn của hoạt ảnh là định nghĩa của nó. Các phần bên phải, mờ hơn thể hiện các lần lặp lại
Ví dụ: trong ảnh chụp màn hình bên dưới, phần hai và ba đại diện cho phần lặp lại của phần một
Nếu hai thành phần được áp dụng cùng một hoạt ảnh, thì tab Hoạt ảnh sẽ gán cho chúng cùng một màu. Bản thân màu sắc là 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 hoạt ảnh [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 hình ảnh động
Có ba cách bạn có thể sửa đổi hoạt hình bằng tab Hoạt hình
- Thời lượng hoạt ảnh
- Thời gian khung hình chính
- thời gian bắt đầu chậm trễ
Gotchas
Bất kỳ thay đổi nào bạn thực hiện trong tab Hoạt ảnh đều áp dụng các kiểu nội tuyến cho các phần tử tương ứng, vì vậy bạn có thể xem và phát lại các hoạt ảnh kết quả ngay lập tức
Đối với phần này, giả sử rằng ảnh chụp màn hình bên dưới đại diện cho hoạt ảnh gốc
Để thay đổi thời lượng của hoạt ảnh, hãy nhấp và kéo vòng tròn đầu tiên hoặc cuối cùng
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 thể hiện dưới dạng các vòng tròn bên trong màu trắng. Nhấp và kéo một trong số này để thay đổi thời gian của khung hình chính