ইজিং ফাংশনের চিট শিট
ইজিং ফাংশন সময়ের সাথে সাথে একটি প্যারামিটারের পরিবর্তনের হার নির্দিষ্ট করে
বাস্তব জীবনের বস্তুগুলো কখনোই চলাচল শুরু বা শেষ মুহূর্তের মধ্যেই শেষ করে না, এবং কখনোই ধ্রুব গতিতে চলে না। যখন আমরা একটি ড্রয়ার খুলি, আমরা প্রথমে এটি দ্রুত টেনে নিই, এবং যখন এটি বেরিয়ে আসে তখন এটির গতি কমিয়ে দেই। মেঝেতে কিছু একটা ফেলে দিলে সেটা প্রথমে নিচের দিকে বেগ পাবে, এবং তারপর মেঝেতে আঘাত করার পর আবার উপরে উঠে আসবে।
এই পেজটি আপনাকে সঠিক ইজিং ফাংশন বাছাই করতে সাহায্য করবে।
ওপেন সোর্স
আপনার ভাষায় সাইটটি অনুবাদ করতে সাহায্য করুন
x
t
CSS
CSS এ, transition এবং animation প্রোপার্টিগুলো আপনাকে একটি ইজিং ফাংশন নির্ধারণ করতে দেয়।
.block { transition: transform 0.6s ; }
এডিট করুন cubic-bezier.com এ.
CSS এ, এই ফাংশনটি ব্যাবহার করা যাবে
@keyframes ইমপ্লিমেন্ট করর মাধ্যমে:আকার
লোড হচ্ছে...
অবস্থান
লোড হচ্ছে...
স্বচ্ছতা
লোড হচ্ছে...
PostCSS
PostCSS এ ইজিং ফাংশনটি বর্ণনা করা অনেক সহজ।. postcss-easings নামে একটি প্লাগইন আছে যা সেই সাইট থেকে ট্রানজিশনের তথ্য নেয়।
.block { transition: transform 0.6s ; }
সেই ঘোষণাটি উপরে বর্ণিত বর্ণনায় রূপান্তরিত হয়েছে।
দুর্ভাগ্যবশত, কোনও PostCSS প্লাগইন দিয়ে ইজিং ফাংশন সেট করা যাবে না। এটা করা যাবে
@keyframes এর মাধ্যমে, উপরে দেখুনগ্রেডিয়েন্ট
postcss-easing-gradients ব্যবহার করে একটি গ্রেডিয়েন্ট আঁকা সম্ভব।
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
গাণিতিক ফাংশন
নিচে আপনি টাইপস্ক্রিপ্টে লেখা এই ইজিং ফাংশনের কোড দেখতে পাবেন। চলক x অ্যানিমেশনের পরম অগ্রগতিকে প্রতিনিধিত্ব করে 0 (অ্যানিমেশনের শুরু) এবং 1 (অ্যানিমেশনের শেষ) এর সীমানায়।
function (x: number): number {
}নিচে আপনি টাইপস্ক্রিপ্টে লেখা এই ইজিং ফাংশনের কোড দেখতে পাবেন। চলক x অ্যানিমেশনের পরম অগ্রগতিকে প্রতিনিধিত্ব করে 0 (অ্যানিমেশনের শুরু) এবং 1 (অ্যানিমেশনের শেষ) এর সীমানায়।
function (x: number): number {
}পরিবর্তনের জন্য ইজিং চেক করুন:
This ফাংশন:
This ফাংশন
রৈখিক ফাংশন:
রৈখিক ফাংশন