محرر منحنيات Bezier للحركة

إذا كنت تعمل على مشاريع موشن جرافيك في After Effects، فستلاحظ أن الحركة وحدها لا تكفي لجعل المشهد يبدو احترافيا. فقد يتحرك العنصر من نقطة إلى أخرى بالطريقة الصحيحة، لكن النتيجة تبدو جامدة أو آلية. والسبب في ذلك غالبا هو استخدام منحنى حركة غير مناسب.

هنا يأتي دور Easing، وهو المسؤول عن طريقة تسارع الحركة وتباطؤها بين المفاتيح الرئيسية (Keyframes). فبدلا من أن يبدأ العنصر ويتوقف بسرعة ثابتة، يجعل الحركة أكثر سلاسة وطبيعية، وهو أحد أكثر التفاصيل التي تميز الأعمال الاحترافية عن الأعمال المبتدئة.

لهذا وفرنا حاسبة Easing وBezier في BillkerX، وهي أداة مجانية تساعدك على تصميم منحنيات الحركة بصريا، ومعاينتها مباشرة قبل استخدامها. كما يمكنك نسخ كود CSS Cubic Bezier، أو الحصول على Expression جاهز لبرنامج After Effects، بالإضافة إلى قيم Influence وSpeed لمن يفضل تعديل المنحنيات يدويا داخل Graph Editor.

وجميع العمليات تتم مباشرة داخل المتصفح، لذلك لا تحتاج إلى تثبيت أي برامج أو إضافات، ويمكنك تجربة أي منحنى ومشاهدة تأثيره خلال ثوان.

ما هو Easing؟

يشير مصطلح Easing إلى الطريقة التي تتغير بها سرعة الحركة بين مفتاحين رئيسيين (Keyframes). ففي الواقع، نادرا ما تبدأ الأجسام الحقيقية بالحركة بسرعة ثابتة أو تتوقف بشكل مفاجئ، بل تبدأ تدريجيا، ثم تتسارع، ثم تتباطأ قبل الوصول إلى وجهتها.

ولهذا يعتمد مصممو الموشن جرافيك على الـ Easing لإضفاء إحساس أكثر طبيعية على الحركة، سواء كانت حركة نص، أو شعار، أو أي عنصر آخر داخل المشهد.

أما إذا كانت جميع الحركات خطية (Linear)، فغالبا سيبدو العمل جامدا حتى وإن كان التصميم نفسه جيدا.

ماذا تقدم لك الأداة؟

بدلا من تعديل منحنيات الحركة يدويا داخل Graph Editor في كل مرة، تتيح لك الأداة تصميم المنحنى بصريا داخل المتصفح ومعاينة تأثيره مباشرة.

ومن خلالها يمكنك:

• إنشاء منحنيات Bezier مخصصة بسهولة.
• تجربة الحركة قبل استخدامها في المشروع.
• الاختيار من بين مجموعة من الإعدادات الجاهزة مثل Linear وEase وEase In وEase Out وEase In Out وBack وExpo.
• نسخ كود CSS Cubic Bezier لمشاريع الويب.
• الحصول على Expression جاهز للاستخدام في After Effects.
• عرض قيم Influence وSpeed لتطبيقها يدويا داخل Graph Editor إذا كنت تفضل هذه الطريقة.

سواء كنت تعمل على واجهات مستخدم، أو شعارات متحركة، أو فيديوهات تعريفية، أو قوالب موشن جرافيك، تساعدك الأداة على الوصول إلى منحنى الحركة المناسب بسرعة أكبر، مع الحفاظ على أسلوب حركة موحد في جميع أجزاء المشروع.

أخطاء شائعة عند استخدام منحنيات الحركة

حتى مع استخدام Easing، قد تقع بعض الأخطاء التي تجعل الحركة تبدو غير طبيعية أو غير متناسقة.

استخدام المنحنى نفسه في جميع الحركات

ليس كل عنصر يحتاج إلى النوع نفسه من الـ Easing. فقد يناسب Ease Out حركة دخول العناصر، بينما يكون Ease In أفضل عند خروجها. اختيار المنحنى المناسب لكل حركة يمنح المشروع نتيجة أكثر احترافية.

المبالغة في تأثير Back

يوفر منحنى Back حركة تتجاوز نقطة النهاية قليلا قبل الاستقرار، وهو تأثير رائع عند استخدامه باعتدال. لكن المبالغة فيه قد تجعل الحركة مشتتة أو غير مناسبة، خاصة في واجهات المستخدم أو المشاريع الرسمية.

تجاهل معاينة الحركة

قد تبدو قيم المنحنى مناسبة على الرسم البياني، لكن النتيجة الفعلية تختلف عند تطبيقها على عنصر متحرك. لذلك احرص دائما على مشاهدة المعاينة قبل نسخ القيم أو استخدام الـ Expression.

استخدام منحنيات مختلفة داخل المشروع نفسه

إذا كان كل عنصر يتحرك بمنحنى مختلف، فقد يبدو المشروع غير متناسق. من الأفضل اختيار منحنى أو اثنين واستخدامهما في معظم الحركات للحفاظ على أسلوب بصري موحد.

لماذا تستخدم هذه الأداة بدلا من Graph Editor؟

يوفر Graph Editor في After Effects تحكما كاملا في منحنيات الحركة، لكنه يتطلب تعديلات يدوية في كل مرة، خاصة عند العمل على مشاريع تحتوي على عدد كبير من العناصر.

أما هذه الأداة فتساعدك على تصميم المنحنى بصريا، ومعاينته مباشرة، ثم نسخ القيم أو الـ Expression أو كود CSS Cubic Bezier خلال ثوان، مما يوفر الوقت ويسهل إعادة استخدام المنحنيات نفسها في أكثر من مشروع.