تحريك تطبيقات AngularJS باستخدام ngAnimate

AngularJS هو إطار عمل JavaScript خارق يجعل إنشاء تطبيقات صفحة واحدة (SPA) أمرًا سهلاً للغاية. علاوة على ذلك ، تأتي AngularJS مع عدد قليل من الوحدات الزاويّة التي يمكن استخدامها لخلق تجربة مستخدم رائعة. سنرى في هذا المنشور كيفية استخدام ngAnimate الشائعة لإضافة انتقالات / حركات الصفحة إلى طرق العرض الزاوي.

يمكن استخدام ngAnimate مع توجيهات مختلفة مثل ngRepeat و ngView و ngInclude و ngIf و ngMessage وما إلى ذلك.

في هذا المنشور سوف نستخدم الرسوم المتحركة مع ngView

نحن هنا نستخدم Brackets IDE من Adobe ، لكن لك الحرية في استخدام الآخرين ، على سبيل المثال ، Sublime Text و WebStorm من JetBrains وما إلى ذلك.

ملحوظة : سنستخدم أيضًا Bootswatch Bootstrap API لإضفاء مظهر جميل على صفحات HTML الخاصة بنا

هيكل المشروع:

يوجد أدناه هيكل المشروع في Brackets IDE

فيما يلي وصف موجز لكل ملف مستخدم في المشروع

Animation.css - ملف CSS الرئيسي حيث نحدد الرسوم المتحركة لصفحتنا

bootstrap.min.css - bootswatch bootstrap لمنحنا العلامات نظرة جميلة

config.js - ملف JavaScript رئيسي حيث نحدد وحدة الزاوية الخاصة بنا جنبًا إلى جنب مع المسارات وأجهزة التحكم

shellPage.html - هذه هي صفحة shell التي سيتم فيها تحميل العروض الأخرى ديناميكيًا

جافا نسخة ضحلة مقابل نسخة عميقة

view1.html ، view2.html ، view3.html - هذه هي العروض الجزئية التي سيتم تحميلها في shellPage

كيف يتم تطبيق الرسوم المتحركة:

يطبق ngAnimate فئات CSS على توجيهات Angular مختلفة اعتمادًا على ما إذا كانوا يدخلون أو يغادرون العرض

.ng- أدخل - تنطبق فئة CSS هذه على التوجيه متى تم تحميلها في الصفحة

.ng- إجازة - تنطبق فئة CSS هذه على التوجيه متى غادر الصفحة

فلنستعرض كل ملف واحدًا تلو الآخر

shellPage.html

يقوم shellPage بتحميل الموارد المطلوبة ، ويطبق ng-app على الجسم ويضيف ng-view لإدخال العروض ديناميكيًا.

config.js

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

تحتوي الوحدة النمطية الانتقالية على تبعيتين: ngAnimate و ngRoute

var transferApp = angular.module ('transferApp'، ['ngAnimate'، 'ngRoute']) transferApp.config (الوظيفة ($ routeProvider) {$ routeProvider .when ('/'، {templateUrl: 'جزئي / view1.html' ، وحدة التحكم: 'view1Controller'}). عند ('/ view2' ، {templateUrl: 'جزئي / view2.html' ، وحدة التحكم: 'view2Controller'}). عند ('/ view3' ، {templateUrl: 'جزئي / view3. html '، controller:' view3Controller '})}) transferApp.controller (' view1Controller '، function ($ range) {$ range.cssClass =' ​​view1 '}) moveApp.controller (' view2Controller '، function ($ range) { $ domain.cssClass = 'view2'}) transferApp.controller ('view3Controller' ، الوظيفة (نطاق $) {$ framework.cssClass = 'view3'})

لقد حددنا ثلاث طرق عرض جزئية (view1 و view2 و view3) والتي سيتم إدخالها في صفحة shell اعتمادًا على عنوان URL. تحدد وحدات التحكم المعنية سمة cssClass ، وهي اسم فئة CSS ، والتي سيتم تطبيقها على طريقة العرض ng. سنحدد الرسوم المتحركة الخاصة بنا في فئات CSS التي ستحمّل كل صفحة برسوم متحركة مختلفة.

الصفحات الجزئية view1.html ، view2.html ، view3.html

لا يوجد الكثير في الصفحات الجزئية ، فقط بعض النصوص والارتباط بآراء أخرى

view1.html

هذه هي طريقة العرض 1
  رأي 2   رأي 3 

view2.html

هذا هو العرض 2
  عرض 1   رأي 3 

view3.html

هذا هو العرض 3
  عرض 1   رأي 2 

تذكر أن ملفات HTML الثلاثة هذه عبارة عن صفحات جزئية سيتم إدخالها في shellPage.html وفقًا لعنوان URL الذي حددناه في ملف config.js

تحديد الأنماط والرسوم المتحركة:

دعونا نضع بعض الحياة في آرائنا من خلال تطبيق CSS عليها

برنامج mysql workbench التعليمي للمبتدئين

.view {bottom: 0 padding-top: 200px position: definitely text-align: center top: 0 width: 100٪}. اعرض {margin-top: 50px} .view h1 {font-size: 60px} #heading { اللون: # 333 الموضع: محاذاة النص المطلقة: أعلى الوسط: العرض 50 بكسل: 100٪} / * ألوان الخلفية والنص لصفحات العرض الجزئي (عرض 1 ، عرض 2 ، عرض 3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149، 95، 40، 0.91)}

لإجراء انتقال نظيف بين طرق العرض المختلفة ، سنقوم بتعيين خاصية CSS z-index

.view.ng- اترك {z-index: 9999} .view.ng-enter {z-index: 8888}

حان الوقت الآن لتحديد الرسوم المتحركة لدينا

تحريك الشريحة اليسرى

/ * حرك للخارج لليسار * /keyframes slideOutLeft {to {transform: translateX (-100٪)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100٪)}} @ -webkit-keyframes slideOutLeft {إلى {-webkit-transform: translateX (-100٪)}}

توسيع نطاق الرسوم المتحركة

/ * scale up * /keyframes scaleUp {من {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {من {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- مقياس الإطارات الرئيسية {من {opacity: 0.3 -webkit-transform: scale (0.8)}}

انزلاق للداخل من الرسوم المتحركة الصحيحة

/ * الانزلاق من اليمين * /keyframes slideInRight {من {transform: translateX (100٪)} إلى {transform: translateX (0)}} @ -moz-keyframes slideInRight {from {-moz-transform: translateX (100 ٪)} إلى {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {from {-webkit-transform: translateX (100٪)} to {-webkit-transform: translateX (0)}}

انزلاق للداخل من الرسوم المتحركة السفلية

/ * الانزلاق من الأسفل * /keyframes slideInUp {من {transform: translateY (100٪)} إلى {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 ٪)} إلى {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {من {-webkit-transform: translateY (100٪)} to {-webkit-transform: translateY (0)}}

تدوير وسقوط الرسوم المتحركة

/ * تدوير وإسقاط * / @ -webkit-keyframes rotateFall {0٪ {-webkit-transform: rotateZ (0deg)} 20٪ {-webkit-transform: rotateZ (10deg) -webkit-animation-tim-function: easy- out} 40٪ {-webkit-transform: rotateZ (17deg)} 60٪ {-webkit-transform: rotateZ (16deg)} 100٪ {-webkit-transform: translateY (100٪) rotateZ (17deg)}} @ -moz -keyframes rotateFall {0٪ {-moz-transform: rotateZ (0deg)} 20٪ {-moz-transform: rotateZ (10deg) -moz-animation-tim-function: eas-out} 40٪ {-moz-transform: rotateZ (17deg)} 60٪ {-moz-transform: rotateZ (16deg)} 100٪ {-moz-transform: translateY (100٪) rotateZ (17deg)}}keyframes rotateFall {0٪ {transform: rotateZ (0deg) } 20٪ {transform: rotateZ (10deg) animation-tim-function: easy-out} 40٪ {transform: rotateZ (17deg)} 60٪ {transform: rotateZ (16deg)} 100٪ {transform: translateY (100٪) rotateZ (17 درجة)}}

تدوير الرسوم المتحركة من صحيفة

/ * تدوير الجريدة * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000 بكسل) rotateZ (360deg) عتامة: 0}}keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}

تطبيق الرسوم المتحركة:

حان الوقت لتطبيق الرسوم المتحركة التي حددناها من قبل

عرض 1 صور متحركة

/ * عرض 1 رسوم متحركة لمغادرة الصفحة وإدخال * / .view1.ng-Leave {-webkit-animation: slideOutLeft 0.5s كلاهما سهل في -moz-animé: slideOutLeft 0.5s كلاهما سهل في الرسوم المتحركة: slideOutLeft 0.5s كلاهما سهل -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s كلاهما سهل في -moz-animé: scaleUp 0.5s كلاً من الرسوم المتحركة السهلة: scaleUp 0.5s كلاهما سهل الدخول}

مشاهدة 2 صور متحركة

/ * عرض حركتين متحركتين لمغادرة الصفحة وأدخل * / .view2.ng-Leave {-webkit-transform-origin: 0٪ 0٪ -webkit-animation: rotateFall 1s both easy-in -moz-transform-origin: 0٪ 0٪ -moz-animation: rotateFall 1s كلاهما سهل التحويل-أصل: 0٪ 0٪ رسوم متحركة: rotateFall 1s كلاهما سهل} .view2.ng-enter {-webkit-animation: slideInRight 0.5s كلاهما سهل - moz-animation: slideInRight 0.5s كلاً من الرسوم المتحركة السهلة: slideInRight 0.5s كلاهما سهل في}

عرض 3 صور متحركة

ما هو برنامج الطباعة في جافا

/ * عرض 3 رسوم متحركة لمغادرة الصفحة وإدخال * / .view3.ng-Leave {-webkit-transform-origin: 50٪ 50٪ -webkit-animation: rotateOutNewspaper .5s كلاهما سهل في-موز-تحويل-أصل: 50 ٪ 50٪ -moz-animation: rotateOutNewspaper .5s كلاهما سهل في تحويل الأصل: 50٪ 50٪ رسوم متحركة: rotateOutNewspaper .5s كلاهما سهل للداخل} .view3.ng-enter {-webkit-animation: slideInUp 0.5s كلاهما سهل -in -moz-animation: slideInUp 0.5s كلاً من الرسوم المتحركة السهلة: slideInUp 0.5s كلاهما سهل للداخل}

لقد انتهينا من كل التغييرات. حان الوقت الآن لتشغيل التطبيق

تشغيل التطبيق

عند تشغيل التطبيق ، ستظهر لك الصفحة التالية:

انقر على الروابط وسترى الرسوم المتحركة قيد التشغيل ، عند الدخول والخروج من الصفحات الجزئية.

هناك العديد من الرسوم المتحركة الأخرى التي يمكن استخدامها. أيضًا ، يمكن أن توجد هنا مجموعة هائلة من التأثيرات المحتملة: http://tympanus.net/Development/PageTransitions/

قم بتنزيل الكود وجربه بنفسك

[buttonleads form_title = ”Download Code” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download؟ media_file_id = 80450196 course_id = 283 button_text = 'تنزيل الكود']

آمل أن تكون قد أحببت الرسوم المتحركة أعلاه مع مدونة ngAnimate. إذا كنت ترغب في التعمق في Angular JS ، فإنني أوصيك لماذا لا تلقي نظرة على صفحة الدورة. سيجعلك تدريب Angular JS Certification في Edureka خبيرًا في Angular JS من خلال الجلسات التي يقودها المدرب المباشر والتدريب العملي باستخدام حالات الاستخدام الواقعية.

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات وسنعاود الاتصال بك.

المنشورات ذات الصلة:

تحليل ملفات XML باستخدام محلل SAX