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

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

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

تسمح السمة 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