حدد كيفية تركيب تأثيرات الرسوم المتحركة المتعددة مع تركيبة الصورة المتحركة

هل تريد استبدالها أو إضافتها أو تجميعها؟ هذا هو السؤال.

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

صورة مقدَّمة من أليكس بويد على Unsplash