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

Web Development - অ্যাঙ্গুলার (Angular) - 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 এ স্টেট সাধারণত দুটি প্রধান রকমের হতে পারে:

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

এছাড়াও, আপনি যে কোনো কাস্টম স্টেটও ব্যবহার করতে পারেন, যেমন 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 স্টেটের মধ্যে ট্রানজিশন।

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