এসভিজি (SVG) গ্রাফিক্সের একটি শক্তিশালী সুবিধা হলো এটি অ্যানিমেট করা সম্ভব। এসভিজি অ্যানিমেশন ওয়েব ডিজাইন এবং ডেভেলপমেন্টে অত্যন্ত জনপ্রিয় হয়ে উঠেছে, কারণ এটি গ্রাফিক্সকে ডায়নামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। এসভিজি অ্যানিমেশন মূলত CSS এবং JavaScript এর মাধ্যমে তৈরি করা হয়, তবে এসভিজি এর নিজস্ব <animate>, <animateTransform>, এবং <set> ট্যাগও অ্যানিমেশন তৈরি করতে ব্যবহৃত হতে পারে।
SVG অ্যানিমেশন তৈরি করার পদ্ধতি
এসভিজি অ্যানিমেশন তৈরি করার প্রধান পদ্ধতি দুটি: CSS অ্যানিমেশন এবং এসভিজি ট্যাগ ব্যবহার করে অ্যানিমেশন। নিচে প্রতিটির মৌলিক ধারণা দেওয়া হল।
1. CSS দিয়ে SVG অ্যানিমেশন
এসভিজি চিত্রের উপর CSS স্টাইলিং এবং অ্যানিমেশন যোগ করতে পারবেন। CSS অ্যানিমেশন এসভিজি গ্রাফিক্সের বিভিন্ন উপাদান যেমন রঙ, আকার, অবস্থান ইত্যাদি পরিবর্তন করতে ব্যবহার করা হয়।
উদাহরণ:
<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>
ব্যাখ্যা:
attributeName: আপনি যেই বৈশিষ্ট্যটি অ্যানিমেট করতে চান, যেমনcx(বৃত্তের অনুভূমিক অবস্থান),cy,rইত্যাদি।from: অ্যানিমেশনের শুরু অবস্থান।to: অ্যানিমেশনের শেষ অবস্থান।dur: অ্যানিমেশনের দৈর্ঘ্য বা সময়।repeatCount: অ্যানিমেশনের পুনরাবৃত্তি সংখ্যা, এখানেindefiniteমানে একে একাধিক বার চলতে থাকবে।
এখানে, বৃত্তটি অনুভূমিকভাবে স্থানান্তরিত হবে এবং এটি অবিরত চলতে থাকবে।
2. SVG ট্যাগ ব্যবহার করে অ্যানিমেশন
এসভিজি-তে আপনি কিছু বিশেষ ট্যাগ ব্যবহার করে সরাসরি অ্যানিমেশন করতে পারেন। এর মধ্যে <animate>, <animateTransform>, এবং <set> ট্যাগ ব্যবহার করা হয়।
<animate> ট্যাগ
এই ট্যাগটি এসভিজি উপাদানের গুণগত পরিবর্তন করতে ব্যবহৃত হয়। আপনি এর মাধ্যমে একটি নির্দিষ্ট অ্যাট্রিবিউট (যেমন fill, stroke, cx, cy ইত্যাদি) অ্যানিমেট করতে পারেন।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue">
<animate attributeName="fill" values="blue;red;green;blue" dur="4s" repeatCount="indefinite" />
</circle>
</svg>
ব্যাখ্যা:
attributeName="fill": আপনি যেই গুণটি অ্যানিমেট করতে চান (এখানেfillযা রঙ নির্দেশ করে)।values="blue;red;green;blue": একাধিক রঙ নির্ধারণ করা হয়, এবং অ্যানিমেশন চলাকালে রঙটি একের পর এক পরিবর্তিত হবে।dur="4s": অ্যানিমেশনের দৈর্ঘ্য ৪ সেকেন্ড।repeatCount="indefinite": অ্যানিমেশনটি অবিরত চলতে থাকবে।
<animateTransform> ট্যাগ
এই ট্যাগটি কোনো এসভিজি উপাদানের রূপান্তর (যেমন রোটেশন, স্কেলিং, ট্রান্সলেশন) অ্যানিমেট করতে ব্যবহৃত হয়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="40" fill="blue">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite" />
</circle>
</svg>
ব্যাখ্যা:
type="rotate": রোটেশন অ্যানিমেশন করা হচ্ছে।from="0 100 100": রোটেশন শুরু হবে 0 ডিগ্রি থেকে, এবং ঘূর্ণন কেন্দ্রবিন্দু হবে (100, 100)।to="360 100 100": রোটেশন শেষ হবে 360 ডিগ্রিতে।dur="4s": অ্যানিমেশন চলার সময় ৪ সেকেন্ড।repeatCount="indefinite": অ্যানিমেশনটি পুনরাবৃত্তি হবে।
<set> ট্যাগ
এটি একটি নির্দিষ্ট অ্যাট্রিবিউটের মান পরিবর্তন করতে ব্যবহৃত হয়, যা স্থায়ীভাবে পরিবর্তন হয়। এটি সাধারণত একবার এক্সিকিউট হয় এবং কোনো পুনরাবৃত্তি নেই।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue">
<set attributeName="fill" to="green" begin="1s" dur="2s" />
</circle>
</svg>
ব্যাখ্যা:
attributeName="fill": রঙ পরিবর্তন করা হবে।to="green": রঙটি সবুজ হয়ে যাবে।begin="1s": ১ সেকেন্ড পরে অ্যানিমেশন শুরু হবে।dur="2s": অ্যানিমেশনটির সময়কাল ২ সেকেন্ড।
সারাংশ
এসভিজি অ্যানিমেশন ওয়েব ডেভেলপমেন্টে একটি শক্তিশালী এবং কার্যকরী টুল। আপনি CSS, JavaScript, এবং এসভিজি ট্যাগগুলির মাধ্যমে বিভিন্ন ধরনের অ্যানিমেশন তৈরি করতে পারেন, যা ওয়েব পেজে গ্রাফিক্সের জন্য ইন্টারঅ্যাকটিভ এবং ডায়নামিক এলিমেন্ট যোগ করতে সহায়ক। <animate>, <animateTransform>, এবং <set> ট্যাগের মাধ্যমে সরাসরি এসভিজি উপাদানগুলির অ্যানিমেশন করা সম্ভব, যা ওয়েবসাইটের ভিজ্যুয়াল প্রেজেন্টেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য উপভোগ্য করে তোলে।
Read more
