Easing Effects এবং Custom Animation Parameters

jQueryUI-এর Easing Effects এবং Custom Animation Parameters আপনার ওয়েবসাইটের অ্যানিমেশন এবং ট্রানজিশনগুলোকে আরো স্মুথ এবং ইন্টারঅ্যাকটিভ করতে সাহায্য করে। Easing effects এর মাধ্যমে অ্যানিমেশনগুলোতে প্রাকৃতিক গতিবিধি এবং গতি পরিবর্তন যুক্ত করা যায়, এবং custom animation parameters ব্যবহার করে আপনি অ্যানিমেশনের আচরণ ও টাইমিং কাস্টমাইজ করতে পারেন।

Easing Effects

Easing হলো একটি অ্যানিমেশন প্রক্রিয়া যেখানে একটি উপাদানের গতির পরিবর্তনটি একটি নির্দিষ্ট পদ্ধতিতে ঘটে (যেমন, ধীরে ধীরে শুরু হয়ে দ্রুত চলে যাওয়া অথবা দ্রুত শুরু হয়ে ধীরে ধীরে শেষ হওয়া)। jQueryUI-এর easing effects অ্যানিমেশনকে আরো প্রাকৃতিক এবং চোখে পরার মতো করে তোলে।

jQueryUI এ ইজিং ইফেক্টস ব্যবহার

jQueryUI-এর easing ইফেক্টগুলি ব্যবহার করতে হলে আপনাকে jquery-ui.min.js ফাইলের সাথে easing প্লাগইনটিও যোগ করতে হবে। তবে, jQuery UI 1.8 এবং তার পরবর্তী ভার্সনে easing প্লাগইন অন্তর্ভুক্ত থাকে, তাই সাধারণত আলাদাভাবে এটি যোগ করতে হয় না।

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

Easing Effects ব্যবহার উদাহরণ

Easing এ অনেক ধরনের প্রাক-নির্ধারিত স্টাইল রয়েছে, যেমন easeInQuad, easeOutQuad, easeInOutQuad, linear, easeInBounce ইত্যাদি। আপনি এগুলির মাধ্যমে অ্যানিমেশনের গতি এবং আচরণ কাস্টমাইজ করতে পারেন।

$(document).ready(function() {
  $("#box").click(function() {
    $(this).animate({
      left: '300px',
      opacity: 0.5
    }, {
      duration: 1000, // অ্যানিমেশন সময়কাল
      easing: "easeInOutQuad", // easing ইফেক্ট
      complete: function() {
        console.log("Animation complete");
      }
    });
  });
});

এখানে easeInOutQuad easing ইফেক্টটি ব্যবহার করা হয়েছে, যার মাধ্যমে অ্যানিমেশনটি ধীরে ধীরে শুরু হয়ে মাঝামাঝি থেকে দ্রুত শেষ হবে।

প্রাথমিক easing ইফেক্টগুলির কিছু উদাহরণ

• linear: সমান গতিতে অ্যানিমেশন হবে।
• easeInQuad: শুরুতে ধীরে চলবে এবং পরে দ্রুত হবে।
• easeOutQuad: শুরুতে দ্রুত হবে এবং পরে ধীরে ধীরে শেষ হবে।
• easeInOutQuad: শুরু এবং শেষ ধীরে হবে, মাঝখানে দ্রুত হবে।
• easeInBounce: বাউন্স করার মতো শুরু হবে।
• easeOutElastic: এলাস্টিক (বাউন্সের মতো) ফিনিশ হবে।

Custom Animation Parameters

Custom animation parameters ব্যবহার করে আপনি অ্যানিমেশনের গতি, প্রস্থ, উচ্চতা, অবস্থান এবং অন্যান্য CSS প্রপার্টি কাস্টমাইজ করতে পারেন। jQuery UI-এর animate() ফাংশনের মাধ্যমে আপনি এই কাস্টম প্যারামিটারগুলি ব্যবহার করে অ্যানিমেশন কাস্টমাইজ করতে পারবেন।

Custom Animation উদাহরণ

$(document).ready(function() {
  $("#animateButton").click(function() {
    $("#box").animate({
      width: "500px",        // আকার বাড়ানো
      height: "500px",       // উচ্চতা বাড়ানো
      opacity: 0.5,          // স্বচ্ছতা পরিবর্তন
      left: "200px"          // অবস্থান পরিবর্তন
    }, {
      duration: 1000,        // 1000 মিলিসেকেন্ডে অ্যানিমেশন
      easing: "easeInOutQuad", // easing ইফেক্ট
      complete: function() {
        console.log("Custom animation complete");
      }
    });
  });
});

এখানে, animate() ফাংশন ব্যবহার করে আমরা এলিমেন্টটির আকার, অবস্থান এবং স্বচ্ছতা কাস্টমাইজ করেছি। এটি ১ সেকেন্ডে সম্পন্ন হবে এবং easeInOutQuad easing ইফেক্ট প্রয়োগ করা হয়েছে।

অ্যানিমেশন স্টাইল পরিবর্তন

আপনি অ্যানিমেশনের বিভিন্ন স্টাইল প্যারামিটার পরিবর্তন করতে পারেন, যেমন:

• height, width: উপাদানের আকার পরিবর্তন
• opacity: উপাদানের স্বচ্ছতা পরিবর্তন
• left, right, top, bottom: উপাদানের অবস্থান পরিবর্তন
• font-size, margin, padding: উপাদানের সাইজ বা প্যাডিং/মার্জিন পরিবর্তন

jQueryUI অ্যানিমেশন কাস্টমাইজেশনের অন্যান্য প্যারামিটার

1. duration: অ্যানিমেশন চলার সময়কাল। এটি মিলিসেকেন্ডে দেয়া হয়। আপনি একটি সংখ্যা (যেমন 1000) অথবা "slow" বা "fast" ব্যবহার করতে পারেন।

   duration: 1500 // 1.5 সেকেন্ড
   

2. queue: অ্যানিমেশনটি কোয়ারিতে রাখা যায়, যা পরবর্তী অ্যানিমেশনটি শেষ হওয়ার পর সম্পন্ন হবে।

   $("#box").animate({left: '300px'}, {queue: true});
   

3. step: এটি একটি callback ফাংশন, যা অ্যানিমেশনের প্রতিটি স্টেপের পরে কল হয়। এটি আরও কাস্টম লজিক প্রয়োগ করতে সহায়ক।

   $("#box").animate({
     left: "300px"
   }, {
     step: function (now, fx) {
       console.log(fx.prop + ": " + now);
     }
   });
   

4. complete: অ্যানিমেশন সম্পন্ন হলে কলব্যাক ফাংশন চালানো।

   complete: function() {
     alert("Animation Complete!");
   }
   

উপসংহার

Easing Effects এবং Custom Animation Parameters jQueryUI ব্যবহারকারীদের জন্য অ্যানিমেশনকে আরও প্রাকৃতিক, আকর্ষণীয় এবং কাস্টমাইজেবল করে তোলে। Easing ইফেক্টগুলি অ্যানিমেশনটির গতি এবং আচরণ নিয়ন্ত্রণ করে, যখন Custom Animation Parameters ব্যবহার করে আপনি একটি উপাদানের আকার, অবস্থান, স্বচ্ছতা এবং অন্যান্য CSS প্রপার্টি কাস্টমাইজ করতে পারেন। jQueryUI এর এই শক্তিশালী অ্যানিমেশন বৈশিষ্ট্যগুলি আপনার ওয়েব পেজের ইন্টারঅ্যাকশন এবং ইউজার অভিজ্ঞতাকে আরও স্মুথ এবং ইন্টারেক্টিভ করতে সাহায্য করে।