এসভিজি (SVG) ফরম্যাটে গ্রাফিক্স তৈরি করার পাশাপাশি, আপনি CSS (Cascading Style Sheets) এবং SMIL (Synchronized Multimedia Integration Language) ব্যবহার করে অ্যানিমেশনও তৈরি করতে পারেন। এই দুইটি পদ্ধতি দিয়ে আপনি এসভিজি গ্রাফিক্সের মধ্যে ডায়নামিক মুভমেন্ট এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন যোগ করতে পারবেন।
CSS দিয়ে SVG অ্যানিমেশন তৈরি করা
CSS ব্যবহার করে এসভিজি গ্রাফিক্সের মধ্যে অ্যানিমেশন তৈরি করা সহজ এবং বেশ জনপ্রিয়। CSS-এর @keyframes রুল এবং অন্যান্য প্রপার্টি ব্যবহার করে আপনি অ্যানিমেশন পরিচালনা করতে পারেন।
CSS অ্যানিমেশন এর মাধ্যমে অ্যানিমেটেড সিলেক্টেড এলিমেন্ট
@keyframes: এটি CSS অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এখানে আপনি চিত্রের অবস্থান, আকার, রঙ ইত্যাদি পরিবর্তন করতে পারেন।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue">
<style>
@keyframes moveCircle {
0% {
cx: 50;
cy: 50;
}
50% {
cx: 150;
cy: 50;
}
100% {
cx: 50;
cy: 50;
}
}
circle {
animation: moveCircle 2s infinite;
}
</style>
</circle>
</svg>
ব্যাখ্যা:
@keyframes moveCircle: এটি সিলেক্টেড এলিমেন্টের অ্যানিমেশন তৈরি করে। এখানে,cxএবংcyএর মান পরিবর্তন করা হয়, যার ফলে বৃত্তটি অনুভূমিকভাবে চলে।animation: moveCircle 2s infinite: এটি অ্যানিমেশনটি 2 সেকেন্ডে একবার সম্পন্ন হবে এবং এটি পুনরাবৃত্তি হবে।
CSS মাধ্যমে রঙ পরিবর্তন অ্যানিমেশন
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="blue">
<style>
@keyframes changeColor {
0% {
fill: blue;
}
50% {
fill: green;
}
100% {
fill: blue;
}
}
rect {
animation: changeColor 3s infinite;
}
</style>
</rect>
</svg>
ব্যাখ্যা:
- এখানে,
fillএর মাধ্যমে রঙ পরিবর্তন করা হয়েছে। অ্যানিমেশনটি বৃত্তের রঙকে নীল থেকে সবুজ এবং আবার নীল করবে।
SMIL (Synchronized Multimedia Integration Language) দিয়ে SVG অ্যানিমেশন
SMIL একটি XML ভাষা, যা মিডিয়া কন্টেন্টের সিঙ্ক্রোনাইজেশন এবং অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। SMIL ব্যবহার করে এসভিজি উপাদানের অবস্থান, আকার, রঙ ইত্যাদি পরিবর্তন করা যায়। যদিও SMIL বেশ কিছু ব্রাউজারে সমর্থন হারিয়েছে, তবুও এটি কিছু ক্ষেত্রে ব্যবহৃত হতে পারে।
SMIL অ্যানিমেশন
<animate>: এটি এসভিজি অ্যানিমেশনের জন্য একটি জনপ্রিয় SMIL ট্যাগ। এর মাধ্যমে আপনি এসভিজি উপাদানগুলির বৈশিষ্ট্য যেমন অবস্থান, আকার, রঙ ইত্যাদি পরিবর্তন করতে পারেন।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue">
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
ব্যাখ্যা:
<animate>ট্যাগের মধ্যেattributeName="cx"দ্বারা আপনিcxঅ্যাট্রিবিউটটি অ্যানিমেট করতে বলেছেন।fromএবংtoদ্বারা স্টার্ট এবং এন্ড পজিশন নির্ধারণ করা হয়েছে।dur="2s": অ্যানিমেশনটি 2 সেকেন্ডে সম্পন্ন হবে।repeatCount="indefinite": এটি অ্যানিমেশনটি বারবার পুনরাবৃত্তি হবে এমনটি নির্দেশ করে।
SMIL দিয়ে রঙ পরিবর্তন অ্যানিমেশন
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="blue">
<animate attributeName="fill" from="blue" to="green" dur="3s" repeatCount="indefinite" />
</rect>
</svg>
ব্যাখ্যা:
- এখানে,
fillঅ্যাট্রিবিউটটি অ্যানিমেট করা হয়েছে।from="blue"এবংto="green"এর মাধ্যমে রঙ পরিবর্তন করা হয়।
CSS এবং SMIL এর মধ্যে পার্থক্য
- CSS: এটি স্টাইলিংয়ের জন্য ব্যবহৃত হলেও, আপনি
@keyframesব্যবহার করে এসভিজি উপাদানগুলির মধ্যে অ্যানিমেশন যোগ করতে পারেন। এটি অধিক ব্রাউজারে সমর্থিত এবং আধুনিক ওয়েব ডেভেলপমেন্টের জন্য জনপ্রিয়। - SMIL: এটি XML ভিত্তিক এবং মূলত এসভিজি গ্রাফিক্সের জন্য অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। তবে এটি কিছু ব্রাউজারে সমর্থিত নয় এবং এর ব্যবহার কমে যাচ্ছে।
সারাংশ
এসভিজি অ্যানিমেশন তৈরি করতে CSS এবং SMIL দুটোই কার্যকরী উপায়। CSS ব্যবহার করে আপনি সহজেই স্টাইল এবং অ্যানিমেশন তৈরি করতে পারেন, যা ব্রাউজারের মধ্যে ব্যাপকভাবে সমর্থিত। SMIL আরও শক্তিশালী অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়, তবে এর ব্যবহার আধুনিক ওয়েব ব্রাউজারে কিছুটা সীমাবদ্ধ। এসভিজি অ্যানিমেশন ওয়েব পেজকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
Read more
