CSS কিউবিক-বেজিয়ার জেনারেটর

CSS কিউবিক-বেজিয়ার জেনারেটর কী?

CSS কিউবিক-বেজিয়ার জেনারেটর হল CSS ট্রানজিশন ও অ্যানিমেশনে ব্যবহৃত ইজিং ফাংশনের একটি বিনামূল্যের ভিজ্যুয়াল এডিটর, যা ফ্রন্ট-এন্ড ডেভেলপার ও মোশন ডিজাইনারদের জন্য তৈরি। cubic-bezier মোডে আপনি একটি কার্ভ গড়তে দুটি নিয়ন্ত্রণ বিন্দু টানেন (বা টাইপ করেন): x মানগুলো বৈধ 0–1 পরিসরে থাকে, আর y মানগুলো ওভারশুট ও অ্যান্টিসিপেশন তৈরি করতে 1-এর উপরে বা 0-এর নিচে যেতে পারে। steps() মোড সমন্বয়যোগ্য ধাপসংখ্যা ও একটি জাম্প টার্ম দিয়ে ধাপে-ধাপে টাইমিং কভার করে — jump-start, jump-end, jump-none বা jump-both, যেখানে step-start ও step-end হল steps(1, …)। লাইভ অ্যানিমেশন প্রিভিউ আপনার নির্ধারিত সময়কালে একটি চলমান ও স্কেল হওয়া বাক্সের উপর বর্তমান ইজিং চালায়, আপনি তুলনার জন্য যেকোনো প্রিসেটকে ঘোস্ট কার্ভ হিসেবে উপরে বসাতে পারেন এবং বিদ্যমান একটি cubic-bezier() বা steps() স্ট্রিং ইমপোর্ট করতে পারেন। আপনার transition-timing-function বা animation-timing-function-এর জন্য সঠিক ঘোষণাটি কপি করুন।

CSS কিউবিক-বেজিয়ার জেনারেটর কীভাবে ব্যবহার করবেন

1. উপরে cubic-bezier() বা steps() মোড বেছে নিন, অথবা সেটিংস খুলে ease, ease-in-out বা linear-এর মতো একটি প্রিসেট দিয়ে শুরু করুন।
2. cubic-bezier মোডে, গ্রাফের দুটি হ্যান্ডেল টানুন বা x1, y1, x2 এবং y2-এর সঠিক মান টাইপ করুন; ওভারশুটের জন্য y-কে 1-এর উপরে ঠেলুন।
3. steps() মোডে, ধাপের সংখ্যা নির্ধারণ করুন এবং সিঁড়ি আঁকতে একটি জাম্প টার্ম (jump-start, jump-end, jump-none বা jump-both) বেছে নিন।
4. চলমান ও স্কেল হওয়া বাক্সে লাইভ অ্যানিমেশন চালাতে চালান চাপুন, এবং টাইমিং অনুভব করতে সময়কাল সেকেন্ডে সমন্বয় করুন।
5. সেটিংসে একটি তুলনা কার্ভ বেছে নিন যাতে একই গ্রাফে একটি প্রিসেট ঘোস্ট হিসেবে বসে, অথবা ইমপোর্টে একটি মান পেস্ট করে প্রয়োগ করুন।
6. তৈরি হওয়া cubic-bezier() বা steps() মান আপনার transition-timing-function বা animation-timing-function-এ কপি করুন।

উদাহরণ

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

steps মোড, N 4, jump-end

steps(4, jump-end)

সচরাচর জিজ্ঞাসিত প্রশ্ন

cubic-bezier-এর চারটি সংখ্যার অর্থ কী?

এগুলো দুটি নিয়ন্ত্রণ বিন্দুর স্থানাঙ্ক: প্রথম বিন্দুর জন্য x1, y1 এবং দ্বিতীয়টির জন্য x2, y2। কার্ভ সবসময় (0,0)-তে শুরু হয় এবং (1,1)-তে শেষ হয়; নিয়ন্ত্রণ বিন্দুগুলো এর মাঝখানটা বাঁকায়, যা নিয়ন্ত্রণ করে অ্যানিমেটেড প্রপার্টি সময়ের সাথে কীভাবে দ্রুত ও ধীর হয়।

steps() মোড কীসের জন্য?

steps() মসৃণভাবে ইন্টারপোলেট করার বদলে নির্দিষ্টসংখ্যক মানের মধ্যে লাফ দেয় — স্প্রাইট অ্যানিমেশন, টিক-করা কাউন্টার বা ফ্রেম-বাই-ফ্রেম প্রভাবের জন্য উপযোগী। ধাপের সংখ্যা ও একটি জাম্প টার্ম সেট করুন: jump-start, jump-end, jump-none বা jump-both। step-start সমান steps(1, jump-start) এবং step-end সমান steps(1, jump-end)।

লাইভ অ্যানিমেশন প্রিভিউ কীভাবে কাজ করে?

চালান চাপুন, আর বাক্সটি আপনার বর্তমান ইজিং ব্যবহার করে ট্র্যাক জুড়ে চলে ও স্কেল হয়, সামনে-পিছনে পুনরাবৃত্তি করে। ধীর বা দ্রুত করতে সময়কাল সেকেন্ডে বদলান; এটি বিশুদ্ধ CSS অ্যানিমেশন ব্যবহার করে এবং আপনার cubic-bezier() বা steps() মানকে টাইমিং ফাংশন হিসেবে নেয়।

আমি কি বিদ্যমান একটি ইজিং মান ইমপোর্ট করতে পারি?

হ্যাঁ। একটি cubic-bezier(...) বা steps(...) মান — কিংবা ease-in-out, step-start বা step-end-এর মতো একটি কীওয়ার্ড — ইমপোর্ট ফিল্ডে পেস্ট করে প্রয়োগ করুন; এডিটর এটিকে আবার নিয়ন্ত্রণ বিন্দু বা ধাপ সেটিংসে পার্স করে।

আমার ডেটা কি কোনো সার্ভারে পাঠানো হয়?

না। পুরো এডিটরটি JavaScript দিয়ে আপনার ব্রাউজারে চলে — নিয়ন্ত্রণ বিন্দু ও কার্ভ স্থানীয়ভাবে গণনা করা হয় এবং কখনও আপলোড হয় না, তাই এটি ব্যক্তিগতভাবে এবং পৃষ্ঠা একবার লোড হওয়ার পর অফলাইনেও কাজ করে।