JavaScript ব্যবহার করে Animation কন্ট্রোল করা

Riot.js-এ JavaScript ব্যবহার করে animation কন্ট্রোল করা সম্ভব। আপনি CSS অথবা JavaScript-এর মাধ্যমে বিভিন্ন অ্যানিমেশন প্রভাব যোগ করতে পারেন। Riot.js নিজে কোনো অ্যানিমেশন লাইব্রেরি প্রদান না করলেও, আপনি JavaScript বা CSS অ্যানিমেশন ব্যবহার করে UI এ প্রভাব দিতে পারবেন। এখানে আমরা বিভিন্ন পদ্ধতি ব্যবহার করে Riot.js এ অ্যানিমেশন কন্ট্রোল করার পদ্ধতি দেখব।

১. CSS Animations ব্যবহার করে Animation Control

উদাহরণ: CSS Transition দিয়ে অ্যানিমেশন

এখানে, আমরা CSS Transition ব্যবহার করে একটি কম্পোনেন্টের দৃশ্যমানতা পরিবর্তন করার জন্য অ্যানিমেশন যোগ করব।

<!-- src/components/AnimatedComponent.riot -->
<animated-component>
  <button onclick={toggleVisibility}>Toggle Visibility</button>

  <div class={isVisible ? 'visible' : 'hidden'}>
    <p>This content is animated.</p>
  </div>

  <style>
    div {
      opacity: 0;
      transition: opacity 1s ease;
    }
    .visible {
      opacity: 1;
    }
    .hidden {
      opacity: 0;
    }
  </style>

  <script>
    export default {
      isVisible: false,

      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  </script>
</animated-component>

ব্যাখ্যা:

• transition CSS প্রপার্টি ব্যবহার করে, div এলিমেন্টের opacity পরিবর্তন করার জন্য অ্যানিমেশন প্রভাব দেওয়া হয়েছে।
• toggleVisibility() ফাংশনটি ক্লিক করলে isVisible স্টেট পরিবর্তন হবে এবং CSS ক্লাসের মাধ্যমে অ্যানিমেশন চালু হবে।

উদাহরণ: CSS Keyframes দিয়ে অ্যানিমেশন

<!-- src/components/AnimatedComponentWithKeyframes.riot -->
<animated-component>
  <button onclick={startAnimation}>Start Animation</button>

  <div class={isAnimated ? 'animate' : ''}>
    <p>This content is animated with keyframes.</p>
  </div>

  <style>
    .animate {
      animation: slideIn 2s ease-out;
    }

    @keyframes slideIn {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
  </style>

  <script>
    export default {
      isAnimated: false,

      startAnimation() {
        this.isAnimated = true;
      }
    }
  </script>
</animated-component>

ব্যাখ্যা:

• এখানে, @keyframes ব্যবহার করে একটি slide-in অ্যানিমেশন তৈরি করা হয়েছে যা div এলিমেন্টকে বাম থেকে ডানে স্লাইড করাবে এবং তার opacity পরিবর্তন করবে।
• startAnimation() ফাংশনটি ক্লিক করলে isAnimated স্টেট পরিবর্তিত হবে এবং অ্যানিমেশন শুরু হবে।

২. JavaScript Animation ব্যবহার করে Animation Control

উদাহরণ: JavaScript requestAnimationFrame() দিয়ে অ্যানিমেশন

requestAnimationFrame() হল একটি JavaScript API যা আপনার অ্যানিমেশনকে ব্রাউজারের রেন্ডারিং সাইকেলের সাথে সিঙ্ক্রোনাইজ করে, যা আরও স্মুথ অ্যানিমেশন নিশ্চিত করে।

<!-- src/components/JavaScriptAnimatedComponent.riot -->
<animated-component>
  <button onclick={startAnimation}>Start Animation</button>

  <div ref="box" class="box"></div>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>

  <script>
    export default {
      startAnimation() {
        this.animateBox();
      },

      animateBox() {
        let box = this.refs.box;
        let start = null;

        function animate(timestamp) {
          if (!start) start = timestamp;
          const progress = timestamp - start;

          // Animate the box (move it horizontally)
          box.style.transform = `translateX(${Math.min(progress / 10, 500)}px)`;

          if (progress < 5000) {
            requestAnimationFrame(animate); // Continue the animation
          }
        }

        requestAnimationFrame(animate); // Start the animation
      }
    }
  </script>
</animated-component>

ব্যাখ্যা:

• requestAnimationFrame ব্যবহার করে, আমরা box এলিমেন্টকে এক্স-অক্ষ বরাবর সরানোর জন্য একটি অ্যানিমেশন তৈরি করেছি।
• animateBox() ফাংশনটি যখন ক্লিক হয়, তখন এটি requestAnimationFrame দ্বারা চলতে থাকে এবং box এলিমেন্টটি একটি নির্দিষ্ট সময়ের মধ্যে স্লাইড করে।

৩. Third-Party Animation Libraries ব্যবহার করা

আপনি চাইলে anime.js, GSAP বা Velocity.js মত থার্ড-পার্টি অ্যানিমেশন লাইব্রেরি ব্যবহার করে অ্যানিমেশনগুলো আরও উন্নত এবং নিয়ন্ত্রণযোগ্য করতে পারেন।

উদাহরণ: anime.js লাইব্রেরি ব্যবহার করা

প্রথমে anime.js ইনস্টল করুন:

npm install animejs

তারপর, Riot.js কম্পোনেন্টে এটি ব্যবহার করুন:

<!-- src/components/AnimeComponent.riot -->
<anime-component>
  <button onclick={startAnimation}>Start Anime</button>

  <div ref="box" class="box"></div>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>

  <script>
    import anime from 'animejs';

    export default {
      startAnimation() {
        anime({
          targets: this.refs.box,
          translateX: 500,
          duration: 2000,
          easing: 'easeInOutQuad'
        });
      }
    }
  </script>
</anime-component>

ব্যাখ্যা:

• এখানে anime.js ব্যবহার করা হয়েছে, যা একাধিক অ্যানিমেশন প্রপার্টি সাপোর্ট করে। আমরা translateX প্রপার্টি দিয়ে box এলিমেন্টকে এক্স-অক্ষ বরাবর 500 পিক্সেল সরিয়েছি।

সারাংশ

Riot.js-এ অ্যানিমেশন কন্ট্রোল করতে আপনি নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করতে পারেন:

1. CSS Transitions এবং Keyframes ব্যবহার করে সিম্পল অ্যানিমেশন তৈরি করা।
2. JavaScript Animations (যেমন requestAnimationFrame()) ব্যবহার করে স্লাইড, স্কেল বা অন্য কোনও ডাইনামিক অ্যানিমেশন কন্ট্রোল করা।
3. Third-party libraries (যেমন anime.js, GSAP) ব্যবহার করে উন্নত অ্যানিমেশন তৈরির সুবিধা পাওয়া।

আপনি যে কোনও পদ্ধতি ব্যবহার করতে পারেন যা আপনার প্রজেক্টের জন্য উপযুক্ত এবং যা অ্যানিমেশনগুলোর ফ্লুইড এবং স্মুথ আচরণ নিশ্চিত করবে।