แทนที่ เพิ่ม หรือสะสม และนั่นคือคำถาม
การรวมเอฟเฟกต์ภาพเคลื่อนไหวหลายรายการ
พร็อพเพอร์ตี้ 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: นมที่เติมลงในชาเป็นของเหลวและนมผสมเข้มข้นกันอย่างลงตัว
เดโม
ในการสาธิตด้านล่างมีช่องสีเทา 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)