الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

GSAP (منصة الرسوم المتحركة Greensock)

GSAP هي مكتبة الرسوم المتحركة JavaScript الإطارية التي تحول المطورين إلى أبطال خارقين للرسوم المتحركة. بناء رسوم متحركة عالية الأداء تعمل في كل متصفح رئيسي. تحريك CSS ، SVG ، قماش ، رد فعل ، VUE ، WebGL ، الألوان ، السلاسل ، مسارات الحركة ، الكائنات العامة ... أي شيء يمكن أن يلمسه JavaScript! يوفر البرنامج المساعد Scrolltrigger من GSAP الرسوم المتحركة القائمة على التمرير مع الحد الأدنى من التعليمات البرمجية. GSAP.MatchMedia () يجعل بناء الرسوم المتحركة استجابة وصديقة للوصول نسيم.

لا توجد مكتبة أخرى تقدم مثل هذه التسلسل المتقدم والموثوقية والتحكم الضيق مع حل مشاكل العالم الحقيقي على أكثر من 12 مليون موقع. تعمل GSAP حول تناقضات عدد لا يحصى من المتصفح ؛ الرسوم المتحركة الخاصة بك تعمل فقط . في جوهرها ، يعد GSAP مناورًا للخاصية عالية السرعة ، حيث يقوم بتحديث القيم بمرور الوقت بدقة شديدة. إنها ما يصل إلى 20x أسرع من jQuery!

GSAP مرنة تماما. رشها أينما تريد. التبعيات الصفر.

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

ابدأ

مستندات وتثبيت

عرض الوثائق الكاملة هنا ، بما في ذلك دليل التثبيت.

CDN 

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js " > </ script >

راجع صفحة GSAP المخصصة لـ JSDelivr للحصول على روابط CDN السريعة للملفات/الإضافات الأساسية. هناك المزيد من تعليمات التثبيت في gsap.com.

تستبعد كل شبكة إعلانية رئيسية GSAP من حسابات حجم الملفات ومعظمها لديها على CDNs الخاصة بها ، لذلك اتصل بهم للحصول على عنوان URL (عناوين URL المناسبة.

NPM

انظر دليل استخدام GSAP عبر NPM هنا. 

 npm install gsap

يمكن أن تنشط جوهر GSAP أي شيء تقريبًا بما في ذلك CSS والسمات ، بالإضافة إلى أنه يشمل جميع أساليب المنفعة مثل Interpolate () و MapRange () ومعظم السهولة ، ويمكنه القيام بالتقاط المعدلات. 

 // typical import
import gsap from "gsap" ;

// get other plugins:
import ScrollTrigger from "gsap/ScrollTrigger" ;
import Flip from "gsap/Flip" ;
import Draggable from "gsap/Draggable" ;

// or all tools are exported from the "all" file (excluding members-only plugins):
import { gsap , ScrollTrigger , Draggable , MotionPathPlugin } from "gsap/all" ;

// don't forget to register plugins
gsap . registerPlugin ( ScrollTrigger , Draggable , Flip , MotionPathPlugin ) ;

ملفات NPM هي وحدات ES ، ولكن هناك أيضًا A / Dist / Directory مع ملفات UMD للحصول على توافق إضافي.

قم بتنزيل المكونات الإضافية لأعضاء Club GSAP فقط من حساب GSAP.com الخاص بك ، ثم قم بتضمينها في حمولة JS الخاصة بك. يوجد حتى ملف Tarball الذي يمكنك تثبيته باستخدام NPM/YARN. لدى GSAP سجل NPM الخاص للأعضاء أيضًا. نشر الأسئلة في منتدياتنا وسنكون سعداء للمساعدة.

Scrolltrigger & scrollsmoother

إذا كنت تبحث عن الرسوم المتحركة التي تعتمد على التمرير ، فإن البرنامج المساعد Scrolltrigger من GSAP هو المعيار الجديد. هناك مرافق scrollsmoother أيضا.

باستخدام رد الفعل؟

هناك حزمة @GSAP / React التي تعرض خطاف useGSAP() وهو استبدال إسقاط لاستخدام useEffect() / useLayoutEffect() ، وأتمتة مهام التنظيف. يرجى قراءة دليل React للحصول على التفاصيل.

موارد

  • gsap.com
  • دليل البدء
  • مستندات
  • قوالب العروض التجريبية والقوالب
  • منتديات المجتمع
  • تخفيف المرئي
  • عرض
  • قناة يوتيوب
  • ورقة الغش
  • جرب المكونات الإضافية المكافأة مجانًا
  • Club GSAP (يمكنك الوصول إلى المكونات الإضافية المكافأة غير المقيدة التي ليست في هذا المستودع)

ما هو النادي GSAP؟

هناك 3 أسباب رئيسية يسجل أي شخص لنادي GSAP:

  • للوصول إلى المكونات الإضافية فقط للأعضاء فقط مثل Morphsvg ، splittext ، scrollsmoother ، إلخ.
  • للحصول على الترخيص التجاري الخاص.
  • لدعم جهود التنمية المستمرة وبهجةنا .

يتعلم أكثر.

جرب جميع الإضافات المكافأة مجانًا!

https://gsap.com/trial

هل تحتاج إلى مساعدة؟

اسأل في منتديات GSAP الودية. أو شارك معرفتك ومساعدة شخص آخر - إنها طريقة رائعة لشحذ مهاراتك! الإبلاغ عن أي أخطاء هناك أيضًا (أو قم بتقديم مشكلة هنا إذا كنت تفضل).

رخصة

يمكن الاطلاع على ترخيص Greensock القياسي "No Charge" على https://gsap.com/standard-license. يتم منح أعضاء Club GSAP حقوقًا إضافية. انظر https://gsap.com/licensing/ للحصول على التفاصيل. لماذا لا تستخدم GSAP ترخيصًا مفتوحًا لـ MIT (أو ما شابه) ، ولماذا هذا شيء جيد ؟ تشرح هذه المقالة كل شيء: https://gsap.com/why-license/

حقوق الطبع والنشر (C) 2008-2023 ، Greensock. جميع الحقوق محفوظة.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل