Angular-এ অ্যানিমেশনস একটি শক্তিশালী বৈশিষ্ট্য, যা আপনাকে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বন্ধুত্বপূর্ণ করতে সাহায্য করে। Angular অ্যানিমেশনস আপনাকে DOM এলিমেন্টের মধ্যে বিভিন্ন পরিবর্তন যেমন স্লাইড, ফেড ইন/আউট, পরিবর্তনশীল সাইজ, রোটেশন ইত্যাদি অ্যাপ্লাই করতে দেয়। এটি Angular এর @angular/animations প্যাকেজ ব্যবহার করে কাজ করে।

Angular অ্যানিমেশনস সেটআপ

Angular-এ অ্যানিমেশনস ব্যবহার করার জন্য, প্রথমে @angular/animations মডিউলটি ইনস্টল এবং ইম্পোর্ট করতে হবে।

Step 1: Angular Animations মডিউল ইম্পোর্ট করা

app.module.ts ফাইলে 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 BrowserAnimationsModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখন, Angular অ্যানিমেশনস ব্যবহারের জন্য প্রস্তুত।

Angular অ্যানিমেশনস এর মূল কনসেপ্ট

Angular অ্যানিমেশনস তৈরি করতে আপনাকে প্রধানত দুটি উপাদান ব্যবহার করতে হবে:

1. Triggers: অ্যানিমেশন শুরুর শর্ত (যেমন @triggerName).
2. States: যে অবস্থার মধ্যে এলিমেন্ট থাকবে (যেমন '*', in, out).
3. Transitions: অবস্থার মধ্যে রূপান্তর বা পরিবর্তন (যেমন :enter, :leave, :hover).
4. Keyframes: নির্দিষ্ট সময়ে এলিমেন্টের অবস্থান নির্ধারণ (যেমন 0%, 100% সময়ে কীভাবে আউটপুট হবে)।

অ্যানিমেশন ট্রিগার সেটআপ

অ্যানিমেশন ট্রিগার তৈরি করতে trigger এবং state ফাংশন ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি বাটন ক্লিক করলে একটি এলিমেন্ট ফেড ইন/আউট হবে।

Example: এলিমেন্টে ফেড ইন এবং ফেড আউট অ্যানিমেশন

প্রথমে, trigger এবং state ফাংশনগুলি ব্যবহার করে অ্যানিমেশন তৈরি করা হয়। উদাহরণ:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="toggleState()">Toggle</button>
    <div [@fadeInOut]="state" class="box">I am a box</div>
  `,
  animations: [
    trigger('fadeInOut', [
      state('void', style({
        opacity: 0
      })),
      state('*', style({
        opacity: 1
      })),
      transition(':enter', [
        animate('500ms 0s ease-in')
      ]),
      transition(':leave', [
        animate('500ms 0s ease-out')
      ])
    ])
  ]
})
export class AppComponent {
  state: string = '';

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

এখানে:

• trigger: 'fadeInOut' নামে অ্যানিমেশন ট্রিগার তৈরি করা হয়েছে।
• state: দুটি অবস্থান void (যখন এলিমেন্ট DOM-এ নেই) এবং * (যখন এলিমেন্ট DOM-এ আছে) নির্ধারণ করা হয়েছে।
• transition: :enter এবং :leave ব্যবহার করে অ্যানিমেশন রূপান্তর নির্ধারণ করা হয়েছে।

অ্যানিমেশন কোডের ব্যাখ্যা:

• void state: যখন এলিমেন্ট DOM-এ নেই, তখন opacity: 0 থাকে।
• * state: যখন এলিমেন্ট DOM-এ থাকে, তখন opacity: 1 থাকে।
• transition(':enter'): এটি এলিমেন্টের ইনট্রান্সিশনের জন্য ব্যবহৃত হয়, যার মাধ্যমে অ্যানিমেশন শুরু হয় যখন এলিমেন্ট DOM-এ প্রবেশ করে।
• transition(':leave'): এটি এলিমেন্টের আউটট্রান্সিশনের জন্য ব্যবহৃত হয়, যার মাধ্যমে অ্যানিমেশন শুরু হয় যখন এলিমেন্ট DOM-এ থেকে চলে যায়।

অ্যানিমেশন ইভেন্ট হ্যান্ডলিং

Angular অ্যানিমেশনস বিভিন্ন ইভেন্ট হ্যান্ডলিং ফাংশন সাপোর্ট করে। এই ইভেন্টগুলি অ্যানিমেশন চলাকালে ঘটতে পারে, যেমন onStart, onDone, onChange ইত্যাদি।

উদাহরণ: অ্যানিমেশন স্টার্ট এবং ডান হ্যান্ডলিং

@Component({
  selector: 'app-root',
  template: `
    <button (click)="toggleState()">Toggle</button>
    <div [@fadeInOut]="state" (done)="onAnimationDone($event)" class="box">I am a box</div>
  `,
  animations: [
    trigger('fadeInOut', [
      state('void', style({ opacity: 0 })),
      state('*', style({ opacity: 1 })),
      transition(':enter', [
        animate('500ms 0s ease-in')
      ]),
      transition(':leave', [
        animate('500ms 0s ease-out')
      ])
    ])
  ]
})
export class AppComponent {
  state: string = '';

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

  onAnimationDone(event: any) {
    console.log('Animation Done', event);
  }
}

এখানে, done ইভেন্টটি ব্যবহার করা হয়েছে যা অ্যানিমেশন শেষ হলে কল হবে।

Angular অ্যানিমেশনস এর আরও কিছু উদাহরণ

১. Slide In / Slide Out

trigger('slideInOut', [
  state('in', style({
    transform: 'translateX(0)'
  })),
  state('out', style({
    transform: 'translateX(-100%)'
  })),
  transition('in => out', [
    animate('300ms ease-in-out')
  ]),
  transition('out => in', [
    animate('300ms ease-in-out')
  ])
])

২. Scale Animation

trigger('scale', [
  state('small', style({
    transform: 'scale(1)'
  })),
  state('large', style({
    transform: 'scale(1.5)'
  })),
  transition('small <=> large', [
    animate('200ms ease-in-out')
  ])
])

সারাংশ

Angular অ্যানিমেশনস ব্যবহার করে সহজেই ইউআই উপাদানগুলোর মধ্যে প্রাণবন্ত পরিবর্তন আনা যায়। এটি ব্যবহারকারীদের কাছে অ্যাপ্লিকেশনটিকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে। Angular অ্যানিমেশনস এর মাধ্যমে সহজে ট্যানজেন্ট, রোটেশন, স্লাইড, ফেড ইন/আউট এবং অন্যান্য অ্যানিমেশন অ্যাপ্লাই করা যায়।

Angular একটি শক্তিশালী ফ্রেমওয়ার্ক যা ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশনের জন্য অ্যানিমেশন সমর্থন করে। Angular Animations ব্যবহার করে আপনার অ্যাপ্লিকেশনগুলিতে ভিজ্যুয়াল ইফেক্ট এবং অ্যানিমেশন যুক্ত করা সহজ হয়। Angular এর AnimationModule এর মাধ্যমে অ্যাপ্লিকেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারী বান্ধব করা যায়।

Angular Animations: মৌলিক ধারণা

Angular এ অ্যানিমেশন তৈরি করতে @angular/animations প্যাকেজটি ব্যবহার করতে হয়। এই প্যাকেজটি বিভিন্ন অ্যানিমেশন ফিচার প্রদান করে, যেমন: trigger, state, transition, animate, এবং style।

১. trigger:

trigger হচ্ছে একটি অ্যানিমেশন শুরুর পয়েন্ট। এটি অ্যানিমেশনটি কবে এবং কোথায় চালু হবে তা নির্ধারণ করে। সাধারণত এটি কম্পোনেন্টের মধ্যে ব্যবহৃত হয়।

২. state:

state ব্যবহার করে আপনি একটি নির্দিষ্ট অবস্থাকে নির্ধারণ করতে পারেন, যেমন একটি ভিউ (view) কোনো নির্দিষ্ট অবস্থায় থাকলে, সেই অবস্থার অ্যানিমেশনটি চালু হবে।

৩. transition:

transition হলো অ্যানিমেশনের মধ্যে পদ্ধতি যা দুটি অবস্থার মধ্যে পরিবর্তন ঘটায়। এটি সাধারণত state এর মধ্যে পরিবর্তনকে নির্দেশ করে।

৪. animate:

animate ব্যবহার করে আপনি কোন অ্যানিমেশনটি চালু করবেন এবং কত সময় সেটি চলবে তা নির্ধারণ করেন।

৫. style:

style অ্যানিমেশনের জন্য CSS স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। এটি state এর মধ্যে স্টাইল পরিবর্তনের জন্য ব্যবহার করা হয়।

Angular Animations এর উদাহরণ

এখানে একটি সহজ উদাহরণ দেওয়া হলো যা Angular Animations ব্যবহার করে একটি কম্পোনেন্টে অ্যানিমেশন তৈরি করে:

১. app.module.ts-এ অ্যানিমেশন মডিউল ইম্পোর্ট করা

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Angular Animations মডিউল ইম্পোর্ট

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule], // BrowserAnimationsModule ইম্পোর্ট করা
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

এখানে, BrowserAnimationsModule কে ইম্পোর্ট করা হয়েছে যা অ্যানিমেশন সমর্থন করার জন্য প্রয়োজনীয়।

২. কম্পোনেন্টে অ্যানিমেশন তৈরি করা

import { Component } 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('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'green'
      })),
      state('closed', style({
        height: '0px',
        opacity: 0,
        backgroundColor: 'red'
      })),
      transition('open <=> closed', [
        animate('0.5s')
      ]),
    ])
  ]
})
export class AppComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

এখানে, trigger('openClose', [...]) দিয়ে একটি অ্যানিমেশন ট্রিগার তৈরি করা হয়েছে, যা open এবং closed অবস্থার মধ্যে পরিবর্তন ঘটায়। state ব্যবহার করে দুইটি অবস্থার জন্য স্টাইল নির্ধারণ করা হয়েছে এবং transition দিয়ে দুইটি অবস্থার মধ্যে পরিবর্তন করার সময় অ্যানিমেশন চালানো হয়েছে।

৩. টেম্পলেটে অ্যানিমেশন ব্যবহার করা

<div [@openClose]="isOpen ? 'open' : 'closed'" (click)="toggle()">
  Click to toggle
</div>

এখানে, [@openClose] নির্দেশক দিয়ে অ্যানিমেশনটি যুক্ত করা হয়েছে, যা isOpen ভ্যালুর উপর ভিত্তি করে কম্পোনেন্টের অবস্থান পরিবর্তন করবে।

Angular Animations এর কিছু প্রধান বৈশিষ্ট্য

1. Declarative Syntax: Angular এর অ্যানিমেশনগুলির সিনট্যাক্স declarative (ঘোষণামূলক), যা অ্যানিমেশন তৈরি করতে সহজ এবং বোধগম্য হয়।
2. Interactive and Flexible: Angular অ্যানিমেশন অনেকটা ইন্টারঅ্যাকটিভ এবং সেটি অনেক ধরণের ইফেক্ট (যেমন, আউটপুট প্যানেল, স্লাইড, পপ-আপ) তৈরি করতে সাহায্য করে।
3. State Transitions: Angular এর অ্যানিমেশনগুলি state transitions এর মাধ্যমে সহজে ভিজ্যুয়াল চেঞ্জ করতে সহায়ক হয়।
4. Timing and Duration Control: অ্যানিমেশনগুলির জন্য সময় এবং দৈর্ঘ্য নির্ধারণ করা যায়, যা অ্যাপ্লিকেশনটিকে আরো ফ্লুয়েন্ট এবং স্মুথ করে তোলে।

সারাংশ

Angular এর অ্যানিমেশন ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করা যায়। Trigger, State, Transition, Animate, এবং Style এর মতো মূল উপাদানগুলির মাধ্যমে আপনি সহজেই আকর্ষণীয় অ্যানিমেশন তৈরি করতে পারবেন। Angular এর অ্যানিমেশন API এর মাধ্যমে সার্বিক অ্যাপ্লিকেশন পারফরমেন্স এবং ইউজার এক্সপিরিয়েন্স উন্নত করা সম্ভব।

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 অ্যানিমেশনগুলো খুবই শক্তিশালী এবং পারফরমেন্স-বান্ধব হতে পারে, যদি সঠিকভাবে ব্যবহৃত হয়।

Angular-এ অ্যানিমেশন ট্রিগার এবং স্টেট ব্যবহার করে ডায়নামিক অ্যানিমেশন তৈরি করা হয়। ট্রিগার হলো অ্যানিমেশন শুরু করার জন্য কোনো শর্ত বা ঘটনা, এবং স্টেট হলো একটি নির্দিষ্ট অবস্থান বা পরিস্থিতি যেখানে অ্যানিমেশনটি কার্যকরী হয়। Angular এর অ্যানিমেশন সিস্টেম trigger() এবং state() ফাংশনগুলো দিয়ে অ্যানিমেশন কনফিগার করা হয়।

অ্যানিমেশন ট্রিগার (Trigger)

trigger() ফাংশন Angular অ্যানিমেশন সিস্টেমের একটি গুরুত্বপূর্ণ উপাদান, যা একটি নির্দিষ্ট ইভেন্ট বা অবস্থায় অ্যানিমেশন শুরু করতে ব্যবহৃত হয়। এটি ডম ইলিমেন্টের কোনো পরিবর্তন বা ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ট্রিগার হয়। সাধারণত, আপনি এই ট্রিগারটি এক বা একাধিক state() এর সঙ্গে সংযুক্ত করেন, যা নির্ধারণ করে অ্যানিমেশনটি কিভাবে এবং কখন হবে।

trigger() এর সাধারণ ব্যবহার

trigger('triggerName', [
  state('stateName', style({ /* styles */ })),
  transition('state1 => state2', [animate('duration')]),
  // More states and transitions
])

এখানে:

• triggerName হলো ট্রিগারের নাম।
• stateName হলো সেই অবস্থার নাম যা ইলিমেন্ট ধারণ করবে।
• transition() এর মাধ্যমে স্টেট পরিবর্তন কীভাবে হবে তা নির্ধারণ করা হয়।

অ্যানিমেশন স্টেট (State)

state() ফাংশন অ্যানিমেশনের একটি নির্দিষ্ট অবস্থান বা state নির্ধারণ করে। Angular এ স্টেট সাধারণত দুটি প্রধান রকমের হতে পারে:

1. void স্টেট: যখন কোনো এলিমেন্ট DOM থেকে সরানো হয়, তখন এটি "void" স্টেটে চলে যায়।
2. * স্টেট: এটি একটি ওয়াইল্ডকার্ড স্টেট, যেখানে এলিমেন্টটি অন্যান্য সব অবস্থায় থাকবে।

এছাড়াও, আপনি যে কোনো কাস্টম স্টেটও ব্যবহার করতে পারেন, যেমন in, out, open, close ইত্যাদি।

উদাহরণ: স্টেট এবং ট্রিগার

এখানে একটি সিম্পল ফেড ইন/আউট অ্যানিমেশন তৈরি করা হয়েছে, যেখানে void এবং * স্টেট ব্যবহার করা হয়েছে:

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
      })),
      state('*', style({
        opacity: 1
      })),
      transition(':enter', [
        animate('1s ease-in')  // When element enters
      ]),
      transition(':leave', [
        animate('1s ease-out')  // When element leaves
      ])
    ])
  ]
})
export class AppComponent {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;  // Toggles visibility
  }
}

এখানে:

• void স্টেট: যখন এলিমেন্ট DOM-এ নেই (যেমন ngIf বা *ngFor দিয়ে এলিমেন্ট মুছে ফেলা হয়েছে)।
• * স্টেট: যখন এলিমেন্ট DOM-এ রয়েছে, তখন তার আপডেট করা স্টাইল থাকবে।
• `transition(':enter'): এলিমেন্ট যখন DOM-এ প্রবেশ করে তখন অ্যানিমেশন শুরু হবে।
• `transition(':leave'): এলিমেন্ট যখন DOM থেকে চলে যায় তখন অ্যানিমেশন শুরু হবে।

স্টেট এবং ট্রানজিশন উদাহরণ

এখানে একটি উদাহরণ দেওয়া হলো, যেখানে দুইটি আলাদা স্টেট (open এবং closed) এবং তাদের মধ্যে ট্রানজিশন ব্যবহার করা হয়েছে:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="toggle()">Toggle</button>
    <div [@openClose]="isOpen ? 'open' : 'closed'" class="box">
      This is a box that can be opened and closed.
    </div>
  `,
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        backgroundColor: 'green'
      })),
      state('closed', style({
        height: '100px',
        backgroundColor: 'red'
      })),
      transition('open <=> closed', [
        animate('1s')
      ])
    ])
  ]
})
export class AppComponent {
  isOpen = false;

  toggle() {
    this.isOpen = !this.isOpen;  // Toggles between open and closed states
  }
}

এখানে:

• open স্টেট: এলিমেন্টের উচ্চতা 200px এবং ব্যাকগ্রাউন্ড রঙ সবুজ।
• closed স্টেট: এলিমেন্টের উচ্চতা 100px এবং ব্যাকগ্রাউন্ড রঙ লাল।
• transition('open <=> closed'): open এবং closed স্টেটের মধ্যে ট্রানজিশন।

এই কোডে, একটি বাটন ক্লিক করলে বক্সটি তার অবস্থান পরিবর্তন করবে এবং অ্যানিমেশনটি ১ সেকেন্ডে সম্পন্ন হবে।

অ্যানিমেশন ট্রিগার এবং স্টেটের সুবিধা

• ইন্টারঅ্যাকটিভ ইউআই: অ্যানিমেশন ট্রিগার এবং স্টেট ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনটি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব হয়।
• ডাইনামিক ইউআই: সহজেই কম্পোনেন্টের অবস্থান পরিবর্তন করা যায়, যেমন স্লাইডিং, ফেডিং, টগলিং ইত্যাদি।
• সহজ কনফিগারেশন: অ্যানিমেশন স্টেট এবং ট্রিগার সহজেই কনফিগার করা যায়, যা অ্যাপ্লিকেশনের ইউআই উন্নত করতে সাহায্য করে।

এভাবে Angular অ্যানিমেশন ট্রিগার এবং স্টেট ব্যবহার করে বিভিন্ন ধরনের অ্যানিমেশন তৈরি করা যেতে পারে, যা অ্যাপ্লিকেশনের ভিজ্যুয়াল প্রেজেন্টেশন এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।

Angular-এ Keyframes এবং Transitions ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনগুলির ইউজার ইন্টারফেসে সুনির্দিষ্ট অ্যানিমেশন এবং গতিশীলতা যুক্ত করতে পারেন। Angular CSS অ্যানিমেশন সাপোর্ট করে এবং এতে keyframes ও transitions ব্যবহারের মাধ্যমে এপ্লিকেশনের বিভিন্ন অংশে এনিমেটেড প্রভাব তৈরি করা যায়। এটি ইউজার এক্সপেরিয়েন্সে একটি দারুণ দৃষ্টিকোণ যোগ করতে সহায়তা করে।

CSS Transitions

CSS Transitions ব্যবহৃত হয় যখন একটি CSS প্রপার্টির মান সুনির্দিষ্ট একটি সময়ের মধ্যে পরিবর্তিত হয়। Angular-এ CSS Transitions ব্যবহার করলে, আপনি DOM উপাদানগুলির প্রপার্টি পরিবর্তন হওয়ার সময় একটি অ্যানিমেশন দেখতে পাবেন।

Transition এর মূল বৈশিষ্ট্য:

• Transition Property: কোন CSS প্রপার্টি ট্রানজিশন হবে তা নির্ধারণ করে।
• Transition Duration: কত সময় ধরে ট্রানজিশন চলবে।
• Transition Timing Function: ট্রানজিশনের গতির ধরন কেমন হবে তা নির্ধারণ করে (যেমন ease, linear ইত্যাদি)।
• Transition Delay: ট্রানজিশন শুরু হতে কত সময় বিলম্ব হবে তা নির্ধারণ করে।

Transition উদাহরণ

ধরা যাক, আপনি একটি বাটন হোভার করলে এর ব্যাকগ্রাউন্ড রং পরিবর্তন করতে চান। এজন্য CSS Transition ব্যবহার করা যাবে:

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: green;
}

এখানে, transition প্রপার্টিটি ব্যাকগ্রাউন্ড রঙ পরিবর্তনের জন্য ব্যবহৃত হচ্ছে এবং ০.৩ সেকেন্ড সময়ের মধ্যে এটি পরিবর্তিত হবে।

Angular কম্পোনেন্টে Transition ব্যবহার

Angular কম্পোনেন্টে CSS Transition ব্যবহার করার জন্য আপনার স্টাইলশীট ফাইল (যেমন .component.css) ব্যবহার করতে হবে। উদাহরণস্বরূপ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-transition-demo',
  template: '<button>Hover over me!</button>',
  styleUrls: ['./transition-demo.component.css']
})
export class TransitionDemoComponent {}

এবং transition-demo.component.css এ:

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: red;
}

এখন, যখন বাটনের উপর মাউস হোভার করবেন, এর ব্যাকগ্রাউন্ড রঙ ধীরে ধীরে লাল হয়ে যাবে।

CSS Keyframes

Keyframes CSS অ্যানিমেশন তৈরিতে ব্যবহৃত হয়, যেখানে আপনি বিভিন্ন কীগুলির মধ্যে ট্রানজিশন নির্দেশ করতে পারেন। Keyframes একটি CSS rule যা নির্দিষ্ট সময় বা অবস্থা অনুযায়ী উপাদানটির স্টাইল পরিবর্তন করার জন্য ব্যবহৃত হয়।

Keyframes এর মূল বৈশিষ্ট্য:

• @keyframes Rule: আপনি একটি অ্যানিমেশন তৈরি করতে পারেন যা একটি উপাদানের বিভিন্ন স্টেটের মধ্যে অগ্রসর হবে।
• From/To: অ্যানিমেশনের শুরু এবং শেষ স্টেটকে নির্দিষ্ট করতে ব্যবহৃত হয়। তবে আপনি আরও কীগুলি ব্যবহার করে সুনির্দিষ্ট স্টেটও নির্ধারণ করতে পারেন।

Keyframes উদাহরণ

ধরা যাক, আপনি একটি বাটন তৈরি করেছেন এবং এটি কয়েকটি রঙ পরিবর্তন করতে চাচ্ছেন।

@keyframes colorChange {
  0% {
    background-color: blue;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  animation: colorChange 3s infinite;
}

এখানে, @keyframes ব্যবহার করে একটি অ্যানিমেশন তৈরি করা হয়েছে যার মধ্যে 0%, 50%, 100% কীগুলি নির্দিষ্ট করা হয়েছে। এই অ্যানিমেশনটি ৩ সেকেন্ডের মধ্যে এক্সিকিউট হবে এবং এটি infinite মানে বারবার চলতে থাকবে।

Angular কম্পোনেন্টে Keyframes ব্যবহার

Angular-এ @keyframes ব্যবহার করতে হলে আপনাকে একইভাবে স্টাইলশীট ফাইলগুলিতে এটি রাখতে হবে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-keyframes-demo',
  template: '<button>Watch me change colors!</button>',
  styleUrls: ['./keyframes-demo.component.css']
})
export class KeyframesDemoComponent {}

এবং keyframes-demo.component.css ফাইলে:

@keyframes colorChange {
  0% {
    background-color: blue;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  animation: colorChange 3s infinite;
}

এখন, যখন আপনি বাটনের উপর মাউস রাখবেন, এটি রঙ পরিবর্তন করতে থাকবে।

Angular Animations

Angular-এ CSS Transitions এবং Keyframes ছাড়াও, আপনি Angular এর Animation API ব্যবহার করে আরও জটিল অ্যানিমেশন তৈরি করতে পারেন। Angular-এর @angular/animations প্যাকেজটি আপনাকে অনেক বেশি কাস্টমাইজেশন ও নিয়ন্ত্রণ দেয়। এর মাধ্যমে আপনি ইন্টিগ্রেটেড এনিমেশন তৈরি করতে পারবেন, যেমন কম্পোনেন্টে এলিমেন্টের ইন, আউট, স্টেট চেঞ্জ, ট্রান্সফরমেশন ইত্যাদি।

Angular Animation উদাহরণ

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

@Component({
  selector: 'app-animation-demo',
  template: `<div [@fadeInOut]>Hello Angular Animation!</div>`,
  styles: [`
    div {
      width: 200px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background-color: lightblue;
      margin: 10px;
    }
  `],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('2s', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('2s', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class AnimationDemoComponent {}

এখানে, Angular-এর @angular/animations প্যাকেজ ব্যবহার করে fadeInOut নামে একটি অ্যানিমেশন তৈরি করা হয়েছে, যা ডিভ উপাদানটির প্রবেশ এবং প্রস্থানের সময়ের অ্যানিমেশন নির্ধারণ করে।

সারাংশ

Angular-এ CSS Transitions এবং Keyframes ব্যবহারের মাধ্যমে UI-এর অংশগুলিতে সঠিক অ্যানিমেশন ও গতিশীলতা যোগ করা যায়। এগুলো ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করা সম্ভব। Angular-এর Animation API আরও উন্নত অ্যানিমেশন ফিচার প্রদান করে, যা CSS ট্রানজিশন ও কিওফ্রেমের চাইতে বেশি কাস্টমাইজেবল।