Kết hợp nhiều hiệu ứng hoạt ảnh bằng animation-composition

Bramus

Thuộc tính animation-composition cho phép kiểm soát những gì sẽ xảy ra khi nhiều ảnh động ảnh hưởng đến cùng một thuộc tính cùng một lúc.

Giả sử bạn đã áp dụng phép biến đổi cơ bản này cho một phần tử:

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

Và bạn cũng có bộ khoá khung hình này:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

Khi bạn áp dụng các khung hình khoá này cho một phần tử, transform trong khung hình khoá to sẽ thay thế transform hiện có. Đây là hành vi mặc định.

Với animation-composition, giờ đây, bạn có thể kiểm soát những gì sẽ xảy ra thay vì replace mặc định. Các giá trị được chấp nhận là:

• replace: Giá trị hiệu ứng sẽ thay thế giá trị cơ bản. (mặc định)
• add: Giá trị hiệu ứng được thêm vào giá trị cơ bản.
• accumulate: Giá trị hiệu ứng được kết hợp với giá trị cơ bản.

Sự khác biệt giữa phép cộng và phép tích luỹ là rất nhỏ. Ví dụ: lấy hai giá trị blur(2) và blur(3). Khi cộng lại, kết quả sẽ là blur(2) blur(3), nhưng khi tích luỹ, kết quả sẽ là blur(5).

Bạn có thể so sánh điều này với một tách trà. Khi bạn đổ sữa vào, điều này sẽ xảy ra:

• replace: Trà được loại bỏ và thay thế bằng sữa.
• add: Sữa được thêm vào cốc nhưng vẫn nằm trên lớp trà.
• accumulate: Sữa được thêm vào trà và vì cả hai đều là chất lỏng nên chúng trộn lẫn với nhau.

Bản minh hoạ

Trong bản minh hoạ, có 3 hộp màu xám được áp dụng transform và animation cơ bản.

Mặc dù các hộp này có cùng một ảnh động, nhưng chúng tạo ra kết quả khác nhau vì có một tập hợp animation-composition khác:

Hộp đầu tiên được đặt thành animation-composition: replace. Đây là hành vi mặc định. Ở vị trí cuối, giá trị translateX(50px) rotate(45deg) ban đầu cho transform sẽ được thay thế bằng translateX(100px).

Hộp thứ hai được đặt thành animation-composition: add. Ở vị trí cuối, translateX(100px) sẽ được thêm vào translateX(50px) rotate(45deg) ban đầu, dẫn đến translateX(50px) rotate(45deg) translateX(100px). Thao tác này sẽ di chuyển hộp đi 50px, sau đó xoay hộp 45 độ rồi di chuyển hộp đi 100px.

Hộp thứ ba được đặt thành animation-composition: accumulate. Ở vị trí cuối cùng, translateX(100px) sẽ được cộng theo phép toán với translateX(50px) từ phép biến đổi ban đầu, dẫn đến phép biến đổi translateX(150px) rotate(45deg).