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 ট্রানজিশন ও কিওফ্রেমের চাইতে বেশি কাস্টমাইজেবল।