يمكنك إنشاء رسوم متحركة مخصّصة تمامًا لمشاريعك.
في بعض الأحيان، لن تحتاج إلى استخدام الكلمات الرئيسية الخاصة بالتأثيرات المريحة المضمّنة في 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 الثلاثي. تحتوي نقطة البداية في منحنى 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 لمزيد من التحكّم
وأحيانًا تحتاج إلى تحكم أكبر مما قد يوفره منحنى "بيزيه" المكعب. إذا أردت الشعور بالارتداد المرن، فيمكنك استخدام إطار عمل JavaScript، لأن هذا التأثير يصعب تحقيقه باستخدام CSS أو Web Animations.
TweenMax
وأحد أطر العمل الفعّالة هو TweenMax من GreenSock (أو 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 الضوء على جميع الخيارات المتاحة لك هنا، لذا من المفيد قراءتها.