Animasi Aplikasi AngularJS dengan ngAnimate



Blog ini akan menerangkan bagaimana menggunakan ngAnimate yang popular untuk menambahkan peralihan halaman / animasi ke paparan sudut iaitu bagaimana membuat animasi menggunakan ngAnimate

AngularJS adalah kerangka JavaScript superheroik yang menjadikan pembuatan Aplikasi Halaman Tunggal (SPA) sangat mudah. Selain itu AngularJS dilengkapi dengan segelintir modul sudut yang boleh digunakan untuk mewujudkan pengalaman pengguna yang luar biasa. Dalam posting ini kita akan melihat bagaimana menggunakan ngAnimate yang popular untuk menambahkan peralihan halaman / animasi ke pandangan sudut.

ngAnimate dapat digunakan dengan pelbagai arahan seperti ngRepeat, ngView, ngInclude, ngIf, ngMessage dll.





Dalam posting ini kita akan menggunakan animasi dengan ngView

Di sini kami menggunakan Kurung IDE dari Adobe, tetapi anda bebas menggunakan yang lain, misalnya, Teks Sublime, WebStorm dari JetBrains dll.



Catatan : Kami juga akan menggunakan Bootswap Bootstrap API untuk memberikan penampilan cantik pada halaman HTML kami

stl urutkan c ++

Struktur Projek:

Berikut adalah struktur projek dalam kurungan IDE



ngAnimate-angularjs-project-structure

Berikut adalah penerangan ringkas setiap fail yang digunakan dalam projek

animasi.css - fail CSS utama di mana kita menentukan animasi halaman kami

bootstrap.min.css - bootstrap bootswatch untuk memberi kami menandakan penampilan yang cantik

config.js - fail JavaScript utama di mana kita menentukan modul sudut kami bersama dengan laluan dan pengawal

shellPage.html - Ini adalah halaman shell di mana paparan lain akan dimuat secara dinamik

view1.html, view2.html, view3.html - Ini adalah paparan separa yang akan dimuat ke dalam shellPage

Bagaimana animasi digunakan:

ngAnimate menerapkan kelas CSS untuk arahan Sudut yang berbeza bergantung pada sama ada mereka memasuki atau meninggalkan pandangan

.ng-masukkan - Kelas CSS ini berlaku berdasarkan arahan setiap kali dimuat di halaman

.ng-cuti - Kelas CSS ini berlaku berdasarkan arahan setiap kali meninggalkan halaman

Mari teliti setiap fail satu persatu

shellPage.html

shellPage memuat sumber daya yang diperlukan, menerapkan ng-aplikasi ke badan dan menambahkan ng-view untuk menyuntikkan pandangan secara dinamis.

  

config.js

Dalam fail konfigurasi, kami menentukan modul sudut kami bersama dengan laluan dan pengawal.

Mod peralihan App mempunyai dua kebergantungan: ngAnimate dan ngRoute

var transactionApp = angular.module ('transienApp', ['ngAnimate', 'ngRoute']) transisiApp.config (fungsi ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , pengawal: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', pengawal: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', controller:' view3Controller '})}) transienApp.controller (' view1Controller ', function ($ lingkup) {$ lingkup.cssClass =' ​​view1 '}) transisiApp.controller (' view2Controller ', fungsi ($ lingkup) { $ lingkup.cssClass = 'view2'}) transisiApp.controller ('view3Controller', fungsi ($ lingkup) {$ lingkup.cssClass = 'view3'})

Kami telah menentukan tiga paparan separa (view1, view2, view3) yang akan disuntikkan ke shellpage bergantung pada URL. Pengawal yang berkenaan menetapkan atribut cssClass, yang merupakan nama kelas CSS, yang akan diterapkan pada tampilan ng. Kami akan menentukan animasi kami dalam kelas CSS ini yang akan memuatkan setiap halaman dengan animasi yang berbeza.

Sebahagian halaman view1.html, view2.html, view3.html

Tidak banyak yang terdapat di halaman separa, hanya beberapa teks dan pautan ke pandangan lain

paparan1.html

Ini adalah Paparan 1

Pandangan 2 Pandangan 3

pandangan2.html

Ini adalah Paparan 2

Pandangan 1 Pandangan 3

paparan3.html

Ini adalah Paparan 3

Pandangan 1 Pandangan 2

Ingat bahawa ketiga-tiga fail HTML ini adalah halaman separa yang akan disuntikkan ke shellPage.html sesuai dengan URL yang telah kita tentukan dalam file config.js

Menentukan Gaya dan Animasi:

Mari kita luangkan sedikit pandangan dengan menerapkan CSS padanya

kebaikan dan keburukan penggodaman
.view {bawah: 0 padding-top: 200px position: absolute text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { warna: # 333 kedudukan: keselarasan teks mutlak: bahagian atas tengah: lebar 50 piksel: 100%} / * Warna latar dan teks untuk halaman paparan separa (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {latar belakang: # bef2de warna: # 00907c} .view2 {latar belakang: # D4D0EA warna: # 55316f} .view3 {latar belakang: # FFCBA4 warna: rgba (149, 95, 40, 0.91)}

Untuk membuat peralihan yang bersih antara pandangan yang berbeza, kami akan menetapkan harta indeks zs CSS

.view.ng-meninggalkan {z-index: 9999} .view.ng-enter {z-index: 8888}

Sekarang masanya untuk menentukan animasi kita

Animasi Luncur Kiri

/ * luncurkan ke kiri * / @keyframes slideOutLeft {ke {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {ke {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {ke {-webkit-transform: translateX (-100%)}}

Meningkatkan Animasi

/ * naikkan skala * / @keyframes scaleUp {from {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {dari {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- keyframes scaleUp {dari {opacity: 0.3 -webkit-transform: scale (0.8)}}

Luncur Masuk dari Animasi Kanan

/ * slaid masuk dari kanan * / @keyframes slideInRight {dari {transform: translateX (100%)} ke {transform: translateX (0)}} @ -moz-keyframes slideInRight {dari {-moz-transform: translateX (100 %)} ke {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {dari {-webkit-transform: translateX (100%)} ke {-webkit-transform: translateX (0)}}

Luncur Masuk dari Animasi Bawah

/ * slaid masuk dari bawah * / @keyframes slideInUp {dari {transform: translateY (100%)} ke {transform: translateY (0)}} @ -moz-keyframes slideInUp {dari {-moz-transform: translateY (100 %)} ke {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {dari {-webkit-transform: translateY (100%)} ke {-webkit-transform: translateY (0)}}

Putar dan Jatuh Animasi

/ * putar dan jatuh * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: easy- keluar} 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-timing-function: easy-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-timing-function: easy-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) putarZ (17deg)}}

Putar Animasi Surat Khabar

/ * putar keluar surat khabar * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {ke {-moz-transform: translateZ (-3000px) opacity rotateZ (360deg): 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}

Mengamalkan Animasi:

Sudah tiba masanya untuk menerapkan animasi yang telah kita tentukan sebelumnya

Lihat 1 Animasi

/ * Lihat 1 animasi untuk cuti halaman dan masukkan * / .view1.ng-Leave {-webkit-animation: slideOutLeft 0.5s kedua-duanya kemudahan-dalam-moz-animasi: slideOutLeft 0.5s kedua-dua animasi kemudahan: slideOutLeft 0.5s kedua-duanya mudah -in} .view1.ng-enter {-webkit-animation: skalaUp 0.5s kedua-duanya-dalam -moz-animasi: skalaUp 0.5s kedua-dua animasi kemudahan: skalaUp 0.5s kedua-dua kemudahan-dalam}

Lihat 2 Animasi

/ * Lihat 2 animasi untuk cuti halaman dan masukkan * / .view2.ng-Leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s kedua-dua kemudahan -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s keduanya kemudahan dalam transform-origin: 0% 0% animation: rotateFall 1s keduanya easy-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s kedua-duanya kemudahan - moz-animation: slideInRight 0.5s kedua-duanya animasi kemudahan: slideInRight 0.5s kedua-duanya kemudahan}

Lihat 3 Animasi

/ * Lihat 3 animasi untuk cuti halaman dan masukkan * / .view3.ng-Leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s kedua-dua kemudahan -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s keduanya kemudahan dalam transform-origin: 50% 50% animation: rotateOutNewspaper .5s keduanya kemudahan-dalam} .view3.ng-enter {-webkit-animation: slideInUp 0.5s kedua-duanya mudah -in -moz-animation: slideInUp 0.5s kedua-duanya animasi kemudahan: slideInUp 0.5s kedua-duanya kemudahan}

Kami selesai dengan semua perubahan. Sekarang masanya untuk menjalankan aplikasi

Menjalankan Aplikasi

Semasa menjalankan aplikasi, anda akan diberikan halaman di bawah:

Klik pada pautan dan anda akan melihat animasi dimainkan, semasa memasuki dan meninggalkan halaman sebahagian.

Terdapat pelbagai animasi lain yang boleh digunakan. Juga, sekumpulan kesan yang mungkin terdapat di sini: http://tympanus.net/Development/PageTransitions/

Muat turun kod dan cuba sendiri

[buttonleads form_title = 'Download Code' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = 'Muat turun Kod']

hadoop sukar dipelajari

Saya harap anda menyukai Animasi di atas dengan blog ngAnimate. Sekiranya anda ingin menyelami JS Angular, saya akan mengesyorkan kepada anda mengapa anda tidak melihatnya halaman kursus. Latihan Pensijilan JS Angular di Edureka akan menjadikan anda pakar dalam JS Angular melalui sesi bimbingan instruktur langsung dan latihan langsung menggunakan kes penggunaan kehidupan sebenar.

Ada soalan untuk kami? Sila sebutkan di bahagian komen dan kami akan menghubungi anda.

Catatan berkaitan:

Menghuraikan fail XML menggunakan SAX Parser