الجمع بين تأثيرات رسوم متحركة متعددة باستخدام animation-composition

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: يتم دمج قيمة التأثير مع القيمة الأساسية.

الفرق بين الإضافة والتراكم بسيط. على سبيل المثال، خذ القيمتين blur(2) وblur(3). عند جمعها معًا، ستنتج blur(2) blur(3)، ولكن عند تجميعها، ستنتج blur(5).

يمكنك مقارنة ذلك بكوب مملوء بالشاي. عند سكب الحليب فيه، سيحدث ما يلي:

• replace: تتم إزالة الشاي واستبداله بالحليب.
• add: يُضاف الحليب إلى الكوب، ولكنّه يبقى على شكل طبقة فوق الشاي.
• accumulate: يُضاف الحليب إلى الشاي، وبما أنّهما سائلان، يمتزجان بشكل جيد.

عرض توضيحي

في العرض التوضيحي، هناك ثلاثة مربّعات رمادية تم تطبيق الرمزين الأساسيين transform وanimation عليها.

على الرغم من أنّ هذه المربّعات تتضمّن الصورة المتحرّكة نفسها، إلا أنّها تعرض نتيجة مختلفة لأنّها تتضمّن مجموعة animation-composition مختلفة:

تم ضبط المربّع الأول على animation-composition: replace. وهذا هو السلوك التلقائي. في الموضع الأخير، يتم استبدال قيمة translateX(50px) rotate(45deg) الأصلية الخاصة بـ transform بالقيمة translateX(100px).

تم ضبط المربّع الثاني على animation-composition: add. في موضعها النهائي، تتم إضافة translateX(100px) إلى translateX(50px) rotate(45deg) الأصلية، ما يؤدي إلى translateX(50px) rotate(45deg) translateX(100px). يؤدي ذلك إلى تحريك المربّع بمقدار 50 بكسل، ثم تدويره بمقدار 45 درجة، ثم تحريكه بمقدار 100 بكسل.

تم ضبط المربّع الثالث على animation-composition: accumulate. في موضعها النهائي، ستتم إضافة translateX(100px) رياضيًا إلى translateX(50px) من عملية التحويل الأصلية، ما يؤدي إلى عملية تحويل translateX(150px) rotate(45deg).