Polymer Framework-এ Web Animations API ব্যবহার করে আপনি ইউজার ইন্টারফেসে বিভিন্ন ধরণের অ্যানিমেশন তৈরি করতে পারেন। Web Animations API একটি ব্রাউজার API যা আপনাকে সহজে এবং কার্যকরভাবে DOM উপাদানগুলোর অ্যানিমেশন তৈরি, নিয়ন্ত্রণ এবং পরিচালনা করতে সহায়তা করে। এটি CSS অ্যানিমেশন এবং ট্রান্সফরমেশন এর চেয়ে বেশি ক্ষমতাশালী এবং এক্সপ্রেসিভ।
Polymer ফ্রেমওয়ার্কে Web Animations API ব্যবহার করে আপনি অ্যানিমেশনগুলো ডাইনামিকভাবে এবং JavaScript ব্যবহার করে কাস্টমাইজ করতে পারবেন।
Polymer Framework-এ Web Animations API ব্যবহার করার ধাপসমূহ:
১. Polymer উপাদানে Web Animations API প্রয়োগ করা
Web Animations API ব্যবহারের জন্য আপনাকে শুধুমাত্র DOM উপাদান এবং JavaScript দিয়ে অ্যানিমেশন তৈরি করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো যেখানে Polymer এর একটি কাস্টম উপাদানে অ্যানিমেশন প্রয়োগ করা হয়েছে।
ধাপ ১: Polymer কাস্টম উপাদান তৈরি করা এবং Web Animations API ব্যবহার করা
<dom-module id="animated-element">
<template>
<div id="animatedBox" class="box">Animate Me!</div>
<paper-button raised on-click="startAnimation">Start Animation</paper-button>
</template>
<style>
.box {
width: 100px;
height: 100px;
background-color: steelblue;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 10px;
}
</style>
<script>
class AnimatedElement extends Polymer.Element {
static get is() {
return 'animated-element';
}
startAnimation() {
const box = this.$.animatedBox;
// Web Animations API ব্যবহার করে একটি সিম্পল অ্যানিমেশন তৈরি করা
box.animate([
{ transform: 'translateX(0)', opacity: 1 },
{ transform: 'translateX(300px)', opacity: 0.5 },
{ transform: 'translateX(0)', opacity: 1 }
], {
duration: 2000, // অ্যানিমেশনের সময়কাল (ms)
iterations: Infinity, // অ্যানিমেশন আনলিমিটেড বার চলবে
easing: 'ease-in-out' // অ্যানিমেশন ইজিং
});
}
}
customElements.define(AnimatedElement.is, AnimatedElement);
</script>
</dom-module>
ব্যাখ্যা:
- HTML Structure: এখানে একটি
divতৈরি করা হয়েছে যার ক্লাসbox। এটি একটি সিম্পল বক্স যা অ্যানিমেট করা হবে। একটিpaper-buttonরাখা হয়েছে যেটির মাধ্যমে অ্যানিমেশন শুরু হবে। - CSS Styling:
boxএর মধ্যে কিছু স্টাইল দেওয়া হয়েছে যেমন, ব্যাকগ্রাউন্ড কালার, সাইজ, টেক্সট সেন্টারিং, ইত্যাদি। - JavaScript (Web Animations API):
animate(): এটি Web Animations API-এর একটি ফাংশন যা অ্যানিমেশন শুরু করে। এখানে আমরা একটি সিকোয়েন্সড অ্যানিমেশন তৈরি করেছি যাtransformএবংopacityপরিবর্তন করে।- Keyframes: আমরা অ্যানিমেশন স্টেটগুলো keyframes ব্যবহার করে তৈরি করেছি। এটি শুরু, মধ্য, এবং শেষের অবস্থান নির্ধারণ করে।
- Options: অ্যানিমেশনের
duration(সময়কাল),iterations(অ্যানিমেশন কত বার চলবে), এবংeasing(অ্যানিমেশনের প্রক্রিয়া) নির্ধারণ করা হয়েছে।
ধাপ ২: Polymer উপাদান ব্যবহারে অ্যানিমেশন
এখন এই কাস্টম উপাদানটি যেকোনো HTML ডকুমেন্টে ব্যবহার করা যেতে পারে এবং আপনি বাটন ক্লিক করলে অ্যানিমেশনটি চালু হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polymer Web Animations Example</title>
<script src="https://cdn.jsdelivr.net/npm/@polymer/polymer@3.0.0/polymer-element.js"></script>
<script src="path-to-your-animated-element.js"></script> <!-- কাস্টম উপাদান ফাইল -->
</head>
<body>
<animated-element></animated-element>
</body>
</html>
এখানে, যখন আপনি "Start Animation" বাটনে ক্লিক করবেন, তখন #animatedBox উপাদানটি Web Animations API দ্বারা অ্যানিমেট হবে। বক্সটি 300px বাম থেকে ডান এবং আবার বাম দিকে যাবে, এবং এর অস্বচ্ছতা (opacity) পরিবর্তন হবে।
Web Animations API-র অন্যান্য ব্যবহার
Web Animations API আরও শক্তিশালী এবং কাস্টমাইজযোগ্য। এটি আরও উন্নত অ্যানিমেশন ফিচার প্রদান করে যেমন:
- Multiple keyframes: একাধিক keyframes ব্যবহার করে বিভিন্ন ধরণের অ্যানিমেশন তৈরি করা।
- Timeline control: আপনি একাধিক অ্যানিমেশনগুলিকে একটি নির্দিষ্ট টাইমলাইনে একত্রিত করতে পারেন।
- Synchronization: একাধিক অ্যানিমেশনকে একে অপরের সাথে সিঙ্ক্রোনাইজ করা।
উদাহরণ: একাধিক উপাদান নিয়ে অ্যানিমেশন
// একাধিক উপাদানকে একসাথে অ্যানিমেট করা
let elements = [this.$.box1, this.$.box2];
elements.forEach(element => {
element.animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1.5)' },
{ transform: 'scale(1)' }
], {
duration: 1000,
easing: 'ease-in-out',
iterations: Infinity
});
});
এখানে, দুটি উপাদান একসাথে অ্যানিমেট করা হয়েছে এবং একে অপরের সাথে সিঙ্ক্রোনাইজড অ্যানিমেশন করা হয়েছে।
Polymer Framework-এ Web Animations API ব্যবহার করে আপনি আপনার কাস্টম উপাদানগুলিতে শক্তিশালী, ইন্টারেক্টিভ, এবং ডাইনামিক অ্যানিমেশন যোগ করতে পারেন। এটি CSS অ্যানিমেশন এবং ট্রান্সফর্মেশন থেকে বেশি কাস্টমাইজযোগ্য এবং নিয়ন্ত্রণযোগ্য। Web Animations API ব্যবহার করলে আপনি অ্যানিমেশনগুলির ক্ষেত্রে আরও জটিল কার্যক্রম এবং সিঙ্ক্রোনাইজেশন করতে পারবেন যা আপনাকে আরো উন্নত ইউজার অভিজ্ঞতা দিতে সাহায্য করবে।
Read more
