Angular-এ অ্যানিমেশন তৈরি করা খুবই সহজ এবং এর জন্য Angular @angular/animations প্যাকেজটি ব্যবহার করতে হয়। Angular-এ অ্যানিমেশন সাধারণত DOM ইলিমেন্টগুলোর ভিজ্যুয়াল চেঞ্জ, যেমন অবস্থান, আকার, রঙ ইত্যাদি, সজ্জিত করতে ব্যবহৃত হয়। Angular অ্যাপ্লিকেশনের মধ্যে সুন্দর এবং ইন্টারেকটিভ অ্যানিমেশন তৈরির জন্য এটি খুবই উপযোগী।

Angular অ্যানিমেশন মডিউল ইনস্টল করা

প্রথমেই Angular অ্যাপ্লিকেশনটি @angular/animations প্যাকেজটি ইনস্টল করে নিন। যদি এটি ইনস্টল না করা থাকে, তাহলে নিচের কমান্ডটি ব্যবহার করুন:

npm install @angular/animations

এটি ইনস্টল করার পর, AppModule-এ এই প্যাকেজটি ইম্পোর্ট করতে হবে।

অ্যানিমেশন কনফিগার করা

Angular-এ অ্যানিমেশন কনফিগার করতে হলে প্রথমে trigger এবং state ডেকোরেটর ব্যবহার করতে হয়, যা কিভাবে অ্যানিমেশনটি ট্রিগার হবে এবং কী ধরনের পরিবর্তন হবে তা নির্ধারণ করে।

অ্যানিমেশন তৈরি করার উদাহরণ:

1. trigger(): অ্যানিমেশন ট্রিগার করতে ব্যবহৃত হয়।
2. state(): একটি অ্যানিমেশন স্টেট নির্ধারণ করে।
3. transition(): স্টেট পরিবর্তনের মধ্যে অ্যানিমেশন ট্রানজিশন কিভাবে হবে তা নির্ধারণ করে।
4. animate(): অ্যানিমেশন চলাকালীন সময়ে কিভাবে উপাদানটি পরিবর্তন হবে তা নির্ধারণ করে।

উদাহরণ: সিম্পল ফেড ইন/আউট অ্যানিমেশন

1. প্রথমে, AppModule-এ BrowserAnimationsModule ইম্পোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Import BrowserAnimationsModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule  // Add it to the imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. এরপর, অ্যানিমেশন তৈরি করতে Angular component-এ কোড যুক্ত করুন।

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('fade', [
      state('void', style({
        opacity: 0
      })),
      transition(':enter, :leave', [
        animate('1s')
      ])
    ])
  ]
})
export class AppComponent {
  title = 'angular-animations';
}

এখানে:

• trigger('fade'): একটি অ্যানিমেশন ট্রিগার তৈরি করে যার নাম fade।
• state('void', style({ opacity: 0 })): এটি void অবস্থার জন্য স্টাইল নির্ধারণ করে, যেটি কোনো এলিমেন্ট DOM থেকে সরানোর সময় হয়।
• transition(':enter, :leave', [animate('1s')]): যখন এলিমেন্ট DOM এ আসে অথবা চলে যায়, তখন ১ সেকেন্ডের অ্যানিমেশন প্রয়োগ করা হবে।

3. HTML টেমপ্লেট-এ এই অ্যানিমেশনটিকে অ্যাপ্লাই করুন:

<div [@fade] class="fade-box">
  This content will fade in and out.
</div>

এখানে, [@fade] দ্বারা অ্যাঙ্গুলার অ্যানিমেশন ট্রিগারটিকে অ্যাপ্লাই করা হচ্ছে।

অ্যানিমেশন স্টেট এবং ট্রানজিশন

অ্যানিমেশন কনফিগারেশনে state(), transition(), এবং animate() এর আরও বিস্তারিত ব্যবহার দেখে নিন:

1. state(): এই ডেকোরেটরটি নির্দিষ্ট একটি অবস্থার জন্য স্টাইল নির্ধারণ করে। যেমন: ওপেন এবং ক্লোজ স্টেট।

state('open', style({
  height: '200px',
  opacity: 1
})),
state('closed', style({
  height: '100px',
  opacity: 0.5
}))

2. transition(): এটি স্টেটের মধ্যে পরিবর্তন কিভাবে হবে তা নির্ধারণ করে। এটি সাধারণত from এবং to এর মধ্যে ট্রানজিশন হিসেবে ব্যবহৃত হয়।

transition('open <=> closed', [
  animate('500ms ease-in-out')
])

এখানে, যখন open থেকে closed অথবা closed থেকে open অবস্থায় পরিবর্তন হবে, তখন অ্যানিমেশন ৫০০ মিলিসেকেন্ডে সম্পন্ন হবে।

অ্যাডভান্সড অ্যানিমেশন উদাহরণ

এনিমেটেড স্লাইড

এখানে আমরা একটি স্লাইড অ্যানিমেশন তৈরি করবো যেখানে একটি ডিভ স্লাইড ইন এবং স্লাইড আউট হবে।

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('slide', [
      state('in', style({
        transform: 'translateX(0)'
      })),
      state('out', style({
        transform: 'translateX(100%)'
      })),
      transition('in <=> out', [
        animate('500ms ease-in-out')
      ])
    ])
  ]
})
export class AppComponent {
  state = 'out';

  toggleSlide() {
    this.state = this.state === 'out' ? 'in' : 'out';
  }
}

এখানে:

• transform: 'translateX(0)' এবং transform: 'translateX(100%)' দিয়ে ডিভের স্লাইড ইন এবং আউট অবস্থার স্টাইল নির্ধারণ করা হয়েছে।
• toggleSlide() মেথড দ্বারা স্লাইডের অবস্থান পরিবর্তন করা হয়।

HTML:

<div [@slide]="state" class="slider">
  Slide me in and out!
</div>

<button (click)="toggleSlide()">Toggle Slide</button>

অ্যানিমেশন পারফরমেন্স অপটিমাইজেশন

Angular অ্যানিমেশন ব্যবহারের সময় পারফরমেন্স সংক্রান্ত কিছু বিষয় মনে রাখা গুরুত্বপূর্ণ। উদাহরণস্বরূপ:

• GPU-accelerated CSS properties (যেমন transform এবং opacity) ব্যবহার করা, কারণ এগুলি সাধারণত রেন্ডারিং-এ কম লোড সৃষ্টি করে।
• অ্যানিমেশন চলাকালীন DOM-এ অতিরিক্ত এলিমেন্ট তৈরি না করা।

সারাংশ

Angular-এ অ্যানিমেশন তৈরি এবং কনফিগার করতে @angular/animations প্যাকেজ ব্যবহার করতে হয়। trigger(), state(), transition(), এবং animate() ডেকোরেটরের মাধ্যমে বিভিন্ন ধরণের অ্যানিমেশন তৈরি করা যায়। Angular অ্যানিমেশনগুলো খুবই শক্তিশালী এবং পারফরমেন্স-বান্ধব হতে পারে, যদি সঠিকভাবে ব্যবহৃত হয়।