ระบุวิธีผสมระหว่างเอฟเฟกต์ภาพเคลื่อนไหวหลายรายการกับการกำหนดองค์ประกอบภาพเคลื่อนไหว

แทนที่ เพิ่ม หรือสะสม นั่นคือคำถาม

Bramus

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

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

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

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

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

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

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

animation-composition ช่วยให้คุณควบคุมได้ว่าจะให้เกิดอะไรขึ้นแทน replace เริ่มต้น ค่าที่ยอมรับมีดังนี้

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

รูปภาพโดย Alex Boyd ใน Unsplash