Hoạt hình css lag

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

    Hoạt hình css lag
    Tùy chỉnh và kiểm soát DevTools > Công cụ khác > Ảnh động.
    Hoạt hình css lag

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

    Hoạt hình css lag

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

Hoạt hình css lag

Tab Hoạt hình được nhóm thành bốn ngăn chính (phần)

Hoạt hình css lag

  1. đ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
  2. 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
  3. 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
  4. 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
    Hoạt hình css lag
    Phát lại. Hoạt hình được phát lại trong chế độ xem.

Nhấp vào các nút

Hoạt hình css lag
Tốc độ hoạt ảnh trên thanh Điều khiển để thay đổi tốc độ xem trước của nhóm hoạt ảnh hiện được chọn.

# 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

Hoạt hình css lag

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

Hoạt hình css lag

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

Hoạt hình css lag

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

Hoạt hình css lag

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::afterdiv.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::beforediv.feet::after

Hoạt hình css lag

# 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

Hoạt hình css lag

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

Hoạt hình css lag

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