السرعة (مكتبة JavaScript)

الموسوعة الحرة
سرعة
المؤلف(ون) الأصلي(ون)جوليان شابيرو
إصدار مستقر
1.5.2 [1] / 31 يوليو 2018 [2]
مستودع
  • github.com/julianshapiro/velocity
مكتوب فيجافا سكريبت
نظام التشغيلمتعدد المنصات
منصةانظر دعم المتصفح
يكتبمكتبة جافا سكريبت ، الرسوم المتحركة
رخصةمعهد ماساتشوستس للتكنولوجيا [3]
موقع إلكترونيموقع velocityjs.org

Velocity هي مكتبة JavaScript متعددة الأنظمة مصممة لتبسيط برمجة جانب العميل للرسوم المتحركة على مواقع الويب. [4] Velocity هو برنامج مجاني مفتوح المصدر مرخص بموجب ترخيص MIT . [3] إنه محرك الرسوم المتحركة على الويب مفتوح المصدر الأكثر شهرة. [5]

تم تصميم بناء جملة Velocity لتسهيل إنشاء رسوم متحركة معقدة لعناصر HTML و SVG . [6] بالإضافة إلى فوائد سير العمل، يوفر Velocity أداءً للرسوم المتحركة ينافس الرسوم المتحركة المستندة إلى CSS . [7] يحقق Velocity أداءه من خلال الحفاظ على ذاكرة تخزين مؤقتة داخلية لحالات الرسوم المتحركة وتقليل " تخريب التخطيط "، وهو السلوك غير المرغوب فيه الذي تخضع له متصفحات الويب عند التحديث البصري بمعدل سريع. [7] بشكل عام، تسمح فوائد سير العمل والأداء باستخدام Velocity لبرمجة الرسوم المتحركة المتطورة التي يمكن دمجها في كل من تطبيقات الويب والجوال. [8] يجعل دعمه الواسع للمتصفح والأجهزة مثاليًا لتوزيعات المؤسسات الكبيرة التي يجب أن تدعم الأجهزة منخفضة الطاقة. [9]

تُستخدم Velocity لتشغيل واجهات المستخدم للعديد من المواقع الإلكترونية الشهيرة، بما في ذلك Uber و Samsung و WhatsApp و Tumblr و HTC و Mazda و Microsoft Windows . وهي واحدة من أكثر المشاريع المفضلة على خدمة استضافة التعليمات البرمجية GitHub . [10] في عام 2015، تم ترشيح Velocity لجائزة مشروع مفتوح المصدر لهذا العام من قبل The Net Awards . [11]

سمات

تتضمن ميزات Velocity ما يلي: [4]

  • نافذة المتصفح والتمرير بين العناصر
  • الاستقلال عن إطار عمل jQuery [12]
  • عكس الرسوم المتحركة (القدرة على التراجع عن الرسوم المتحركة السابقة) وتكرار الرسوم المتحركة
  • رسوم متحركة لعناصر SVG [13]
  • رسوم متحركة بالألوان RGB و hex
  • رسوم متحركة لخاصية التحويل في CSS
  • تأثيرات الرسوم المتحركة التي تم إنشاؤها مسبقًا عبر حزمة واجهة المستخدم الخاصة بـ Velocity [14]
  • الحركة المعتمدة على الفيزياء من خلال نوع تخفيف الزنبرك
  • وعود التكامل

دعم المتصفح

يدعم Velocity جميع متصفحات سطح المكتب الرئيسية ( Firefox و Google Chrome و Safari ) بالإضافة إلى أنظمة التشغيل المحمولة iOS و Android . ويمتد دعمه إلى Internet Explorer 8 و Android 2.3. [15]

الاستخدام

بما في ذلك المكتبة

مكتبة Velocity عبارة عن ملف JavaScript واحد يحتوي على جميع وظائفها الأساسية. ويمكن تضمينها داخل صفحة ويب من خلال الارتباط بنسخة محلية أو بإحدى النسخ العديدة المتوفرة من الخوادم العامة، بما في ذلك jsDelivr من MaxCDN أو cdnjs من Cloudflare .

< script  src = "velocity.min.js " > </script>

من الممكن أيضًا تضمين Velocity مباشرةً من شبكات توصيل المحتوى. (تُستخدم سمة integrity لسلامة الموارد الفرعية .) يوصى دائمًا باستخدام HTTPS للموارد، ولكن يمكن استبدال ذلك باستخدام //للاستفادة من عناوين URL النسبية للبروتوكول . 

< script  src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"  integrity = "sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+"  crossorigin = "anonymous" ></ script >

أساليب الاستخدام

لدى Velocity طريقتان للاستخدام:

  • الوظيفة $.Velocity، وهي طريقة مصنع ممتدة من كائن جذر jQuery . تعمل هذه الطريقة على تحريك عناصر DOM الخام بدلاً من العناصر المغلفة بـ jQuery . هذا هو الأسلوب المستخدم عند استخدام Velocity بدون jQuery على الصفحة.
  • الوظيفة $element.velocity(). هذا هو النمط المستخدم لتحريك كائنات عناصر jQuery عندما يكون jQuery موجودًا على الصفحة.

تتكون مكالمات الرسوم المتحركة في Velocity من توفير العناصر المطلوبة للتحريك، وخريطة خصائص الرسوم المتحركة لتحديد خصائص CSS المراد تحريكها، وكائن خيارات اختياري لتحديد إعدادات الرسوم المتحركة (على سبيل المثال المدة ).

الحجج

تقبل Velocity وسيطة واحدة أو أكثر. الوسيطة الأولى المطلوبة يمكن أن تكون إما اسم أمر Velocity محدد مسبقًا (على سبيل المثال، scroll أو reverse ) أو كائن يتكون من خصائص CSS المراد تحريكها: 

// قم بتحريك عرض العنصر إلى 100 بكسل وخاصيته اليسرى إلى 200 بكسل 
$element . velocity ({ width : "100px" , left : "200px" });

الحجة الثانية، والتي هي اختيارية، هي كائن. يتم استخدامها لتحديد خيارات الرسوم المتحركة مثل المدة ، والتسهيل ، والإكمال (وظيفة عشوائية يتم تنفيذها بمجرد اكتمال الرسوم المتحركة): 

// قم بتحريك عرض العنصر إلى 100 بكسل على مدار مدة 1000 مللي ثانية بعد التوقف لمدة تأخير 100 ثانية. 
$element . velocity ({ width : "100px" }, { duration : 1000 , delay : 100 });

تسلسل

يتكون إنشاء سلسلة من مكالمات الرسوم المتحركة المتتالية في Velocity من وضع مكالمات velocity() واحدة تلو الأخرى على كائن عنصر jQuery المستهدف : 

$element 
. velocity ({ height : 300 }, { duration : 1000 }) // انتقل إلى هذا التحريك بعد اكتمال التحريك السابق . velocity ({ top : 200 }, { duration : 600 }) // ومرة ​​أخرى... . velocity ({ opacity : 0 }, { duration : 200 });

التمرير والعكس

تتكون عملية التمرير في Velocity من تمرير "scroll" كحجة أولى لـ Velocity — بدلاً من خريطة خصائص CSS النموذجية: 

// التمرير لمدة 750 مللي ثانية 
$element . velocity ( "scroll" , { duration : 750 });

سيقوم المتصفح بعد ذلك بالتمرير إلى الأسفل إلى الحافة العلوية للعنصر الذي تم استدعاء Velocity عليه.

يتكون عكس الرسوم المتحركة في Velocity من تمرير "عكس" كحجة أولى لـ Velocity: 

// تحريك ارتفاع العنصر 
$element . velocity ({ height : "500px" }, { duration : 500 }); // عكس التحريك السابق؛ تحريك مرة أخرى إلى الارتفاع الأصلي للعنصر باستخدام المدة السابقة $element . velocity ( "reverse" );

يعود الأمر العكسي في Velocity افتراضيًا إلى خيارات الرسوم المتحركة المستخدمة في المكالمة السابقة. يؤدي تمرير كائن خيارات جديد إلى تمديد الكائن السابق: 

$element . velocity ({ height : "500px" }, { duration : 500 }); // قم بتوسيع كائن خيارات المكالمة العكسية السابقة بقيمة مدة جديدة $element . velocity ( "reverse" , { duration : 1000 });

تاريخ

تم تطوير Velocity بواسطة Julian Shapiro لمعالجة نقص مكتبات الرسوم المتحركة JavaScript عالية الأداء والموجهة للمصممين . [16] [17] قامت Stripe ، وهي شركة تكنولوجيا إنترنت شهيرة تركز على مطوري الويب ، برعاية Shapiro في منحة للمساعدة في توفير الموارد المالية اللازمة لمواصلة التطوير بدوام كامل على Velocity. [18]

ساعد الأداء العالي لمحرك الرسوم المتحركة الداخلي في Velocity في إعادة نشر الرسوم المتحركة على الويب المستندة إلى JavaScript، والتي كانت قد فقدت شعبيتها سابقًا للرسوم المتحركة المستندة إلى CSS بسبب مزايا السرعة التي تتمتع بها مقارنة بمكتبات JavaScript القديمة التي تفتقر إلى التركيز على الرسوم المتحركة. [19]

في سبتمبر 2014، أصدر شابيرو Velocity Motion Designer ، وهي أداة لتصميم الرسوم المتحركة على مواقع الإنتاج المباشر والتي سمحت بتصدير كود الرسوم المتحركة الناتج في الوقت الفعلي للاستخدام اللاحق داخل IDE . [20] في مارس 2015، نشر Peachpit كتاب Shapiro's Web Animation باستخدام JavaScript ، والذي يعلم كل من المبادئ الأولية والمتقدمة لتطوير الرسوم المتحركة على الويب باستخدام Velocity. [ بحاجة لمصدر ] اعتبارًا من منتصف عام 2015، لا يزال تطوير Velocity وصيانته حصريًا بواسطة Shapiro. [21]

بالإضافة إلى استخدام Velocity في بيئات المؤسسات المهنية، فإنه يستخدم أيضًا على نطاق واسع في تجارب تطوير الويب وممارسة المبتدئين. عادةً ما يتم نشر مشاريع تطوير الويب التجريبية المبنية على Velocity على CodePen (مثال)، وهي خدمة مشاركة أكواد مجتمعية رائدة.

انظر أيضا

قراءة إضافية

  • التحريك بدون jQuery
  • كيفية استخدام Velocity لإضافة الرسوم المتحركة بسهولة
  • رسوم متحركة سريعة لواجهة المستخدم باستخدام Velocity.js
  • الموقع الرسمي
  • معرض عرض السرعة

مراجع

  1. ^ julianshapiro. "velocity/README.md at master · julianshapiro/velocity · GitHub". Github.com . تم الاسترجاع في 2021-02-13 .
  2. ^ "تاريخ package.json - julianshapiro/velocity · GitHub". Github.com . تم الاسترجاع في 2021-02-13 .
  3. ^ من قبل julianshapiro (2014-10-09). "velocity/LICENSE.md at master · julianshapiro/velocity · GitHub". Github.com . تم الاسترجاع في 2016-01-20 .
  4. ^ "JavaScript Animation". 15 يونيو 2015.
  5. ^ "المساهم الرئيسي في تقنيات المصدر المفتوح، جوليان شابيرو، يرفع الستار عن استخدام SAAS". Forbes.com . تم الاسترجاع في 2016-01-20 .
  6. ^ "Velocity.js للمصممين". Studio Wolf . تم الاسترجاع في 2016-01-20 .
  7. ^ "CSS مقابل JS Animation: أيهما أسرع؟". 28 أبريل 2014.
  8. ^ "Velocity، القوة الدافعة لمكتبات JavaScript". 11 أكتوبر 2017.
  9. ^ جوليان شابيرو (2014-06-16). "رسوم متحركة سريعة بشكل لا يصدق لواجهة المستخدم باستخدام Velocity.js". Sitepoint.com . تم الاسترجاع في 2016-01-20 .
  10. ^ "بحث · نجوم:>1 · GitHub". Github.com . تم الاسترجاع في 2016-01-20 .
  11. ^ "قائمة مختصرة لجوائز The Net Awards 2015 التي تحتفل بأفضل ما في مجال تصميم وتطوير الويب". Thenetawards.com . تم الاسترجاع في 2016-01-20 .
  12. ^ "التحريك بدون jQuery – مجلة Smashing". Smashingmagazine.com. 2014-09-04 . تم الاسترجاع في 2016-01-20 .
  13. ^ "المقدمة البسيطة إلى الرسوم المتحركة بتنسيق SVG". 31 يوليو 2014.
  14. ^ "استخدم Velocity.js لتطبيق تأثيرات حركة سلسة تشبه تلك الموجودة في التطبيقات | JavaScript | Web Designer". Webdesignermag.co.uk. 2015-01-21 . تم الاسترجاع في 2016-01-20 .
  15. ^ "Velocity.js". Julian.com . تم الاسترجاع في 2016-01-20 .
  16. ^ فريق Awwwards. "مقابلة مع جوليان شابيرو". Awwwards.com . تم الاسترجاع في 2016-01-20 .
  17. ^ شابيرو، جوليان (2014-05-21). "تعامل مع البرمجيات مفتوحة المصدر مثل الشركات الناشئة ★ Mozilla Hacks – مدونة مطوري الويب". Hacks.mozilla.org . تم الاسترجاع في 2016-01-20 .
  18. ^ جريج بروكمان (2014-06-06). "مستفيدو المنح من برنامج Open-Source Retreat". Stripe.com . تم الاسترجاع في 2016-01-20 .
  19. ^ أوريليو دي روزا (2014-06-23). ​​"تحسين الرسوم المتحركة باستخدام jQuery بسهولة". Sitepoint.com . تم الاسترجاع في 2016-01-20 .
  20. ^ أعد مزج هذا الفيديو (2014-09-06). "Velocity Motion Designer: Overview". YouTube . تم الاسترجاع في 2016-01-20 .
  21. ^ "المساهمون في julianshapiro/Velocity". GitHub .
تم الاسترجاع من "https://en.wikipedia.org/w/index.php?title=السرعة_(مكتبة_جافا_سكربت)&oldid=1180486728"
Original text
Rate this translation
Your feedback will be used to help improve Google Translate