Animasi Angular: Cara Menggunakan Animasi Sudut 13 – Codewithaden

Animasi, secara umum, memberikan ilusi gerak: elemen html mengubah gaya dari waktu ke waktu.

Apa itu animasi

Animasi didefinisikan sebagai transisi dari awal ke keadaan akhir. Ini adalah bagian integral dari aplikasi web modern. Angular memberdayakan kita untuk membuat animasi yang memberikan pertunjukan asli serupa dengan animasi CSS.

Animasi sudut

Animasi dalam Angular melibatkan banyak gaya transformasi lembur. Ini termasuk elemen yang bergerak, perubahan warna, komponen tumbuh atau menyusut, memudar, atau meluncur dari halaman. Perubahan ini dapat terjadi secara bersamaan atau berurutan. Anda dapat mengontrol waktu setiap transformasi.

Animasi sudut dapat meningkatkan aplikasi dan pengalaman pengguna Anda dalam beberapa cara:

  • Tanpa menggunakan animasi, transisi halaman web bisa tampak tiba -tiba dan menggelegar.

  • Gerak secara drastis meningkatkan pengalaman pengguna, jadi animasi memberi pengguna kesempatan untuk mendeteksi respons aplikasi terhadap tindakan mereka.

  • Animasi yang baik secara intuitif memanggil perhatian pengguna ke tempat yang dibutuhkan.

Memahami Status Animasi Angular

Animasi dalam Angular melibatkan transisi dari satu keadaan elemen ke keadaan lain. Angular mendefinisikan tiga keadaan berbeda untuk suatu komponen:

Keadaan batal

Status void mewakili keadaan elemen yang bukan bagian dari DOM. Keadaan ini terjadi ketika elemen dibuat tetapi belum ditempatkan di DOM atau dihapus dari DOM.

Negara Bagian Wildcard

Wildcard juga dikenal sebagai keadaan default elemen. Gaya yang ditentukan untuk keadaan ini berlaku untuk komponen terlepas dari keadaan animasi saat ini. Untuk menentukan keadaan ini dalam kode kami, kami menggunakan simbol.

Keadaan khusus

Negara kustom perlu didefinisikan secara eksplisit dalam kode. Untuk menentukan keadaan kustom, kami dapat menggunakan nama khusus pilihan kami.

Waktu transisi animasi sudut

Untuk menampilkan transisi animasi dalam sudut dari satu keadaan ke negara lain, kami mendefinisikan waktu transisi animasi dalam aplikasi kami.

Angular memberikan sifat tiga-waktu, yaitu sebagai berikut.

Durasi

Durasi dalam Angular menjelaskan waktu animasi kami untuk menyelesaikan (keadaan awal) untuk menyelesaikan (keadaan akhir).

Kita dapat menentukan durasi animasi sudut dalam tiga cara berikut.

  1. Menggunakan nilai integer untuk menggambarkan waktu dalam milidetik. Mis., 1000.
  2. Menggunakan nilai string untuk menggambarkan waktu dalam milidetik. Mis.: ‘1000ms’.
  3. Menggunakan nilai string untuk menggambarkan waktu dalam detik. Mis.: ‘1s’.

Menunda

Penundaan sudut mewakili durasi antara pemicu animasi dan awal transisi yang sebenarnya. Properti penundaan mengikuti sintaks yang sama dengan properti durasi.

Untuk menentukan keterlambatan sudut, tambahkan nilai tunda setelah nilai durasi dalam format string: ‘ Durasi penundaan ‘ . Penundaan adalah properti opsional.

Pelonggaran

Properti pelonggaran dalam Angular mewakili bagaimana animasi berakselerasi atau melambat selama eksekusi.

Untuk mendefinisikan pelonggaran dalam sudut, tambahkan variabel ketiga dalam string setelah durasi dan penundaan sifat.

Jika nilai keterlambatan tidak ada dalam fungsi, pelonggaran akan menjadi nilai kedua. Pelonggaran juga merupakan properti opsional.

Prasyarat

Install Kode Studio Visual dan CLI Angular

Jika Anda seorang pemula dalam sudut, maka lihat salah satu artikel saya sebelumnya, Tutorial sudut , untuk mengatur lingkungan pengembangan sudut di mesin Anda.

Memulai dengan animasi sudut

Untuk memulai dengan menambahkan animasi sudut dalam proyek Anda, impor modul spesifik animasi bersama dengan fungsionalitas sudut standar.

Langkah 1: Membuat Aplikasi Angular

Untuk membuat proyek sudut, ketik perintah berikut.

ng new anganimation 

Juga, instal Bootstrap 4 menggunakan perintah berikut.

npm install bootstrap 

Buka file Angular.json dan tambahkan jalur ke kerangka kerja Bootstrap CSS.

"styles": [
  "src/styles.css",
   "./node_modules/bootstrap/dist/css/bootstrap.min.css"
], 

Sekarang, masuk ke dalam folder dan buka folder dalam kode VS menggunakan perintah berikut.

code . 

Langkah 2: Mengaktifkan Modul Animasi

Impor BrowseranimationSmodule Itu memperkenalkan kemampuan animasi ke dalam modul aplikasi root sudut Anda.

Tulis kode berikut di dalam app.module.ts mengajukan.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

Langkah 3: Mengimpor Fungsi Animasi

Jika Anda berencana untuk menggunakan fungsi animasi tertentu dalam file komponen, impor fungsi tersebut dari @Angular/Animasi. Dalam kasus kami, itu adalah app.component.ts mengajukan.

// app.component.ts

import { Component, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // ...
} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  ngOnInit(): void {
  }
}
 

Fungsi -fungsi ini memicu, keadaan, gaya, hidup, dan transisi, didefinisikan dalam @Angular/Animasi modul. Jadi, kita perlu mengimpor modul animasi ke dalam komponen kita.

Langkah 4: Menambahkan Properti Metadata Animasi

Dalam file app.component.ts, tambahkan properti Animations Metadata: di dalam dekorator @Component (). Kemudian, Anda menempatkan pemicu yang mendefinisikan animasi dalam properti Animasi Metadata.

// app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    // animation triggers go here
  ]
}) 

Memahami sintaksis animasi sudut

Kami akan menulis kode animasi di dalam metadata komponen. Lihat sintaks berikut.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('triggerName'), [
      state('stateName', style())
      transition('stateChangeExpression', [Animation Steps])
    ]
  ]
}) 

Di sini kita akan menggunakan properti yang disebut animasi, yang akan mengambil array sebagai input. Array berisi satu atau lebih ” pemicu” . Setiap pemicu memiliki nama dan implementasi yang unik. Negara dan transisi untuk animasi kami perlu didefinisikan dalam implementasi pemicu.

Setiap fungsi negara memiliki “ statename ” Didefinisikan untuk secara unik mengidentifikasi keadaan dan fungsi gaya untuk menampilkan gaya elemen dalam keadaan itu.

Setiap fungsi transisi memiliki statechangeExpression yang didefinisikan untuk menunjukkan perubahan status elemen dan array langkah animasi yang sesuai untuk menunjukkan bagaimana transisi akan terjadi.

Kami dapat memasukkan beberapa fungsi pemicu di dalam properti animasi sebagai nilai yang dipisahkan koma.

Kita perlu memasukkan nama pemicu dalam definisi elemen untuk menerapkan animasi ke elemen. Nama pemicu diikuti oleh simbol dalam tag elemen. Sebagai contoh,

Ini akan menerapkan pemicunya Fadeinout ke

elemen.

Mari kita buat beberapa animasi untuk memahami konsep animasi sudut dengan lebih baik.

Memudar dan memudar animasi dalam sudut

Kita semua menggunakan operasi CRUD dalam aplikasi sudut kami. Jadi, kami ingin menampilkan animasi sambil menambahkan atau menghapus elemen pada DOM. Kita akan melihat cara menghidupkan penyisipan dan penghapusan elemen ke daftar dengan efek fade-in dan fade-out.

Tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

import { Component, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('fadeInOut', [
      state('void', style({
        opacity: 0
      })),
      transition('void <=> *', animate(1000)),
    ]),
  ]
})
export class AppComponent implements OnInit {

  listItem = [];
  listOrder = 1;

  addElement(): void {
    const listitem = 'ListItem ' + this.listOrder;
    this.listOrder++;
    this.listItem.push(listitem);
  }
  removeElement(): void {
    this.listItem.length -= 1;
  }
  ngOnInit(): void {
  }
}
 

Di sini kami telah mendefinisikan pemicu Fadeinout .

Saat elemen ditambahkan dalam DOM, ia bertransisi dari void ke Wildcard (*) negara. Ini diungkapkan menggunakan void =>; * sintaksis.

Saat elemen dihapus dari DOM, ia bertransisi dari a Wildcard (*) untuk membatalkan. Ini diungkapkan menggunakan * =>; ruang kosong sintaksis.

Saat kami menggunakan waktu animasi yang sama untuk kedua arah animasi, kami dapat menggunakan sintaks singkatan <; => . Sebagaimana didefinisikan dalam Fadeinout pemicu, animasi dari void =>; * dan * => batal akan membutuhkan 1000ms untuk diselesaikan.

Tulis kode berikut di dalam app.component.html mengajukan.


Fade-In and Fade-Out animation

  • {{list}}

Kami telah menggunakan kelas bootstrap untuk menata elemen HTML dalam kode ini.

Animasi membutuhkan metode pemicu sehingga ia tahu kapan harus memulai. Metode pemicu () mengumpulkan status dan transisi dan memberikan animasi nama sehingga Anda dapat melampirkannya ke elemen pemicu dalam templat HTML.

Metode Trigger () menjelaskan nama properti untuk ditonton untuk perubahan. Ketika perubahan terjadi, metode pemicu () memulai tindakan yang termasuk dalam definisinya. Tindakan ini dapat berupa transisi atau fungsi lain, seperti yang akan kita lihat nanti.

Di sini, kami telah menentukan dua tombol. Setiap tombol memiliki acara klik. Satu tombol menambahkan listItem oleh 1, dan yang lainnya menghapus listItem oleh 1.

Kami menampilkan listItems menggunakan ul menandai.

Menambahkan Fadeinout Efek, kami telah menulis [@faceinout] di dalam tag

  • .

    Lihat outputnya.

    How

    Saat Anda mengklik tombol Tambah Elemen, itu akan menambahkan ListItem satu per satu dengan a fade-in dan fade-out memengaruhi. Hapus tombol elemen menghapus listItem.

    Kami mengikat Fadeinout memicu elemen

  • , yang akan menunjukkan efek fade-in dan fade-out saat ditambahkan dan dihapus dari DOM.

    Saat Anda telah mendefinisikan pemicu animasi untuk komponen, Anda dapat melampirkannya ke elemen dalam templat komponen itu dengan membungkus nama pemicu dalam tanda kurung dan mendahului dengan @ simbol. Kemudian, Anda dapat mengikat pelatuk ke ekspresi template menggunakan standar Mengikat properti sudut sintaksis. Dan itulah yang telah kami lakukan dalam kode di atas.

    Ubah animasi ukuran dalam sudut

    Kami akan membuat animasi untuk mengubah ukuran elemen

    , yang persegi pada klik tombol.

    Untuk mengubah dimensi elemen, kita harus mendefinisikan dua negara bagian,

    1. Keadaan awal
    2. Keadaan terakhir

    Jadi, kami akan mendefinisikan dua negara bagian di dalam fungsi pemicu ()

    Tulis kode berikut di dalam app.component.ts mengajukan.

    // app.component.ts
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animations: [
        trigger('changeDivDimension', [
          state('initial', style({
            backgroundColor: 'purple',
            width: '100px',
            height: '100px'
          })),
          state('final', style({
            backgroundColor: 'blue',
            width: '200px',
            height: '200px'
          })),
          transition('initial=>final', animate('1500ms')),
          transition('final=>initial', animate('1000ms'))
        ]),
      ]
    }) 

    Di sini kami telah mendefinisikan pemicu perubahanvdimension dan fungsi dua negara di dalam pelatuk. Elemen akan berwarna hijau di “ awal” menyatakan dan merah dengan peningkatan lebar dan tinggi di “ terakhir” negara.

    Kami telah menentukan transisi untuk perubahan negara. Misalnya, transisi dari “ awal” menyatakan untuk “ terakhir” akan memakan waktu 1500ms, dan dari “ terakhir” menyatakan untuk “ awal” akan mengambil 1000ms

    Untuk mengubah keadaan elemen kami, kami akan mendefinisikan fungsi dalam definisi kelas komponen kami. Sertakan kode berikut di kelas AppComponent.

    currentState = 'initial';
    
    changeState() {
      this.currentState = this.currentState === 'initial' ? 'final' : 'initial';
    } 

    Di sini kami telah mendefinisikan metode ChangeState (), yang akan mengalihkan keadaan elemen.

    Buka app.component.html File dan tambahkan kode berikut:

    
    

    Change Size animation

    Keluaran

    Angular

    Kami telah menentukan tombol yang akan memohon fungsi Changestate saat diklik. Kami telah mendefinisikan elemen

    dan menerapkan pemicu animasi ChangeNvDimension () ke dalamnya.

    Ketika kita mengklik tombol, itu membalik status elemen

    , dan ukurannya akan berubah dengan efek transisi.

    Kesimpulan

    Dalam artikel ini, kami telah belajar tentang animasi sudut – kita telah melihat konsep status animasi dan transisi. Kami juga melihat cara membuat efek fade-in dan fade-out di sudut dan bagaimana mengubah ukuran elemen HTML menggunakan animasi sudut.

    Itu untuk animasi sudut.

    Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

  • Leave a Reply

    Your email address will not be published. Required fields are marked *