Custom Easing Functions

D3.js-এ Custom Easing Functions ব্যবহার করে অ্যানিমেশন এবং ট্রান্সফর্মেশনগুলিকে আরও ন্যাচুরাল এবং কাস্টমাইজড করা সম্ভব। Easing হল একটি কৌশল যা অ্যানিমেশন চলাকালীন মানের গতি বা প্রক্রিয়ায় পরিবর্তন ঘটায়, যেমন দ্রুত শুরু হওয়া, ধীর হয়ে শেষ হওয়া, অথবা একসাথে শুরুর পরে ধীর হতে থাকা। D3.js-এ আমরা d3.ease() ফাংশন ব্যবহার করে বিভিন্ন প্রাক-নির্ধারিত easing ফাংশন এবং কাস্টম easing ফাংশন তৈরি করতে পারি।

১. D3.js এ Easing Functions

D3.js এ easing functions হল বিভিন্ন ফাংশন যা ট্রান্সফরমেশন বা অ্যানিমেশন চলাকালীন গতি নিয়ন্ত্রণ করে। D3.js এর easing ফাংশনগুলি ডিফল্টভাবে নিম্নলিখিত কিছু প্রধান টাইপে আসে:

• easeLinear: সাধারণ লিনিয়ার গতি (constant speed)
• easeCubicIn: শুরুতে ধীর, শেষে দ্রুত (acceleration at the start)
• easeCubicOut: শুরুতে দ্রুত, শেষে ধীর (deceleration at the end)
• easeBounceIn: বাউন্সি, নিচে থেকে উপরে উঠছে (bouncy effect)
• easeElastic: স্ট্রেচ এবং রিলিজ, ইলাস্টিক মুভমেন্ট
• easeSinIn, easeSinOut: সাইন তরঙ্গের মতো গতি

ডিফল্ট easing ফাংশনগুলির পাশাপাশি, D3.js-এ আপনি Custom Easing Functions তৈরি করতে পারেন, যা আপনাকে আরও কাস্টমাইজড অ্যানিমেশন তৈরি করতে সহায়ক হয়।

২. Custom Easing Functions

Custom Easing Functions তৈরি করতে, আপনি d3.ease() এর মাধ্যমে একটি কাস্টম ম্যাথমেটিক্যাল ফাংশন পাস করতে পারেন যা অ্যানিমেশনের গতি নিয়ন্ত্রণ করবে।

২.১ কাস্টম Easing Function তৈরি করা

আপনি যদি একটি সম্পূর্ণ কাস্টম easing ফাংশন তৈরি করতে চান, যা আপনার অ্যানিমেশনটির গতি নির্ধারণ করবে, তাহলে আপনি একটি নিজস্ব ফাংশন তৈরি করতে পারেন। D3.js-এ easing functions সাধারণত 0 থেকে 1 এর মধ্যে মান গ্রহণ করে, এবং আপনি এর মধ্যে মানে পরিবর্তন করতে পারেন।

উদাহরণ: কাস্টম Easing ফাংশন তৈরি করা

// কাস্টম easing ফাংশন তৈরি
function customEase(t) {
  return Math.pow(t, 3); // এখানে আমরা কিউবিক easing ব্যবহার করছি
}

// ডেটা সেট
const data = [30, 50, 80, 120, 200];

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 300);

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 40)
   .attr("height", 0)  // শুরুতে উচ্চতা 0
   .attr("x", (d, i) => i * 60)
   .attr("y", 300) // শুরুতে Y কোঅর্ডিনেট 300
   .style("fill", "steelblue")
   .transition() // অ্যানিমেশন শুরু
   .duration(1000) // অ্যানিমেশন সময়কাল
   .ease(customEase) // কাস্টম easing ফাংশন
   .attr("height", d => d * 3)  // উচ্চতা অনুযায়ী পরিবর্তন
   .attr("y", d => 300 - d * 3);  // Y কোঅর্ডিনেট আপডেট

এখানে, customEase ফাংশন একটি কিউবিক easing ফাংশন তৈরি করেছে, যা একটি গ্রাজুয়ালি বৃদ্ধি পাওয়া গতি প্রয়োগ করে। আপনি এখানে যে কোন কাস্টম ম্যাথমেটিক্যাল এক্সপ্রেশন ব্যবহার করতে পারেন, যেমন:

// কাস্টম easing ফাংশন উদাহরণ
function customEase(t) {
  return Math.sin(t * Math.PI / 2);  // সাইন ফাংশন ভিত্তিক easing
}

এই ফাংশনটি অ্যানিমেশনটিকে সাইন তরঙ্গের মতো প্রাকৃতিক গতি দিবে।

৩. D3.js তে Custom Easing এর সাথে Animation

D3.js-এ কাস্টম easing ফাংশন ব্যবহৃত হলে, এটি আপনার অ্যানিমেশনকে আরও স্লো, ফাস্ট বা আরও ন্যাচুরাল হতে সাহায্য করে। নিচের উদাহরণে, bar chart-এর বারগুলির উচ্চতা পরিবর্তন হতে দেখা যাবে কাস্টম easing ফাংশনের মাধ্যমে।

উদাহরণ: কাস্টম easing ফাংশন সহ বার চার্ট অ্যানিমেশন

// ডেটাসেট
const data = [40, 80, 120, 150, 200];

// Custom easing function
function customEase(t) {
  return Math.sqrt(t); // স্কয়ার রুট easing
}

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 300);

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 40)
   .attr("height", 0)  // শুরুতে উচ্চতা 0
   .attr("x", (d, i) => i * 60)
   .attr("y", 300) // শুরুতে Y কোঅর্ডিনেট 300
   .style("fill", "orange")
   .transition() // অ্যানিমেশন শুরু
   .duration(1500) // অ্যানিমেশন সময়কাল
   .ease(customEase) // কাস্টম easing ফাংশন
   .attr("height", d => d * 2) // উচ্চতা পরিবর্তন
   .attr("y", d => 300 - d * 2);  // Y কোঅর্ডিনেট আপডেট

এখানে, Math.sqrt(t) একটি স্কয়ার রুট easing ফাংশন তৈরি করেছে, যার মাধ্যমে অ্যানিমেশনটি ধীরগতিতে শুরু হবে এবং শেষে দ্রুত হবে।

৪. D3.js এর প্রাক-নির্ধারিত Easing Functions

D3.js-এ বেশ কিছু প্রাক-নির্ধারিত easing ফাংশন রয়েছে, যেমন:

• easeLinear: লিনিয়ার অ্যানিমেশন, মানের গতি একই থাকবে।
• easeCubicIn: ধীর গতিতে শুরু, দ্রুত গতিতে শেষ।
• easeCubicOut: দ্রুত গতিতে শুরু, ধীর গতিতে শেষ।
• easeElastic: ইলাস্টিক রিটার্নের মত গতি।
• easeBounce: বাউন্সি গতি।
• easeSinIn: সাইন ফাংশন অনুসরণ করে ধীর গতিতে শুরু।
• easeSinOut: সাইন ফাংশন অনুসরণ করে দ্রুত গতিতে শেষ।

উদাহরণ:

d3.select("rect")
  .transition()
  .duration(1000)
  .ease(d3.easeBounce) // Bounce easing ফাংশন
  .attr("height", 200)
  .attr("y", 100);

Custom Easing Functions D3.js-এ অ্যানিমেশনকে আরও কাস্টমাইজড এবং প্রাকৃতিক করে তোলে। আপনি যদি চান, আপনি নিজে একটি easing ফাংশন তৈরি করতে পারেন বা D3.js এর প্রাক-নির্ধারিত easing ফাংশনগুলিও ব্যবহার করতে পারেন। d3.ease() এবং কাস্টম easing ফাংশনগুলির মাধ্যমে, আপনি বার চার্ট বা যেকোনো ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং স্মুথ করতে পারেন।