কাস্টম এনিমেশন ইফেক্ট তৈরি

Aurelia ফ্রেমওয়ার্কে কাস্টম এনিমেশন ইফেক্ট তৈরি করা খুবই সহজ এবং অত্যন্ত ফ্লেক্সিবল। Aurelia এর animation ফিচারটি আপনাকে এলিমেন্টগুলোকে এনিমেট করার জন্য শক্তিশালী এবং কাস্টমাইজযোগ্য উপায় দেয়। আপনি এই এনিমেশন ফিচার ব্যবহার করে পৃষ্ঠা উপাদানগুলির মধ্যে ট্রানজিশন এবং মুভমেন্ট ইফেক্ট তৈরি করতে পারবেন।

Aurelia তে এনিমেশন কাস্টমাইজ করতে আপনি CSS এবং JavaScript এর সাথে Aurelia Animation API ব্যবহার করতে পারেন।

১. Aurelia তে এনিমেশন শুরু করা

Aurelia তে এনিমেশন ব্যবহার করার জন্য প্রথমে আপনাকে aurelia-templating-resources প্যাকেজটি ইনস্টল করতে হবে। এই প্যাকেজটি এনিমেশন ফিচারের জন্য প্রয়োজনীয় কনফিগারেশন এবং ফাংশনালিটি সরবরাহ করে।

ইনস্টলেশন:

npm install aurelia-templating-resources --save

এরপর, আপনাকে app.html বা আপনার পছন্দের টেমপ্লেটে এনিমেশন কোড ইন্টিগ্রেট করতে হবে।

২. CSS এনিমেশন তৈরি করা

Aurelia তে CSS এনিমেশন তৈরি করা সবচেয়ে সহজ এবং সাধারণ উপায়। আপনি transition বা @keyframes ব্যবহার করে এনিমেশন তৈরি করতে পারেন।

উদাহরণ:

app.html:

<template>
  <div class="fade-in" click.delegate="toggleAnimation()">Click me to animate</div>
</template>

এখানে একটি div এলিমেন্ট তৈরি করা হয়েছে, যেটি ক্লিক করলে এনিমেশন হবে।

app.css:

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-in.active {
  opacity: 1;
}

এখানে .fade-in ক্লাসে opacity ব্যবহার করে এনিমেশন তৈরি করা হয়েছে। .active ক্লাস যোগ করলে এনিমেশন শুরু হবে এবং একটি সুন্দর ফেড ইন ইফেক্ট দেখাবে।

app.js:

export class App {
  toggleAnimation() {
    let element = document.querySelector('.fade-in');
    element.classList.toggle('active');
  }
}

এখানে toggleAnimation() ফাংশন ক্লিক করার সাথে সাথে .active ক্লাস টগল করে, ফলে এনিমেশনটি শুরু হবে।

৩. Aurelia Animation API ব্যবহার করা

Aurelia এর Animation API ব্যবহার করে আরও উন্নত এবং জটিল এনিমেশন তৈরি করা সম্ভব। এটি animate নামক একটি ডিরেক্টিভ প্রদান করে, যা উপাদানগুলির এনিমেশন কাস্টমাইজ করতে সাহায্য করে।

উদাহরণ:

<template>
  <div repeat.for="item of items" class="item" animate.enter="fadeIn" animate.leave="fadeOut">
    \${item}
  </div>
</template>

এখানে animate.enter এবং animate.leave ব্যবহার করে উপাদানটি DOM তে প্রবেশ করার এবং প্রস্থান করার সময় কাস্টম এনিমেশন প্রযোজ্য করা হচ্ছে।

এনিমেশন ফাংশনগুলো কাস্টমাইজ করতে আপনি CSS ক্লাস ব্যবহার করতে পারেন।

CSS ক্লাসের উদাহরণ:

.fadeIn {
  animation: fadeIn 1s ease-in;
}

.fadeOut {
  animation: fadeOut 1s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

এখানে fadeIn এবং fadeOut এনিমেশন দুটি তৈরি করা হয়েছে। যখন এলিমেন্টটি DOM তে প্রবেশ করবে তখন fadeIn এবং যখন প্রস্থান করবে তখন fadeOut এনিমেশনটি চালু হবে।

৪. এনিমেশন যুক্ত করা লিস্ট আইটেমে

আপনি যদি একটি লিস্টের মধ্যে আইটেম গুলি এনিমেট করতে চান, যেমন কোনো আইটেম লিস্ট থেকে যোগ বা সরিয়ে দেওয়া, তাহলে আপনি repeat.for ডিরেক্টিভের সাথে এনিমেশন ব্যবহার করতে পারেন।

উদাহরণ:

<template>
  <ul>
    <li repeat.for="item of items" class="item" animate.enter="fadeIn" animate.leave="fadeOut">
      \${item}
    </li>
  </ul>

  <button click.delegate="addItem()">Add Item</button>
</template>

app.js:

export class App {
  items = ['Item 1', 'Item 2', 'Item 3'];

  addItem() {
    this.items.push(`Item ${this.items.length + 1}`);
  }
}

এখানে addItem() ফাংশন নতুন আইটেম লিস্টে অ্যাড করবে, এবং animate.enter এবং animate.leave ব্যবহার করে নতুন আইটেম যোগ করার সময় এবং প্রস্থান করার সময় এনিমেশন কার্যকর হবে।

৫. JavaScript দ্বারা এনিমেশন নিয়ন্ত্রণ

Aurelia তে আপনি JavaScript কোড দিয়ে এনিমেশন চালানোর সময় আরও নিয়ন্ত্রণ পেতে পারেন। উদাহরণস্বরূপ, setTimeout বা requestAnimationFrame ব্যবহার করে এনিমেশন তৈরি করা।

উদাহরণ:

export class App {
  animateElement() {
    let element = document.querySelector('.animate-me');
    element.classList.add('start-animation');

    setTimeout(() => {
      element.classList.remove('start-animation');
    }, 2000);
  }
}

app.html:

<template>
  <div class="animate-me" click.delegate="animateElement()">Click me to animate</div>
</template>

app.css:

.animate-me {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 2s;
}

.animate-me.start-animation {
  transform: rotate(360deg);
}

এখানে, start-animation ক্লাস যুক্ত করা হলে এলিমেন্টটি 360 ডিগ্রী ঘুরবে, এবং তারপর সেটি স্বয়ংক্রিয়ভাবে ক্লাসটি সরিয়ে ফেলবে।

উপসংহার

Aurelia তে কাস্টম এনিমেশন ইফেক্ট তৈরি করা বেশ সোজা এবং শক্তিশালী। আপনি CSS ট্রানজিশন, Aurelia Animation API, এবং JavaScript এর সাথে এনিমেশন ফিচার ব্যবহার করে অ্যাপ্লিকেশনে আকর্ষণীয় এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে পারেন। এভাবে, আপনি সহজেই এনিমেশন এবং ট্রানজিশন ইফেক্ট সংযুক্ত করতে পারবেন যা আপনার অ্যাপ্লিকেশনকে আরও জীবন্ত এবং ব্যবহারকারী-বান্ধব করে তোলে।