أنشئ رسوم متحركة مخصصة بالكامل لمشاريعك، واستمتِع برسومات رائعة.
وفي بعض الأحيان، قد لا تحتاج إلى استخدام تخفيف الكلمات الرئيسية المضمّنة في CSS، أو استخدام Web Animations أو إطار عمل JavaScript. في هذه الحالات، يمكنك عادةً تحديد منحنيات (أو معادلات) خاصة بك، وهذا يوفر الكثير من التحكم في مظهر الرسوم المتحركة لمشروعك.
ملخّص
- يسمح لك التخفيف المخصص بإضفاء طابع شخصي على مشروعاتك.
- يمكنك إنشاء منحنيات Bézier مكعّبة تشبه منحنيات الصور المتحركة التلقائية (أي "إراحة للخارج" أو "إراحة للداخل" أو غير ذلك)، ولكن مع التوكيد في أماكن مختلفة.
- استخدِم JavaScript عندما تحتاج إلى مزيد من التحكّم في توقيت الصور المتحركة وسلوكها، مثل الصور المتحركة المرنة أو الرسوم المتحركة المرتدة.
إذا كنت تتحرك باستخدام CSS، فستجد أنه يمكنك تحديد منحنيات Bézier التكعيبية لتحديد التوقيت. في الواقع، ترتبط الكلمات الرئيسية ease وease-in وease-out وlinear ومنحنيات Bézier المحدّدة مسبقًا، والتي تم توضيحها بالتفصيل في مواصفات عمليات نقل CSS ومواصفات Web Animations.
يأخذ منحنيات Bézier هذه أربع قيم، أو زوجان من الأرقام، ويصف كل زوج منها إحداثيات X وY لنقاط التحكم لمنحنى Bézier التكعيبي. تحتوي نقطة بداية منحنى بيزييه على إحداثيات (0، 0) ونقطة النهاية لها الإحداثيات (1، 1)؛ يمكنك تعيين قيمتي X وY لنقطتي التحكم. يجب أن تتراوح القيم X لنقطتي التحكم بين 0 و1، ويمكن أن تتجاوز القيمة Y لكل نقطة تحكم الحد [0، 1]، على الرغم من أن المواصفة غير واضحة بالقدر المطلوب.
يمنحك تغيير القيمة X وY لكل نقطة تحكم منحنى مختلفًا تمامًا، وبالتالي، طابع مختلف تمامًا للرسوم المتحركة. على سبيل المثال، إذا كانت نقطة التحكم الأولى في المنطقة السفلية اليمنى، سيكون بدء الرسوم المتحركة بطيئًا. وإذا كان في أعلى يمين الشاشة، سيكون البدء سريعًا. وبالعكس، إذا كانت نقطة التحكم الثانية في المنطقة اليمنى السفلية من الشبكة، فستكون سريعة في النهاية؛ إذا كانت في أعلى اليسار، فستكون بطيئة إلى النهاية.
للمقارنة، إليك منحنيان: منحنى إراحة نموذجي للداخل والخارج: منحنى مخصّص:
مشاهدة صورة متحرّكة بتخفيف مخصّص
لغة CSS للمنحنى المخصّص هي:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
الرقمان الأولان هما الإحداثيات X وY لنقطة التحكم الأولى، والرقمان الثانيان هما الإحداثيات X وY لنقطة التحكم الثانية.
إن إنشاء منحنى مخصص أمر ممتع ويمنحك تحكمًا كبيرًا في مظهر الرسوم المتحركة. على سبيل المثال، في ما يتعلق بالمنحنى أعلاه، يمكنك أن ترى أن المنحنى يشبه منحنى استرخاء كلاسيكي للداخل، ولكنه يتضمن جزء اختصار "سهولة للداخل" أو "البدء" وفترة بطء مطوّلة في النهاية.
ويمكنك تجربة استخدام أداة منحنى الرسوم المتحركة هذه ومعرفة مدى تأثير المنحنى على مظهر الرسم المتحرك.
استخدام إطارات عمل JavaScript لمزيد من التحكم
وفي بعض الأحيان، قد تحتاج إلى تحكُّم أكبر ممّا يمكن أن يوفّره منحنى Bézier المكعّب. إذا أردت الحصول على ارتداد مرن، يمكنك استخدام إطار عمل JavaScript، لأنه يصعب تحقيقه باستخدام CSS أو Web Animations.
TweenMax
أحد إطارات العمل الفعالة هو GreenSock’s TweenMax (أو TweenLite إذا كنت تريد الحفاظ على بساطة المحتوى)، نظرًا لأنك تحصل على مزيد من التحكم من خلاله في مكتبة JavaScript صغيرة، فضلاً عن أنها قاعدة رموز برمجية للبالغين.
مشاهدة صورة متحركة لتسهيل الاستخدام
لاستخدام TweenMax، قم بتضمين هذا النص البرمجي في صفحتك:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
بعد وضع النص البرمجي، يمكنك استدعاء TweenMax مقارنةً بالعنصر وإخباره بالخصائص التي تريدها، بالإضافة إلى أي تخفيف تريده. هناك العديد من خيارات التخفيف التي يمكنك استخدامها؛ يستخدم التعليمة البرمجية أدناه طريقة إرخاء مرنة:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
تعرض مستندات TweenMax جميع الخيارات المتاحة لك هنا، لذا فهي تستحق قراءتها.