عندما يتعلق الأمر ببناء مواقع ويب جذابة وجذابة بصريًا، تلعب الرسوم المتحركة دورًا حاسمًا في تحسين تجربة المستخدم. على الرغم من توفر العديد من مكتبات الرسوم المتحركة، إلا أن أبرزها هو GreenSock Animation Platform (GSAP). GSAP هي مكتبة جافا سكريبت قوية تسمح لك بإنشاء رسوم متحركة سريعة وسلسة ومتعددة المتصفحات بأقل قدر من التعليمات البرمجية.

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

لماذا جي إس إيه بي؟

إليك بعض الأسباب التي تجعل GSAP هي الأداة التي يستخدمها العديد من المطورين:

1. الأداء: يُعرف GSAP بكونه سريعًا بشكل لا يصدق ومحسّنًا للرسوم المتحركة عالية الأداء، حتى على واجهات المستخدم المعقدة.
2. التوافق: يعمل بسلاسة عبر جميع المتصفحات الرئيسية، بما في ذلك Internet Explorer (للمشاريع القديمة).
3. سهولة الاستخدام: واجهة برمجة التطبيقات الخاصة به واضحة ومباشرة، مما يجعلها في متناول المطورين الجدد في مجال الرسوم المتحركة.
4. الميزات المتقدمة: من الرسوم المتحركة المستندة إلى الجدول الزمني إلى التأثيرات المستندة إلى التمرير، يقدم GSAP مجموعة كبيرة من الميزات لكل من الرسوم المتحركة البسيطة والمعقدة.

---

ابدء

1. إعداد GSAP

للبدء، ستحتاج إلى تضمين GSAP في مشروعك. يمكنك إما استخدام CDN أو تثبيته عبر npm إذا كنت تستخدم أداة تجميع مثل Webpack أو Parcel.

استخدام CDN:

أو التثبيت عبر npm:

npm install gsap

الآن، GSAP جاهز للاستخدام في مشروعك.

---

2. الرسوم المتحركة الأساسية لـ GSAP

في جوهره، يقوم GSAP بتحريك أي خاصية لعنصر DOM. فيما يلي مثال بسيط لتحريك عنصر مربع من النقطة أ إلى النقطة ب.

HTML:

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

جافا سكريبت GSAP:

gsap.to(".box", {
  x: 300,
  duration: 2
});

في هذا المثال، يقوم GSAP بنقل عنصر .box بمقدار 300 بكسل على طول المحور السيني خلال ثانيتين. يتم استخدام الأسلوب gsap.to() لتحريك الخصائص من قيمتها الحالية إلى قيمة جديدة.

---

3. طرق GSAP الشائعة

• gsap.to(): يحرك الخصائص من قيمتها الحالية إلى القيم المستهدفة المحددة.

  gsap.to(".box", { x: 300, duration: 1 });

• gsap.from(): تحريك الخصائص من قيمة محددة إلى القيمة الحالية.

  gsap.from(".box", { opacity: 0, duration: 1 });

• gsap.fromTo(): يحدد قيم البداية والنهاية للرسوم المتحركة.

  gsap.fromTo(".box", { opacity: 0 }, { opacity: 1, duration: 1 });

---

4. إنشاء رسوم متحركة متسلسلة باستخدام الجدول الزمني

في كثير من الأحيان، ستحتاج إلى إنشاء سلسلة من الرسوم المتحركة التي تحدث واحدة تلو الأخرى. يوفر GSAP ميزة gsap.timeline()، مما يسمح لك بإنشاء رسوم متحركة معقدة في سلسلة.

const tl = gsap.timeline();

tl.to(".box", { x: 300, duration: 1 })
  .to(".box", { y: 200, duration: 1 })
  .to(".box", { rotation: 360, duration: 1 });

هنا، سيتحرك المربع . أولاً أفقيًا إلى 300 بكسل، ثم عموديًا إلى 200 بكسل، وأخيرًا، سيتم تدويره بمقدار 360 درجة. يحدث كل إجراء بالتسلسل مع الجدول الزمني لإدارة الطلب.

---

5. تخفيف التأثيرات

يوفر GSAP مجموعة متنوعة من وظائف التخفيف التي تتحكم في كيفية تقدم الرسوم المتحركة بمرور الوقت، مما يجعل الرسوم المتحركة أكثر طبيعية. التخفيف الافتراضي هو power1.out، ولكن يمكنك تغييره إلى وظيفة تخفيف مختلفة للحصول على تأثيرات مختلفة.

gsap.to(".box", {
  x: 300,
  duration: 2,
  ease: "bounce.out"
});

تشمل وظائف التخفيف الشائعة ما يلي:

• الطاقة 1، الطاقة 2، الطاقة 3، الطاقة 4
• ترتد
• مرن
• خلف
• المعرض

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

---

6. تحريك عناصر متعددة

يمكنك استهداف عناصر متعددة في وقت واحد باستخدام GSAP عن طريق تحديد الفئة أو محدد العنصر. ستقوم المكتبة بتحريك جميع العناصر المطابقة في وقت واحد.

gsap.to(".box", { x: 300, duration: 2 });
gsap.to(".circle", { y: 200, duration: 1 });

يمكنك أيضًا تمرير مجموعة من العناصر:

gsap.to([ ".box", ".circle" ], { rotation: 180, duration: 2 });

, { التدوير: 180, المدة: 2 });

---

7. تمرير الرسوم المتحركة باستخدام ScrollTrigger

يوفر GSAP أيضًا مكونًا إضافيًا قويًا يسمى ScrollTrigger

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

لاستخدامه، قم أولاً بتضمين المكون الإضافي:

مثال أساسي:

gsap.to(".box"، { التمرير: ".box"، // تشغيل الرسوم المتحركة عندما يدخل ".box" في إطار العرض س: 500، المدة: 3 });

هنا، سيتم تحريك عنصر .box عند دخوله إلى إطار العرض أثناء تمرير المستخدم.

---

خاتمة

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

إذا كنت قد بدأت للتو، فلا تشعر بالإرهاق! جرب بعض الرسوم المتحركة الأساسية واستكشف تدريجيًا مفاهيم أكثر تقدمًا مثل المخططات الزمنية ومشغلات التمرير. يحتوي GSAP على وثائق ممتازة سترشدك خلال كل شيء بدءًا من الرسوم المتحركة للمبتدئين وحتى الرسوم المتحركة المتقدمة.

ابدأ بالتجربة، وسترى بسرعة كيف يمكن لـ GSAP تحويل مشاريع الويب الخاصة بك إلى تجارب تفاعلية جذابة!