jQuery Academy · درس

دوال التسهيل المخصّصة واستدعاءات الرسوم المتحركة

طبّق دوال تسهيل مخصّصة للتحكم في سرعة الرسوم المتحركة وتدفقها، واستخدم دوال الاستدعاء لتنفيذ الشيفرة بدقة عند اكتمال الرسوم المتحركة أو كل خطوة منها.

دوال التسهيل المخصّصة واستدعاءات الرسوم المتحركة درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ما بعد سرعة الحركة الأساسية

لا تقتصر الحركات على تحريك العناصر فحسب، بل تتعلق أيضًا بكيفية تحركها. يتحكم التدرّج الحركي في تسارع الحركة وتباطؤها، مما يجعلها تبدو طبيعية أو درامية بدرجة أكبر.

يوفّر jQuery خيارين مضمّنين للتدرّج الحركي: 'linear' (سرعة ثابتة) و'swing' (بداية بطيئة، ووسط سريع، ونهاية بطيئة). ولكن ماذا لو احتجتم إلى المزيد؟

استكشاف التدرّج الحركي الافتراضي

لنرَ الفرق بين خياري التدرّج الحركي الافتراضيين في jQuery:

'linear': تتحرك العناصر بسرعة ثابتة من البداية إلى النهاية.
'swing': هذا هو الخيار الافتراضي. تبدأ الحركة ببطء، ثم تتسارع في المنتصف، وتتباطأ مجددًا عند النهاية.

كلاهما بسيط، لكنكم غالبًا ستحتاجون إلى مزيد من التحكم في طبيعة الحركة.

التدرّج الحركي المخصص باستخدام jQuery UI

للحصول على تأثيرات تدرّج حركي أكثر تطورًا، نستخدم عادةً الإضافات. ومن الخيارات الشائعة مكوّن jQuery UI Easing.

يوسّع هذا المكوّن الكائن $.easing في jQuery، ويضيف إليه العديد من الدوال الجديدة مثل 'easeOutBounce' و'easeInOutQuad' وغيرها. ويمنحكم ذلك مكتبة غنية من منحنيات الحركة المحددة مسبقًا.

لاستخدامها، ستحتاجون عادةً إلى تضمين مكتبة jQuery UI في مشروعكم.

عرض توضيحي برمجي: الارتداد باستخدام EaseOutBounce

لنجرب حركة باستخدام دالة تدرّج حركي مخصصة من jQuery UI. لاحظوا كيف يرتدّ الصندوق عند النهاية بدلًا من توقفه فجأة. يتحقق هذا التأثير باستخدام 'easeOutBounce'.

(ملاحظة: يفترض هذا المثال تضمين النواة والتأثيرات الخاصة بـ jQuery UI.)

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

فهم دوال الاستدعاء اللاحق للحركات

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

تقبل الدالة .animate() في jQuery دالة استدعاء لاحق. وأكثرها شيوعًا هي دالة الاستدعاء اللاحق complete.

تُستدعى دالة الاستدعاء اللاحق complete مرة واحدة بعد اكتمال الحركة على العنصر أو العناصر المحددة.
وهي مناسبة تمامًا لربط الإجراءات أو عرض رسالة تفيد بالاكتمال.

عرض توضيحي برمجي: دالة الاستدعاء اللاحق `complete`

سنحرّك هنا صندوقًا، ثم نغيّر لون خلفيته ونعرض رسالة، ولكن بعد اكتمال الحركة بنسبة 100% فقط.

يضمن ذلك الاتساق البصري والتوقيت المناسب للإجراءات اللاحقة.

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

دالة الاستدعاء اللاحق `step`

أحيانًا تحتاجون إلى تنفيذ إجراء أثناء الحركة، وليس عند نهايتها فقط. وهنا تأتي دالة الاستدعاء اللاحق step.

تُستدعى دالة الاستدعاء اللاحق step لكل خاصية متحركة في كل خطوة من خطوات الحركة. ويُستدعى هذا الإجراء باستمرار أثناء تشغيل الحركة.

وتتلقى وسائط مثل now (القيمة الحالية للخاصية)، وfx (كائن يحتوي على تفاصيل الحركة)، وtween (للتحكم المتقدم).

عرض توضيحي برمجي: دالة الاستدعاء اللاحق `step`

لنستخدم دالة الاستدعاء اللاحق step لعرض الموضع الحالي للصندوق المتحرك أثناء تحركه.

يوضح ذلك كيفية الحصول على تحديثات آنية والتفاعل مع تقدّم الحركة. وسنستخدم تحديدًا الوسيطة now.

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

استخدام دوال استدعاء لاحق متعددة

يمكنكم استخدام دالتي الاستدعاء اللاحق step وcomplete في الحركة نفسها.

تقبل الدالة animate() كائن خيارات بوصفه الوسيطة الثانية، حيث يمكنكم تحديد كل من duration وeasing ودوال الاستدعاء اللاحق.

يتيح ذلك تحكمًا دقيقًا: تتبّع التقدم أثناء الحركة وتنفيذ إجراء نهائي بعد انتهائها.

اختبار دوال الاستدعاء اللاحق

أي دالة استدعاء لاحق في jQuery ضمن animate() هي الأنسب لتحديث شريط التقدم باستمرار أثناء تشغيل الحركة؟

التدرّج الحركي ودوال الاستدعاء اللاحق: ملخص

أحسنتم! لقد تعلمتم كيفية تحسين الحركات في jQuery:

التدرّج الحركي المخصص: استخدموا إضافات مثل jQuery UI لتطبيق منحنيات سرعة أكثر ديناميكية من 'linear' أو 'swing' وحدهما.
دالة الاستدعاء اللاحق complete: نفّذوا الشيفرة بدقة عند انتهاء الحركة.
دالة الاستدعاء اللاحق step: احصلوا على تحديثات آنية ونفّذوا إجراءات متكررة طوال تقدم الحركة.

تمنحكم هذه الأدوات تحكمًا أدق بكثير في التدفق البصري والتوقيت التفاعلي لعناصر صفحات الويب.

الأسئلة الشائعة

هل درس «دوال التسهيل المخصّصة واستدعاءات الرسوم المتحركة» مجاني؟

نعم — نص درس «دوال التسهيل المخصّصة واستدعاءات الرسوم المتحركة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «دوال التسهيل المخصّصة واستدعاءات الرسوم المتحركة»؟

طبّق دوال تسهيل مخصّصة للتحكم في سرعة الرسوم المتحركة وتدفقها، واستخدم دوال الاستدعاء لتنفيذ الشيفرة بدقة عند اكتمال الرسوم المتحركة أو كل خطوة منها. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «دوال التسهيل المخصّصة واستدعاءات الرسوم المتحركة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

تسلسل الرسوم المتحركة ووضعها في قائمة انتظار
دوال التسهيل المخصّصة واستدعاءات الرسوم المتحركة
تأثيرات التبديل والانزلاق المتقدّمة

← العودة إلى jQuery Academy