SVG Animator

SVG অ্যানিমেটর কীভাবে কাজ করে

1. SVG যোগ করুন এবং অ্যানিমেশন টাইপ বেছে নিন।
2. সময়কাল এবং ইজিং সেট করুন — ড্র-অন ইফেক্ট এক থেকে দুই সেকেন্ডের মধ্যে সবচেয়ে ভালো দেখায়।
3. রিডিউসড-মোশন গার্ড রাখুন, তারপর SVG এবং এর CSS আপনার পাতায় পেস্ট করুন।

পদ্ধতি

একটি ড্র-অন ইফেক্ট কাজ করে স্ট্রোকের ড্যাশ প্যাটার্নকে সম্পূর্ণ পাথ দৈর্ঘ্যে সেট করে এবং অফসেটকে সেই দৈর্ঘ্য থেকে শূন্যে অ্যানিমেট করে।

stroke-dasharray: L; stroke-dashoffset: L → 0, যেখানে L হলো পাথের দৈর্ঘ্য

L ভুল হওয়া হলো কেন ড্র-অন অ্যানিমেশন মাঝে মাঝে অর্ধেক আঁকা শুরু হয় বা তাড়াতাড়ি শেষ হয় — ড্যাশ প্যাটার্নটি প্রকৃত পাথ দৈর্ঘ্যের সাথে মিলতে হবে।

আমরা কীভাবে তুলনা করি

SVG অ্যানিমেটর ডিফল্টরূপে প্রতিটি অ্যানিমেশনকে রিডিউসড-মোশন কোয়েরিতে মুড়িয়ে দেয়, যা অ্যাক্সেসিবিলিটি ধাপ যা হাতে-লেখা SVG অ্যানিমেশন প্রায় সবসময় বাদ দেয়।