รวมเอฟเฟกต์ภาพเคลื่อนไหวหลายรายการด้วย animation-composition

Bramus

พร็อพเพอร์ตี้ animation-composition ช่วยให้ควบคุมสิ่งที่ควรเกิดขึ้นเมื่อภาพเคลื่อนไหวหลายรายการส่งผลต่อพร็อพเพอร์ตี้เดียวกันพร้อมกัน

สมมติว่าคุณใช้การเปลี่ยนรูปแบบพื้นฐานนี้กับองค์ประกอบ

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

และคุณมีชุดคีย์เฟรมนี้ด้วย

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

เมื่อใช้คีย์เฟรมเหล่านี้กับองค์ประกอบ transform ในคีย์เฟรม to จะแทนที่ transform ที่มีอยู่ นี่คือลักษณะการทำงานเริ่มต้น

ตอนนี้คุณสามารถควบคุมสิ่งที่ควรเกิดขึ้นแทน replace เริ่มต้นได้แล้วด้วย animation-composition ค่าที่ยอมรับมีดังนี้

• replace: ค่าเอฟเฟกต์จะแทนที่ค่าพื้นฐาน (ค่าเริ่มต้น)
• add: ระบบจะเพิ่มมูลค่าเอฟเฟกต์ลงในมูลค่าพื้นฐาน
• accumulate: ค่าเอฟเฟกต์จะรวมกับค่าพื้นฐาน

ความแตกต่างระหว่างการเพิ่มและการสะสมนั้นเล็กน้อย เช่น พิจารณาค่า 2 ค่า ได้แก่ blur(2) และ blur(3) เมื่อรวมกันแล้วจะได้ blur(2) blur(3) แต่เมื่อสะสมแล้วจะได้ blur(5)

คุณสามารถเปรียบเทียบสิ่งนี้กับถ้วยที่เต็มไปด้วยชา เมื่อเทนมลงในแก้ว สิ่งที่จะเกิดขึ้นคือ

• replace: ชาจะถูกนำออกและแทนที่ด้วยนม
• add: มีการเติมนมลงในแก้ว แต่ยังคงเป็นชั้นอยู่เหนือชา
• accumulate: เมื่อเติมนมลงในชาและเนื่องจากทั้ง 2 อย่างเป็นของเหลว จึงผสมกันได้ดี

สาธิต

ในเดโมมีกล่องสีเทา 3 กล่องที่มีการใช้ฐาน transform และ animation

แม้ว่ากล่องเหล่านี้จะมีภาพเคลื่อนไหวเหมือนกัน แต่จะให้ผลลัพธ์ที่แตกต่างกันเนื่องจากมีanimation-compositionที่แตกต่างกัน

ช่องแรกตั้งค่าไว้เป็น animation-composition: replace นี่คือลักษณะการทำงานเริ่มต้น ในตำแหน่งสุดท้าย ระบบจะแทนที่translateX(50px) rotate(45deg) ค่าเดิมของ transform ด้วย translateX(100px)

ช่องที่ 2 ตั้งค่าเป็น animation-composition: add ในตำแหน่งสุดท้าย ระบบจะเพิ่ม translateX(100px) ลงใน translateX(50px) rotate(45deg) เดิม ทำให้ได้ translateX(50px) rotate(45deg) translateX(100px) ซึ่งจะย้าย กล่อง 50 พิกเซล จากนั้นหมุน 45 องศา แล้วย้าย 100 พิกเซล

ช่องที่ 3 ตั้งค่าเป็น animation-composition: accumulate ในตำแหน่งสุดท้าย ระบบจะนำ translateX(100px) มาบวกกับ translateX(50px) จากการแปลงเดิม ซึ่งส่งผลให้เกิดการแปลง translateX(150px) rotate(45deg)