CSS কিউবিক বেজিয়ার জেনারেটরের কার্যপদ্ধতি
CSS কিউবিক বেজিয়ার জেনারেটর একটি ভিজ্যুয়াল টুল যা ওয়েব অ্যানিমেশন এবং ট্রানজিশনের জন্য কাস্টম ইজিং কার্ভ (easing curve) তৈরি করতে সাহায্য করে। এই টুলের ইন্টারফেসে দুটি কন্ট্রোল পয়েন্ট বা হ্যান্ডেল টেনে কার্ভের আকৃতি পরিবর্তন করা যায়। কার্ভটি সামঞ্জস্য করার সময়, একটি বিন্দু সেই কার্ভের গতি অনুসরণ করে চলমান দেখায়। এর পাশেই একটি স্থির গতিতে চলমান বিন্দুর সাথে তুলনা করে ইজিং ইফেক্টটি সরাসরি পর্যবেক্ষণ করা যায়। কার্ভের আকৃতি পরিবর্তনের সাথে সাথে টুলটি স্বয়ংক্রিয়ভাবে সংশ্লিষ্ট cubic-bezier() মান তৈরি করে, যা কপি করে সরাসরি CSS কোডে ব্যবহার করা যায়।
ইনপুট এবং নিয়ন্ত্রণসমূহ
টুলটিতে ইজিং কার্ভের আকৃতি এবং গতি নির্ধারণের জন্য নির্দিষ্ট কিছু ইনপুট ও নিয়ন্ত্রণ ব্যবস্থা রয়েছে:
- দুটি হ্যান্ডেল টানা: মাউস বা টাচ ইন্টারফেসের সাহায্যে এই হ্যান্ডেল দুটি টেনে ইজিং কার্ভের আকৃতি পরিবর্তন করা যায়।
- প্রথম কন্ট্রোল পয়েন্ট X (First control point X): এটি প্রথম কন্ট্রোল পয়েন্টের অনুভূমিক অবস্থান নির্দেশ করে, যার মান অবশ্যই ০ থেকে ১-এর মধ্যে হতে হবে।
- প্রথম কন্ট্রোল পয়েন্ট Y (First control point Y): এটি প্রথম কন্ট্রোল পয়েন্টের উল্লম্ব অবস্থান নির্দেশ করে, যার মান -০.৭০ থেকে ১.৭০-এর মধ্যে সীমাবদ্ধ।
- দ্বিতীয় কন্ট্রোল পয়েন্ট X (Second control point X): এটি দ্বিতীয় কন্ট্রোল পয়েন্টের অনুভূমিক অবস্থান নির্দেশ করে, যার মান ০ থেকে ১-এর মধ্যে হতে হবে।
- দ্বিতীয় কন্ট্রোল পয়েন্ট Y (Second control point Y): এটি দ্বিতীয় কন্ট্রোল পয়েন্টের উল্লম্ব অবস্থান নির্দেশ করে, যার মান -০.৭০ থেকে ১.৭০-এর মধ্যে সীমাবদ্ধ।
- প্রিসেট নির্বাচন: ব্যবহারকারী চাইলে সরাসরি কিছু পূর্বনির্ধারিত প্রিসেট বেছে নিতে পারেন, যেমন: "ease", "ease-in", "ease-out", "ease-in-out", "ব্যাক ইন", "ব্যাক আউট", অথবা "ব্যাক ইন-আউট"।
আউটপুট এবং ফলাফল
টুলটি ইন্টারফেসে নিম্নলিখিত আউটপুটগুলো প্রদর্শন করে:
- আপনার কার্ভ: এটি ব্যবহারকারীর তৈরি করা ইজিং কার্ভের একটি ভিজ্যুয়াল গ্রাফিক্যাল উপস্থাপনা।
- cubic-bezier(x1, y1, x2, y2): এটি তৈরি হওয়া কার্ভের গাণিতিক স্থানাঙ্ক ভিত্তিক CSS ফাংশন মান।
- Copied: ব্যবহারকারী যখন
cubic-bezier()মানটি সফলভাবে কপি করেন, তখন এই স্ট্যাটাসটি প্রদর্শিত হয়।
নিয়মাবলী এবং বিশেষ ক্ষেত্রসমূহ
CSS-এ কিউবিক বেজিয়ার কার্ভ ব্যবহারের ক্ষেত্রে কিছু নির্দিষ্ট গাণিতিক নিয়ম ও সীমাবদ্ধতা রয়েছে:
- কার্ভটি সর্বদা গ্রাফের নিচে-বামে (শুরু) থেকে শুরু হয়ে উপরে-ডানে (শেষ) গিয়ে শেষ হয়।
- গ্রাফের অনুভূমিক অক্ষ (X-axis) সময় নির্দেশ করে যা বাম থেকে ডানে অগ্রসর হয় এবং উল্লম্ব অক্ষ (Y-axis) অ্যানিমেশনের অগ্রগতি নির্দেশ করে যা নিচের থেকে উপরের দিকে যায়।
- কন্ট্রোল পয়েন্টগুলোর X মানের সীমা কঠোরভাবে ০ থেকে ১-এর মধ্যে সীমাবদ্ধ। ইনপুট ফিল্ডে এই সীমার বাইরে কোনো মান (যেমন
9) লিখে ফোকাস সরিয়ে নিলে তা স্বয়ংক্রিয়ভাবে সর্বোচ্চ সীমা1-এ রূপান্তরিত হয়। - কন্ট্রোল পয়েন্টগুলোর Y মানের সীমা -০.৭০ থেকে ১.৭০ পর্যন্ত হতে পারে। Y মান ০-এর নিচে বা ১-এর উপরে নিয়ে অ্যানিমেশনে ওভারশুট (overshoot) বা পুল-ব্যাক (pull-back) ইফেক্ট তৈরি করা যায়।
- কোনো সংখ্যাসূচক ইনপুট ফিল্ড সম্পূর্ণ খালি করে ফোকাস সরিয়ে নিলে তা স্বয়ংক্রিয়ভাবে পূর্ববর্তী বৈধ মানে ফিরে যায়।
- কন্ট্রোল পয়েন্টের হ্যান্ডেল সিলেক্ট থাকা অবস্থায় কিবোর্ডের Left arrow কী চাপলে মান সূক্ষ্মভাবে পরিবর্তিত হয়, যেমন মান কমে
0.99হতে পারে। - "ব্যাক আউট" প্রিসেটটি নির্বাচন করলে তা স্বয়ংক্রিয়ভাবে
cubic-bezier(0.34, 1.56, 0.64, 1)মানটি সেট করে। - ইনপুট ফিল্ড খালি থাকলে বা সংখ্যা ছাড়া অন্য কিছু লেখা হলে টুলটি সঠিক মানের জন্য অপেক্ষা করে।
- মান কপি করার পর শুধুমাত্র সফলতার স্ট্যাটাস প্রদর্শিত হয়, কোনো ব্যর্থতার প্রম্পট নেই।
- একটি একক
cubic-bezierফাংশন দিয়ে অ্যানিমেশনের শুরুতে বা শেষে ওভারশুট ইফেক্ট তৈরি করা গেলেও, এটি দিয়ে বাউন্স (bounce) বা ইলাস্টিক (elastic) ইফেক্টের মতো একাধিকবার দিক পরিবর্তনকারী জটিল অ্যানিমেশন তৈরি করা সম্ভব নয়।
ডেটা প্রসেসিং এবং গোপনীয়তা
এই টুলের সমস্ত গাণিতিক হিসাব এবং কার্ভ রেন্ডারিং সরাসরি ব্যবহারকারীর ওয়েব ব্রাউজারে সম্পন্ন হয়। ব্রাউজারের বাইরে কোনো সার্ভারে ডেটা পাঠানো হয় না এবং আপনার কোনো সেটিংস BroBroGo-তে আপলোড করা হয় না।
সাধারণ জিজ্ঞাসা (FAQ)
দুটি হ্যান্ডেল এবং চারটি সংখ্যার অর্থ কী?
কার্ভটি নিচে-বামে (শুরু) থেকে উপরে-ডানে (শেষ) পর্যন্ত চলে, যেখানে সময় বাম থেকে ডানে এবং অগ্রগতি উপরের দিকে যায়। দুটি হ্যান্ডেল হলো কন্ট্রোল পয়েন্ট যা এটিকে বাঁকায় — প্রতিটির একটি X এবং একটি Y থাকে, তাই একসাথে তারা cubic-bezier(x1, y1, x2, y2)। X সবসময় ০ এবং ১-এর মধ্যে থাকে, যখন Y গতিকে ওভারশুট করতে বা স্থির হওয়ার আগে পেছনে টানতে উপরের দিকে বা নিচের দিকে যেতে পারে।
আমি কীভাবে আমার CSS-এ এই মানটি ব্যবহার করব?
cubic-bezier() কপি করুন এবং যেখানে টাইমিং ফাংশন প্রয়োজন সেখানে পেস্ট করুন — transition-timing-function, animation-timing-function, অথবা শর্টহ্যান্ডে, যেমন: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)। ease, ease-in, ease-out এবং ease-in-out কিওয়ার্ডগুলো মূলত নির্দিষ্ট cubic-bezier কার্ভ, তাই এই প্রিসেটগুলোর যেকোনো একটি বেছে নিলে আপনি কিওয়ার্ডের পেছনের সঠিক মানটি দেখতে পাবেন।
এটি কি বাউন্স বা ইলাস্টিক ইফেক্ট তৈরি করতে পারে?
শুধুমাত্র এটি দিয়ে সম্ভব নয়। একটি একক cubic-bezier পূর্বানুমান (anticipate) এবং ওভারশুট (overshoot) করতে পারে — "back" প্রিসেটগুলো ঠিক এটি করার জন্য একটি হ্যান্ডেলকে বক্সের বাইরে টেনে নেয় — তবে এটি কেবল একদিকে গিয়ে স্থির হতে পারে। বাউন্স (bounce) এবং ইলাস্টিক (elastic) ইফেক্ট বেশ কয়েকবার দিক পরিবর্তন করে, যা কোনো একক cubic-bezier প্রকাশ করতে পারে না; এগুলোর জন্য CSS keyframes বা অনেকগুলো স্টপ সহ linear() ফাংশন প্রয়োজন।