NgAnimate உடன் AngularJS பயன்பாடுகளை அனிமேஷன் செய்தல்



இந்த வலைப்பதிவு கோணக் காட்சிகளில் பக்க மாற்றங்கள் / அனிமேஷன்களைச் சேர்க்க பிரபலமான ngAnimate ஐ எவ்வாறு பயன்படுத்துவது என்பதை விளக்குகிறது, அதாவது ngAnimate ஐப் பயன்படுத்தி அனிமேஷனை எவ்வாறு உருவாக்குவது?

AngularJS என்பது ஒரு சூப்பர் ஹீரோ ஜாவாஸ்கிரிப்ட் கட்டமைப்பாகும், இது ஒற்றை பக்க பயன்பாடுகளை (SPA) உருவாக்குவது மிகவும் எளிதானது. அந்த AngularJS க்கு மேல் ஒரு சில பயனர் அனுபவத்தை உருவாக்கப் பயன்படும் ஒரு சில கோண தொகுதிகள் உள்ளன. இந்த இடுகையில், கோணக் காட்சிகளில் பக்க மாற்றங்கள் / அனிமேஷன்களைச் சேர்க்க பிரபலமான ngAnimate ஐ எவ்வாறு பயன்படுத்துவது என்பதைப் பார்க்கப்போகிறோம்.

ngAnimate ஐ ngRepeat, ngView, ngInclude, ngIf, ngMessage போன்ற பல்வேறு வழிமுறைகளுடன் பயன்படுத்தலாம்.





இந்த இடுகையில் நாம் ngView உடன் அனிமேஷன்களைப் பயன்படுத்துவோம்

இங்கே நாங்கள் அடோப்பிலிருந்து அடைப்புக்குறிகள் ஐடிஇயைப் பயன்படுத்துகிறோம், ஆனால் நீங்கள் மற்றவர்களைப் பயன்படுத்த இலவசம், எடுத்துக்காட்டாக, கம்பீரமான உரை, ஜெட் ப்ரைன்களிலிருந்து வெப்ஸ்டோர்ம் போன்றவை.



குறிப்பு : எங்கள் HTML பக்கங்களுக்கு அழகான தோற்றத்தை அளிக்க பூட்ஸ்வாட்ச் பூட்ஸ்டார்ப் API ஐயும் பயன்படுத்துவோம்

ஜாவாவில் பிட்வைஸ் ஆபரேட்டர்களை எவ்வாறு பயன்படுத்துவது

திட்ட அமைப்பு:

அடைப்புக்குறிகள் IDE இல் உள்ள திட்ட அமைப்பு கீழே உள்ளது



ngAnimate-angularjs-project-structure

திட்டத்தில் பயன்படுத்தப்படும் ஒவ்வொரு கோப்பின் குறுகிய விளக்கமும் இங்கே

animation.css - எங்கள் பக்க அனிமேஷன்களை வரையறுக்கும் முக்கிய CSS கோப்பு

bootstrap.min.css - எங்கள் கொடுப்பதற்கு பூட்ஸ்வாட்ச் பூட்ஸ்ட்ராப் ஒரு அழகான தோற்றத்தைக் குறிக்கிறது

config.js - வழிகள் மற்றும் கட்டுப்படுத்திகளுடன் எங்கள் கோண தொகுதியை வரையறுக்கும் முக்கிய ஜாவாஸ்கிரிப்ட் கோப்பு

shellPage.html - இது ஷெல் பக்கமாகும், இதில் மற்ற காட்சிகள் மாறும் வகையில் ஏற்றப்படும்

view1.html, view2.html, view3.html - இவை ஷெல் பேஜில் ஏற்றப்படும் பகுதி காட்சிகள்

அனிமேஷன்கள் எவ்வாறு பயன்படுத்தப்படுகின்றன:

ngAnimate CSS வகுப்புகளை வெவ்வேறு கோண வழிமுறைகளுக்கு பொருந்தும், அவை பார்வையில் நுழைகிறதா அல்லது வெளியேறுகிறதா என்பதைப் பொறுத்து

.ng-enter - இந்த CSS வகுப்பு பக்கத்தில் ஏற்றப்படும் போதெல்லாம் உத்தரவுக்கு பொருந்தும்

.ng- விடுப்பு - இந்த CSS வகுப்பு பக்கத்தை விட்டு வெளியேறும்போதெல்லாம் உத்தரவுக்கு பொருந்தும்

ஒவ்வொரு கோப்பையும் ஒவ்வொன்றாகப் பார்ப்போம்

shellPage.html

shellPage தேவையான ஆதாரங்களை ஏற்றுகிறது, ng-app ஐ உடலுக்குப் பயன்படுத்துகிறது மற்றும் காட்சிகளை மாறும் வகையில் செலுத்த ng-view ஐ சேர்க்கிறது.

  

config.js

கட்டமைப்பு கோப்பில், வழிகள் மற்றும் கட்டுப்படுத்திகளுடன் எங்கள் கோண தொகுதியை வரையறுக்கிறோம்.

தொகுதி மாற்றம்ஆப் இரண்டு சார்புகளைக் கொண்டுள்ளது: ngAnimate மற்றும் ngRoute

var TransitionApp = angular.module ('transApp', ['ngAnimate', 'ngRoute']) transitionApp.config (function ($ routeProvider) {$ routeProvider. , கட்டுப்படுத்தி: 'view1Controller'}) .எப்போது ('/ view2', {templateUrl: 'partials / view2.html', கட்டுப்படுத்தி: 'view2Controller'}) .எப்போது ('/ view3', {templateUrl: 'partials / view3. hm $ scope.cssClass = 'view2'}) transApp.controller ('view3Controller', function ($ scope) {$ scope.cssClass = 'view3'})

நாங்கள் மூன்று பகுதி பார்வைகளை (வியூ 1, வியூ 2, வியூ 3) வரையறுத்துள்ளோம், அவை URL ஐப் பொறுத்து ஷெல்பேஜில் செலுத்தப்படும். மரியாதைக்குரிய கட்டுப்பாட்டாளர்கள் ஒரு CSS கிளாஸ் பண்புக்கூறு அமைக்கிறது, இது CSS வகுப்பின் பெயர், இது ng-view க்கு பயன்படுத்தப்படும். இந்த CSS வகுப்புகளில் எங்கள் அனிமேஷன்களை வரையறுப்போம், அவை ஒவ்வொரு பக்கத்தையும் வெவ்வேறு அனிமேஷன்களுடன் ஏற்றும்.

பகுதி பக்கங்கள் view1.html, view2.html, view3.html

பகுதி பக்கங்களில் அதிகம் எதுவும் இல்லை, சில உரை மற்றும் பிற பார்வைகளுக்கான இணைப்பு

view1.html

இது பார்வை 1

பார்வை 2 பார்வை 3

view2.html

இது பார்வை 2

பார்வை 1 பார்வை 3

view3.html

இது பார்வை 3

பார்வை 1 பார்வை 2

இந்த மூன்று HTML கோப்புகள் பகுதி பக்கங்கள் என்பதை நினைவில் கொள்ளுங்கள், அவை config.js கோப்பில் நாங்கள் வரையறுத்துள்ள URL இன் படி shellPage.html இல் செலுத்தப்படும்.

பாங்குகள் மற்றும் அனிமேஷன்களை வரையறுத்தல்:

CSS ஐப் பயன்படுத்துவதன் மூலம் சில பார்வைகளை நம் பார்வையில் வைப்போம்

. பார்வை {கீழே: 0 திணிப்பு-மேல்: 200px நிலை: முழுமையான உரை-சீரமை: மைய மேல்: 0 அகலம்: 100%} .ஒரு {விளிம்பு-மேல்: 50px}. பார்வை h1 {எழுத்துரு-அளவு: 60px} # தலைப்பு { வண்ணம்: # 333 நிலை: முழுமையான உரை-சீரமை: மைய மேல்: 50px அகலம்: 100%} / * பகுதி பார்வை பக்கங்களுக்கான பின்னணி மற்றும் உரை வண்ணங்கள் (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}

வெவ்வேறு பார்வைகளுக்கு இடையில் ஒரு சுத்தமான மாற்றத்தை உருவாக்க, நாங்கள் CSS z- குறியீட்டு சொத்தை அமைப்போம்

.view.ng-leave {z- குறியீட்டு: 9999} .view.ng-enter {z- குறியீட்டு: 8888}

இப்போது எங்கள் அனிமேஷன்களை வரையறுக்க வேண்டிய நேரம் வந்துவிட்டது

இடது அனிமேஷனை ஸ்லைடு

/ * இடதுபுறமாக ஸ்லைடு செய்யவும் slideOutLeft {towe -webkit-உருமாற்றம்: மொழிபெயர்ப்பு X (-100%)}}

ஸ்கேல் அப் அனிமேஷன்

/ * ஸ்கேல் அப் * / @ கீஃப்ரேம்ஸ் ஸ்கேல்அப் {{ஒளிபுகாநிலையிலிருந்து: 0.3 உருமாற்றம்: அளவு (0.8)}} mo -மோஸ்-கீஃப்ரேம்கள் ஸ்கேல்அப் {{ஒளிபுகாநிலையிலிருந்து: 0.3 -மோஸ்-உருமாற்றம்: அளவு (0.8)}} we -வெப்கிட்- கீஃப்ரேம்கள் ஸ்கேல்அப் {இருந்து {ஒளிபுகாநிலை: 0.3 -வெப்கிட்-உருமாற்றம்: அளவு (0.8)}}

வலது அனிமேஷனில் இருந்து ஸ்லைடு

/ * வலதுபுறத்தில் இருந்து ஸ்லைடு * / @ கீஃப்ரேம்கள் ஸ்லைடுஇன்ரைட் {இலிருந்து {உருமாற்றம்: மொழிபெயர்ப்பு எக்ஸ் (100%)} முதல் {உருமாற்றம்: மொழிபெயர்ப்பு எக்ஸ் (0) %)} முதல் mo -மோஸ்-உருமாற்றம்: மொழிபெயர்ப்பு எக்ஸ் (0) we we -வெப்கிட்-கீஃப்ரேம்கள் ஸ்லைடுஇன்ரைட் {-வெப்கிட்-உருமாற்றத்திலிருந்து: மொழிபெயர்ப்பு எக்ஸ் (100%)} முதல் we -வெப்கிட்-உருமாற்றம்: மொழிபெயர்ப்பு எக்ஸ் (0)}}

கீழே அனிமேஷனில் இருந்து ஸ்லைடு

/ * கீழே இருந்து ஸ்லைடு * / @keyframes slideInUp {இலிருந்து {உருமாற்றம்: மொழிபெயர்ப்பு Y (100%)} முதல் {உருமாற்றம்: மொழிபெயர்ப்பு Y (0)}} mo -மோஸ்-கீஃப்ரேம்கள் ஸ்லைடுஇனப் {-moz- உருமாற்றத்திலிருந்து: மொழிபெயர்ப்பு Y (100 %)} முதல் mo -moz- உருமாற்றம்: மொழிபெயர்ப்பு Y (0) we we -வெப்கிட்-கீஃப்ரேம்கள் ஸ்லைடுஇன்அப் {-வெப்கிட்-உருமாற்றத்திலிருந்து: மொழிபெயர்ப்பு Y (100%)} முதல் we -வெப்கிட்-உருமாற்றம்: மொழிபெயர்ப்பு Y (0)}}

அனிமேஷனை சுழற்று மற்றும் வீழ்ச்சி

/ * சுழற்று மற்றும் வீழ்ச்சி * / @ -வெப்கிட்-கீஃப்ரேம்கள் சுழலும் வீழ்ச்சி {0% {-வெப்கிட்-உருமாற்றம்: rotateZ (0deg)} 20% {-வெப்கிட்-உருமாற்றம்: rotateZ (10deg) -வெப்கிட்-அனிமேஷன்-நேர-செயல்பாடு: எளிதானது- out} 40% {-வெப்கிட்-உருமாற்றம்: rotateZ (17deg)} 60% {-வெப்கிட்-உருமாற்றம்: rotateZ (16deg)} 100% {-வெப்கிட்-உருமாற்றம்: மொழிபெயர்ப்பு Y (100%) rotateZ (17deg)}} mo -moz -keyframes rotateFall {0% {-moz-உருமாற்றம்: rotateZ (0deg)} 20% {-moz-உருமாற்றம்: rotateZ (10deg) -moz-animation-time-function: easy-out} 40% {-moz-உருமாற்றம்: rotateZ (17deg)} 60% {-moz-உருமாற்றம்: rotateZ (16deg)} 100% {-moz-உருமாற்றம்: மொழிபெயர்ப்பு Y (100%) rotateZ (17deg)}} @keyframes rotateFall {0% {உருமாற்றம்: rotateZ (0deg) } 20% {உருமாற்றம்: rotateZ (10deg) அனிமேஷன்-நேர-செயல்பாடு: எளிதில் வெளியேறு} 40% {உருமாற்றம்: rotateZ (17deg)} 60% {உருமாற்றம்: rotateZ (16deg)} 100% {உருமாற்றம்: மொழிபெயர்ப்பு Y (100%) rotateZ (17deg)}}

செய்தித்தாள் அனிமேஷனை சுழற்று

/ * செய்தித்தாளைச் சுழற்று (-3000px) rotateZ (360deg) ஒளிபுகாநிலை: 0}} @keyframes rotateOutNewspaper {to {உருமாற்றம்: translateZ (-3000px) rotateZ (360deg) ஒளிபுகாநிலை: 0}}

அனிமேஷன்களைப் பயன்படுத்துதல்:

நாங்கள் முன்பு வரையறுத்துள்ள அனிமேஷன்களைப் பயன்படுத்துவதற்கான நேரம் இது

1 அனிமேஷன்களைக் காண்க

/ * பக்க விடுப்புக்கு 1 அனிமேஷன்களைக் காணவும் மற்றும் உள்ளிடவும் * / .view1.ng-leave {-வெப்கிட்-அனிமேஷன்: slideOutLeft 0.5s இரண்டுமே எளிதான -moz-animation: slideOutLeft 0.5s இரண்டும் எளிதான அனிமேஷன்: slideOutLeft 0.5s இரண்டும் எளிதானது -இன்.

2 அனிமேஷன்களைக் காண்க

. 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 {-வெப்கிட்-உருமாற்றம்-தோற்றம்: 50% 50% -வெப்கிட்-அனிமேஷன்: rotateOutNewspaper .5s இரண்டும் எளிதானது -moz- உருமாற்றம்-தோற்றம்: 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 இரண்டும் எளிதான}

எல்லா மாற்றங்களுடனும் நாங்கள் செய்யப்படுகிறோம். இப்போது பயன்பாட்டை இயக்க நேரம் வந்துவிட்டது

பயன்பாட்டை இயக்குகிறது

c ++ இல் பெயர்வெளி என்றால் என்ன

பயன்பாட்டை இயக்கும் போது, ​​உங்களுக்கு கீழேயுள்ள பக்கம் வழங்கப்படும்:

இணைப்புகளைக் கிளிக் செய்க, பகுதி பக்கங்களை உள்ளிட்டு வெளியேறும்போது அனிமேஷன்களை நீங்கள் காண்பீர்கள்.

வேறு பல அனிமேஷன்கள் பயன்படுத்தப்படலாம். மேலும், சாத்தியமான விளைவுகளின் பெரும் தொகுப்பு இங்கே இருக்கலாம்: http://tympanus.net/Development/PageTransitions/

குறியீட்டைப் பதிவிறக்கி அதை நீங்களே முயற்சிக்கவும்

[பொத்தான்கள்

மேலே உள்ள அனிமேஷனை ngAnimate வலைப்பதிவில் நீங்கள் விரும்பியிருப்பீர்கள் என்று நம்புகிறேன். நீங்கள் கோண JS இல் ஆழமாக டைவ் செய்ய விரும்பினால், எங்களைப் பற்றி ஏன் பார்க்கக்கூடாது என்று நான் உங்களுக்கு பரிந்துரைக்கிறேன் நிச்சயமாக பக்கம். எடுரேகாவில் உள்ள கோண JS சான்றிதழ் பயிற்சி, நேரடி பயிற்றுவிப்பாளர் தலைமையிலான அமர்வுகள் மற்றும் நிஜ வாழ்க்கை பயன்பாட்டு நிகழ்வுகளைப் பயன்படுத்தி கைநிறைய பயிற்சி மூலம் கோண JS இல் நிபுணராக உங்களை உருவாக்கும்.

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.

தொடர்புடைய இடுகைகள்:

SAX பாகுபடுத்தியைப் பயன்படுத்தி எக்ஸ்எம்எல் கோப்புகளை பாகுபடுத்துதல்