برمجة

كيفية عمل المؤثرات الحركية باستخدام ng-animate

عند عمل موقع او تطبيق نحاول ان نضيف تأُثيرات حركية لابهار المستخدم ولاستمتاعه بالموقع والتأثيرات.

ولكن هي سلاح ذو حدين فيجب عدم اضافتها بكثرة وعند اضافتها لابد ان تتناسق التأثيرات مع بعضها الآخر لعدم تشتييت عين المستخدم.

في هذه التدوينة راح نطبق مثال عملي في كيفية اضافة مؤثرات حركية لصفحتنا المبنية بواسطة Angularjs وراح نستخدم ng-animate.

مقدمة بسيطة عن ng-animate

اكيد اذا كنت مبرمج مواقع انك سمعت او استخدمت مكتبة Animate.css الخفيفة والغنية بالمؤثرات .

ng-animate هي نسخة مخصصة لها لاستخدامها مع  Angularjs.

يمكنك تجربة المؤثرات عن طريق هذا الرابط Demo


ننشأ تطبيق جديد بواسطة angularjs cli

ومن ثم نضيف ng-animate عن طريق npm command

الان تم تحميل المكتبة ويجب علينا اضافة الاوامر اللازمة لتشغيلها.

ملف app.module.ts

يجب استدعاء و اضافة BrowserAnimationsModule

 

الآن تمت اضافة المكتبة للمشروع وباقي التنفيذ.

لاستخدام المكتبة داخل component يجب استدعائها باستخدام هذه الاوامر

نستطيع استدعاء المؤثر بناءً على اسمه ، هنا استخدمنا fadeIn

الآن يجب اضافة أوامر المؤثرات في annotation component مثل:

 

ننتقل الى ملف html نضيف directive الخاص بالتأثير على حسب اسمه ، نضيفه  للتاق الخاص بنا لتحريكه.

على سبيل المثال هنا نستخدم fadeIn

بشكل عام هذه صيغة اضافة التأثير للعنصر   [animationName@]

وكذا تمت تفعيل المؤثرات وتجربتها بشكل مبسط جداً.

تستطيع تشغيل التطبيق عن طريق terminal من داخل مجلد التطبيق وتنفيذ الامر ng serve

الان لو نلاحظ انه فقط عن تحميل الصفحة يتم تفعيله مباشرة. ماذا لو اردنا ان نفعله بناء على حدث معين ؟

نستطيع من خلال انشاء متغير وتعيينه للمؤثر. على سبيل المثال

بعد تنفيذ الكود لن يتم تشغيل المؤثر مباشرة عند تحميل الصفحة ، بل عند الضغط على زر Animate سوف يتم تشغيله

تفاصيل اضافية

يمكنك التعديل على سرعة  تنفيذ المؤثر وتأخير تنفيذه باضافة باراميتير ثالث الى transition

واضافة اوبجكت مكون من timing & delay او اي منها الى params على النحو التالي :

 

 

لتفاصيل أكثر عن transition

https://angular.io/api/animations/transition

 

اترك رد

Back To Top