Web Development RIOT.js এর Animation এবং Transitions গাইড ও নোট

Riot.js তে Animation এবং Transitions ব্যবহার করা অত্যন্ত সহজ এবং কার্যকরী। যদিও Riot.js একটি লাইটওয়েট লাইব্রেরি, তবুও এতে ইউজার ইন্টারফেসে অ্যানিমেশন এবং ট্রানজিশন যোগ করার জন্য সহজভাবে CSS এবং JavaScript ব্যবহার করা যায়।

Riot.js এর মধ্যে অ্যানিমেশন এবং ট্রানজিশন ব্যবস্থাপনা করার জন্য সাধারণত CSS Transitions এবং CSS Animations ব্যবহার করা হয়। এছাড়াও, Riot.js এর each ডিরেকটিভ এবং update ফাংশনের মাধ্যমে ডাইনামিক এলিমেন্টগুলির জন্য অ্যানিমেশন প্রয়োগ করা যায়।

১. CSS Transition

CSS Transition একটি প্রক্রিয়া যা এক উপাদানকে অন্য উপাদানে রূপান্তরিত করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি একটি উপাদানকে দেখতে পারেন যা মাউস হোভার করার পর রঙ পরিবর্তন করে, অথবা একটি ডিভ এলিমেন্ট ধীরে ধীরে দৃশ্যমান হয়।

Example: Fade-in Transition

<!-- FadeIn.riot -->
<fad-in>
  <h2>Click to Fade In</h2>
  <button onclick={toggleVisibility}>Toggle Visibility</button>

  <div class="box" if={isVisible}></div>

  <script>
    export default {
      isVisible: false,

      toggleVisibility() {
        this.isVisible = !this.isVisible; // Toggle the visibility state
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      opacity: 0;
      transition: opacity 1s ease;
    }

    .box[if] {
      opacity: 1; /* Makes the box visible */
    }
  </style>
</fad-in>

এখানে:

• transition: opacity 1s ease;: .box ক্লাসে CSS Transition প্রয়োগ করা হয়েছে যাতে এলিমেন্টটি ধীরে ধীরে ফেড ইন/আউট হয়।
• if={isVisible}: Riot.js-এ if ডিরেকটিভ ব্যবহার করে উপাদানটি শো অথবা হাইড করা হয়। যখন isVisible সত্য হবে, তখন opacity পরিবর্তন হবে এবং অ্যানিমেশন হবে।

২. CSS Animation

CSS Animation তে অ্যানিমেশন কীগুলি (keyframes) ব্যবহার করে নির্দিষ্ট মান এবং সময়ের মধ্যে পরিবর্তন ঘটানো হয়। এটি সাধারণত অ্যানিমেশন শুরু, মধ্য এবং শেষের অবস্থান গুলোকে নির্ধারণ করতে ব্যবহার করা হয়।

Example: Bounce Animation

<!-- Bounce.riot -->
<bounce-component>
  <h2>Bounce Animation Example</h2>
  <div class="box"></div>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
      animation: bounce 2s infinite;
    }

    @keyframes bounce {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-30px);
      }
      100% {
        transform: translateY(0);
      }
    }
  </style>
</bounce-component>

এখানে:

• @keyframes bounce: একটি কীগুলি সংজ্ঞায়িত করা হয়েছে যা transform: translateY() ব্যবহার করে উপাদানটিকে উপরে এবং নিচে নড়াচড়া করতে দেয়।
• animation: bounce 2s infinite;: .box ক্লাসে এই অ্যানিমেশন প্রয়োগ করা হয়েছে, যা প্রতিটি 2 সেকেন্ডে একবার সম্পন্ন হয় এবং অসীমবার চলতে থাকে।

৩. Dynamic Transitions with Riot.js

Riot.js তে ডাইনামিক ট্রানজিশন (যেমন, উপাদান যোগ বা মুছে ফেলা) তৈরির জন্য, আপনি each ডিরেকটিভ ব্যবহার করে লিস্টে উপাদানগুলোকে ম্যানেজ করতে পারেন এবং সেই অনুযায়ী ট্রানজিশন বা অ্যানিমেশন প্রয়োগ করতে পারেন।

Example: Dynamic List with Fade Transition

<!-- DynamicListWithFade.riot -->
<dynamic-list>
  <h2>Dynamic List with Fade-in/Out</h2>
  
  <button onclick={addItem}>Add Item</button>
  <button onclick={removeItem}>Remove Item</button>

  <ul>
    <li each={item, index in items} class="fade" key={index}>{item}</li>
  </ul>

  <script>
    export default {
      items: [],
      
      addItem() {
        this.items.push('New Item');
      },

      removeItem() {
        this.items.pop();
      }
    }
  </script>

  <style>
    .fade {
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .fade[each] {
      opacity: 1;
    }
  </style>
</dynamic-list>

এখানে:

• each={item, index in items}: each ডিরেকটিভ ব্যবহার করে লিস্টের আইটেমগুলি দেখানো হচ্ছে।
• key={index}: key প্রদান করা হয়েছে যাতে উপাদানটি ঠিকভাবে ট্র্যাক হয়, এবং এর পরিবর্তন (যেমন আইটেম অ্যাড বা রিমুভ) সহজে করা যায়।
• transition: opacity 0.5s ease: .fade ক্লাসের জন্য ট্রানজিশন প্রয়োগ করা হয়েছে যাতে আইটেমগুলো ধীরে ধীরে ফেড ইন/আউট হয়।

৪. Triggering Animations on Lifecycle Events

Riot.js কম্পোনেন্টের lifecycle hooks ব্যবহার করে আপনি অ্যানিমেশন শুরু করতে পারেন, যেমন কম্পোনেন্ট মাউন্ট হওয়ার পর বা রিমুভ হওয়ার পর।

Example: Animation on Mounting a Component

<!-- MountAnimation.riot -->
<mount-animation>
  <h2>Animation on Component Mount</h2>
  <div class="box"></div>

  <script>
    export default {
      onMounted() {
        this.refs.box.classList.add('animate');
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      opacity: 0;
      transition: opacity 2s ease;
    }

    .box.animate {
      opacity: 1;
    }
  </style>
</mount-animation>

এখানে:

• onMounted(): onMounted লাইফ সাইকেল হুক ব্যবহার করে কম্পোনেন্ট মাউন্ট হওয়ার পর animate ক্লাস যোগ করা হচ্ছে, যার মাধ্যমে উপাদানটি ধীরে ধীরে দৃশ্যমান হয়।

৫. Using JavaScript for Triggering Transitions

Riot.js তে আপনি JavaScript থেকেও ট্রানজিশন বা অ্যানিমেশন চালনা করতে পারেন। উদাহরণস্বরূপ, আপনি একটি নির্দিষ্ট ইভেন্ট বা অ্যাকশন (যেমন ক্লিক বা হোভার) থেকে অ্যানিমেশন শুরু করতে পারেন।

Example: Triggering Animation with JavaScript

<!-- TriggerAnimation.riot -->
<trigger-animation>
  <h2>Click to Trigger Animation</h2>
  <button onclick={triggerAnimation}>Start Animation</button>
  
  <div class="box"></div>

  <script>
    export default {
      triggerAnimation() {
        this.refs.box.classList.add('animate');
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: orange;
      transform: scale(0);
      transition: transform 1s ease;
    }

    .box.animate {
      transform: scale(1);
    }
  </style>
</trigger-animation>

এখানে:

• triggerAnimation(): একটি বাটনে ক্লিক করলে animate ক্লাস যোগ করা হয়, যা .box উপাদানটির স্কেল পরিবর্তন করে।

সারাংশ

Riot.js তে Animation এবং Transitions ব্যবহার করার জন্য আপনি সাধারণত CSS Transitions এবং CSS Animations ব্যবহার করবেন। এর মাধ্যমে আপনি কম্পোনেন্ট এবং ডাইনামিক উপাদানগুলিতে বিভিন্ন ধরনের অ্যানিমেশন প্রয়োগ করতে পারেন। Riot.js এর each ডিরেকটিভ, onMounted এবং onUpdated লাইফ সাইকেল হুকসের মাধ্যমে আপনি অ্যানিমেশনকে ট্রিগার করতে পারবেন। এতে করে আপনার UI-কে আরও ইন্টারঅ্যাকটিভ এবং সুন্দর করতে সহায়তা পাওয়া যায়।

Riot.js-এ CSS এর মাধ্যমে বেসিক অ্যানিমেশন যোগ করা খুবই সহজ। Riot.js কম্পোনেন্টে আপনি সরাসরি CSS ব্যবহার করে অ্যানিমেশন এবং ট্রানজিশন যোগ করতে পারেন। CSS অ্যানিমেশন বা ট্রানজিশন ব্যবহার করলে আপনি DOM এর উপাদানগুলিতে সহজেই গতিশীলতা এবং অ্যানিমেশন যোগ করতে পারবেন।

CSS অ্যানিমেশন যোগ করার জন্য প্রয়োজনীয় ধাপ:

1. CSS অ্যানিমেশন: CSS অ্যানিমেশনগুলি কিওয়ার্ড যেমন @keyframes ব্যবহার করে তৈরি করা হয়, যেখানে আপনি অ্যানিমেশনটির শুরু এবং শেষের অবস্থা নির্ধারণ করেন।
2. CSS ট্রানজিশন: CSS ট্রানজিশন ব্যবহার করে আপনি নির্দিষ্ট একটি স্টাইল পরিবর্তন করার সময় অ্যানিমেশন যুক্ত করতে পারেন। উদাহরণস্বরূপ, যখন ব্যবহারকারী একটি বাটনে হোভার করবে, তখন কিছু পরিবর্তন বা অ্যানিমেশন ঘটবে।

Riot.js-এ CSS অ্যানিমেশন যোগ করার উদাহরণ:

১. বেসিক CSS অ্যানিমেশন উদাহরণ:

ধরা যাক, আপনি একটি কম্পোনেন্ট তৈরি করতে চান যেখানে একটি বাটন ক্লিক করলে একটি টেক্সট ধীরে ধীরে ফেড ইন/আউট হবে।

<!-- AnimationExample.riot -->
<animation-example>
  <button onclick={toggleVisibility}>Toggle Text Visibility</button>
  <p if={isVisible} class="fade-in">This is a fading text!</p>

  <script>
    export default {
      onMounted() {
        this.isVisible = false;  // Initially the text is hidden
      },
      
      toggleVisibility() {
        this.isVisible = !this.isVisible;  // Toggle visibility on button click
      }
    }
  </script>

  <style>
    /* Basic Fade-In animation */
    .fade-in {
      animation: fadeIn 2s ease-in-out;
    }

    /* @keyframes for fadeIn animation */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>
</animation-example>

ব্যাখ্যা:

• @keyframes fadeIn: এখানে @keyframes ব্যবহার করে একটি fadeIn অ্যানিমেশন তৈরি করা হয়েছে যা opacity পরিবর্তন করে।
• <p if={isVisible}>: isVisible যদি true হয়, তবে <p> ট্যাগটি UI তে প্রদর্শিত হবে। এবং যখন এটি প্রদর্শিত হবে, তখন fade-in ক্লাসটির মাধ্যমে অ্যানিমেশন শুরু হবে।
• toggleVisibility(): বাটনে ক্লিক করলে isVisible ভেরিয়েবলের মান পাল্টে যাবে, এবং টেক্সটের দৃশ্যমানতা পরিবর্তিত হবে।

২. CSS ট্রানজিশন উদাহরণ:

এখানে, আমরা একটি বাটনে হোভার করার সময় একটি ব্যাকগ্রাউন্ড কালার পরিবর্তন সহ অ্যানিমেশন যোগ করব।

<!-- HoverAnimation.riot -->
<hover-animation>
  <button class="hover-button">Hover over me!</button>

  <script>
    export default {
      onMounted() {
        // No JS code needed for this animation, it's controlled by CSS
      }
    }
  </script>

  <style>
    /* Button styling */
    .hover-button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease; /* Apply transition */
    }

    /* On hover, change background color and add a little scale effect */
    .hover-button:hover {
      background-color: #45a049;
      transform: scale(1.1);  /* Slightly enlarge the button */
    }
  </style>
</hover-animation>

ব্যাখ্যা:

• transition: background-color 0.3s ease, transform 0.3s ease;: এখানে transition ব্যবহার করে বাটনের ব্যাকগ্রাউন্ড রঙ এবং স্কেল (আকার পরিবর্তন) ০.৩ সেকেন্ডের মধ্যে অ্যানিমেটেড করা হয়েছে।
• hover-button:hover: বাটনে মাউস হোভার করার সময় ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে এবং বাটনের আকার একটু বড় হবে (স্কেল হবে)।

CSS অ্যানিমেশন এবং ট্রানজিশন এর পার্থক্য:

• CSS অ্যানিমেশন: @keyframes ব্যবহার করে একটি স্থিতিশীল অ্যানিমেশন তৈরি করা হয়। এটি কিছু নির্দিষ্ট সময়ের মধ্যে উপাদানকে একাধিক অবস্থায় পরিবর্তন করে। উদাহরণস্বরূপ, একটি টেক্সটের রঙ পরিবর্তন হতে পারে বা কোনো উপাদান ধীরে ধীরে বড় হয়ে উঠতে পারে।
• CSS ট্রানজিশন: এটি সাধারণত একটি নির্দিষ্ট অবস্থান থেকে অন্য অবস্থানে হালকা পরিবর্তন করার জন্য ব্যবহার করা হয়, যেমন মাউস হোভার করার সময় একটি প্রপার্টি পরিবর্তন।

Riot.js-এ CSS অ্যানিমেশন যুক্ত করার কিছু টিপস:

1. CSS মডুলার স্টাইল: Riot.js আপনাকে প্রতিটি কম্পোনেন্টের জন্য আলাদা CSS স্টাইল ব্যবহার করার সুযোগ দেয়। ফলে, প্রতিটি কম্পোনেন্টের স্টাইল এবং অ্যানিমেশন আলাদাভাবে পরিচালনা করা সম্ভব হয়।
2. স্টাইল শ্যাডো DOM: Riot.js কম্পোনেন্টে স্কোপড স্টাইল ব্যবহার করা হয়, যা শুধু সেই কম্পোনেন্টের মধ্যে প্রভাব ফেলবে এবং অ্যাপ্লিকেশনের বাকি অংশে কোনও প্রভাব ফেলবে না।
3. ডায়নামিক অ্যানিমেশন: CSS অ্যানিমেশনকে JavaScript এর মাধ্যমে ডায়নামিকভাবে নিয়ন্ত্রণ করতে পারেন, যেমন কোনও ইভেন্টের জন্য অ্যানিমেশন শুরু বা বন্ধ করা।

সারসংক্ষেপ:

Riot.js-এ CSS অ্যানিমেশন যোগ করা সহজ এবং সুন্দরভাবে UI-তে গতিশীলতা যোগ করে। আপনি CSS অ্যানিমেশন এবং CSS ট্রানজিশন ব্যবহার করে বাটন, টেক্সট, অথবা যেকোনো HTML উপাদানে অ্যানিমেশন প্রয়োগ করতে পারেন। এটি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।

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) ব্যবহার করে উন্নত অ্যানিমেশন তৈরির সুবিধা পাওয়া।

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

Riot.js তে Animations এবং Transitions পরিচালনা করা খুবই সহজ এবং স্বাভাবিকভাবে কাজ করে। CSS Transitions এবং CSS Animations ব্যবহার করে আপনি কম্পোনেন্টের মধ্যে আকর্ষণীয় অ্যানিমেশন এবং পরিবর্তন তৈরি করতে পারেন। Riot.js আপনাকে ডেটা পরিবর্তনের ভিত্তিতে UI আপডেট করতে দেয়, এবং আপনি CSS এর মাধ্যমে অ্যানিমেশন এবং ট্রানজিশনগুলি নিয়ন্ত্রণ করতে পারেন।

১. CSS Transitions in Riot.js

CSS Transitions হল এক ধরনের অ্যানিমেশন যা একটি স্টাইল প্রপার্টির পরিবর্তনকে মসৃণভাবে প্রদর্শন করে। এটি সাধারণত স্টাইলের একটি পরিবর্তন (যেমন opacity, transform, background-color ইত্যাদি) তে পরিবর্তন হওয়ার সময় একটি মসৃণ অ্যানিমেশন তৈরি করে।

উদাহরণ: Simple CSS Transition

<!-- MyComponent.riot -->
<my-component>
  <button onclick={toggleVisibility}>Toggle Visibility</button>
  <div class="box" if={isVisible}></div>

  <script>
    export default {
      onMounted() {
        this.isVisible = false;
      },

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

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .box[if] {
      opacity: 1;
    }
  </style>
</my-component>

ব্যাখ্যা:

• opacity এর উপর একটি ট্রানজিশন দেওয়া হয়েছে যা 0 থেকে 1 এ পরিবর্তিত হয় যখন isVisible সত্য হয়।
• transition: opacity 0.5s ease-in-out; এর মাধ্যমে অ্যানিমেশন 0.5 সেকেন্ডে সম্পন্ন হয় এবং এটি মসৃণভাবে শুরু এবং শেষ হয়।

২. CSS Animations in Riot.js

CSS Animations ব্যবহার করে আপনি কম্পোনেন্টে আরো জটিল অ্যানিমেশন তৈরি করতে পারেন। এটি একটি নির্দিষ্ট সময়ের জন্য নির্ধারিত ধাপগুলির মাধ্যমে পরিবর্তন করে।

উদাহরণ: Simple CSS Animation

<!-- MyComponent.riot -->
<my-component>
  <button onclick={startAnimation}>Start Animation</button>
  <div class="animate-box"></div>

  <script>
    export default {
      startAnimation() {
        this.update();  // Trigger re-render to apply animation
      }
    }
  </script>

  <style>
    .animate-box {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: bounce 2s infinite;
    }

    @keyframes bounce {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-30px);
      }
      100% {
        transform: translateY(0);
      }
    }
  </style>
</my-component>

ব্যাখ্যা:

• এখানে .animate-box এর উপর @keyframes bounce অ্যানিমেশন ব্যবহার করা হয়েছে। অ্যানিমেশনটি 2 সেকেন্ডে একবার সম্পন্ন হয় এবং infinite দ্বারা এটি অনন্তকাল ধরে চলতে থাকে।
• অ্যানিমেশনটি একটি বাউন্সের মত অনুভূতি তৈরি করে।

৩. CSS Transitions with Conditional Rendering (if and else)

Riot.js তে conditional rendering (if, else) ব্যবহার করলে আপনি কিছু কন্ডিশনাল অবস্থার ভিত্তিতে অ্যানিমেশন চালাতে পারেন। উদাহরণস্বরূপ, আপনি একটি div বা অন্য কোন উপাদান যদি এবং কেবল তখনই দেখাতে পারেন যখন একটি নির্দিষ্ট শর্ত সত্য হয়।

উদাহরণ: Conditional Rendering with Transition

<!-- MyComponent.riot -->
<my-component>
  <button onclick={toggleVisibility}>Show/Hide Box</button>
  <div class="box" if={isVisible}></div>

  <script>
    export default {
      onMounted() {
        this.isVisible = false;
      },

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

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .box[if] {
      opacity: 1;
    }
  </style>
</my-component>

ব্যাখ্যা:

• যখন isVisible true হবে, div উপাদানটি দেখানো হবে এবং opacity পরিবর্তন হয়ে দৃশ্যমান হবে।
• CSS transition দিয়ে opacity এর পরিবর্তনটি 1 সেকেন্ডে মসৃণভাবে হবে।

৪. Riot.js Lifecycle Hooks and Animations

Riot.js-এ lifecycle hooks (যেমন onMounted, onUpdated, onUnmounted) ব্যবহার করে আপনি কম্পোনেন্টের অন্তর্গত অ্যানিমেশনগুলিকে আরও নিয়ন্ত্রণ করতে পারেন। আপনি কম্পোনেন্ট মাউন্ট বা আপডেট হওয়ার সময় অ্যানিমেশন চালাতে পারেন।

উদাহরণ: Animation with Lifecycle Hooks

<!-- MyComponent.riot -->
<my-component>
  <div class="box" if={isVisible}></div>
  <button onclick={toggleVisibility}>Toggle Box</button>

  <script>
    export default {
      onMounted() {
        console.log("Component mounted");
      },

      toggleVisibility() {
        this.isVisible = !this.isVisible;
        this.update(); // Ensure the component re-renders to trigger animation
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: purple;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .box[if] {
      opacity: 1;
    }
  </style>
</my-component>

ব্যাখ্যা:

• onMounted() হুকের মধ্যে আপনি যখন কম্পোনেন্ট মাউন্ট করবেন, তখন প্রথমে কিছু কার্যকলাপ যেমন লগ মেসেজ বা অ্যানিমেশন শুরু করতে পারেন।
• toggleVisibility() ফাংশন দিয়ে আপনি isVisible পরিবর্তন করে কম্পোনেন্ট রেন্ডার করতে পারেন, যা অ্যানিমেশন ট্রিগার করবে।

৫. Riot.js Transition Hooks

Riot.js তে if বা each ডিরেকটিভগুলির সাথে transition hooks ব্যবহার করে আপনি অ্যানিমেশন চালাতে পারেন, যখন কোন কম্পোনেন্ট DOM থেকে ইনপুট বা আউটপুট হয়।

উদাহরণ: Transition Hooks in Riot.js

<!-- MyComponent.riot -->
<my-component>
  <div class="box" if={isVisible}></div>
  <button onclick={toggleVisibility}>Toggle Visibility</button>

  <script>
    export default {
      onMounted() {
        this.isVisible = false;
      },

      toggleVisibility() {
        this.isVisible = !this.isVisible;
      },

      // Transition Hooks
      onBeforeMount() {
        console.log('Before mount animation');
      },

      onMounted() {
        console.log('Mounted animation');
      },

      onBeforeUnmount() {
        console.log('Before unmount animation');
      },

      onUnmounted() {
        console.log('Unmounted animation');
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: orange;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .box[if] {
      opacity: 1;
    }
  </style>
</my-component>

ব্যাখ্যা:

• onBeforeMount এবং onBeforeUnmount হুকগুলি ব্যবহার করে আপনি যখন একটি কম্পোনেন্ট মাউন্ট বা আনমাউন্ট করবেন তখন কিছু অ্যানিমেশন শুরু করতে পারেন।

Riot.js তে animations এবং transitions ব্যবস্থাপনা CSS এর মাধ্যমে খুবই সহজ এবং কার্যকরী। আপনি CSS transitions এবং keyframes animations ব্যবহার করে কম্পোনেন্টের মধ্যে বিভিন্ন ধরনের অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে পারেন। এছাড়া, Riot.js lifecycle hooks এবং transition hooks ব্যবহার করে অ্যানিমেশনগুলি আরো নিয়ন্ত্রিত এবং ডাইনামিকভাবে চালানো সম্ভব।

Riot.js-এ Animation Events এবং Custom Animations তৈরি করার জন্য কিছু সহজ পদ্ধতি রয়েছে, যার মাধ্যমে আপনি কম্পোনেন্টের মধ্যে এনিমেশন যুক্ত করতে পারেন। Riot.js নিজেই এনিমেশন পরিচালনার জন্য কোনো বিল্ট-ইন লাইব্রেরি সরবরাহ করে না, তবে আপনি সাধারণ CSS Animations বা JavaScript Events ব্যবহার করে এনিমেশন তৈরি এবং কাস্টমাইজ করতে পারেন।

এখানে Riot.js-এ এনিমেশন ইভেন্ট এবং কাস্টম এনিমেশন তৈরি করার কিছু পদ্ধতি দেখানো হচ্ছে।

১. CSS Animations ব্যবহার করা

CSS Animation এবং Transition এর মাধ্যমে আপনি Riot.js কম্পোনেন্টে সুন্দর এবং স্মুথ এনিমেশন তৈরি করতে পারেন। এটা বিশেষ করে সিম্পল এনিমেশন জন্য খুবই কার্যকর।

উদাহরণ: CSS Animation

<!-- AnimatedComponent.riot -->
<animated-component>
  <button onclick={toggleAnimation}>Click me to Animate</button>
  <div class="box" if={showBox}></div>

  <script>
    export default {
      onMounted() {
        this.showBox = false; // Initial state
      },

      toggleAnimation() {
        this.showBox = !this.showBox; // Toggle the visibility of the box
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      margin-top: 20px;
      transition: transform 0.5s ease-in-out; /* Smooth transition for animation */
    }

    .box[if] {
      transform: scale(1.5); /* Apply scaling animation when box is visible */
    }
  </style>
</animated-component>

ব্যাখ্যা:

• এখানে একটি <div class="box"> তৈরি করা হয়েছে, যা একটি বাটনের ক্লিক ইভেন্টে এনিমেটেড হবে।
• transition এবং transform প্রপার্টি ব্যবহার করে CSS এনিমেশন তৈরি করা হয়েছে।
• showBox স্টেট পরিবর্তন হলে, বক্সের স্কেল পরিবর্তিত হবে, যা একটি স্মুথ এনিমেশন প্রদর্শন করবে।

২. JavaScript Animations ব্যবহার করা

আপনি যদি JavaScript ব্যবহার করে কাস্টম এনিমেশন তৈরি করতে চান, তবে Riot.js এ requestAnimationFrame বা অন্য কোনো এনিমেশন ফ্রেমওয়ার্ক ব্যবহার করতে পারেন।

উদাহরণ: JavaScript Animation

<!-- JavaScriptAnimatedComponent.riot -->
<js-animated-component>
  <button onclick={startAnimation}>Start Animation</button>
  <div class="box" if={showBox}></div>

  <script>
    export default {
      onMounted() {
        this.showBox = false;
      },

      startAnimation() {
        this.showBox = !this.showBox;
        if (this.showBox) {
          this.animateBox();
        }
      },

      animateBox() {
        let box = document.querySelector('.box');
        let scale = 1;
        let interval = setInterval(() => {
          if (scale >= 1.5) {
            clearInterval(interval);
          } else {
            scale += 0.05;
            box.style.transform = `scale(${scale})`;
          }
        }, 20);
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #e74c3c;
      margin-top: 20px;
      transform: scale(1);
      transition: transform 0.2s ease-in-out;
    }
  </style>
</js-animated-component>

ব্যাখ্যা:

• startAnimation ফাংশনটি বাটন ক্লিক হলে এনিমেশন শুরু করে।
• animateBox ফাংশনটি setInterval ব্যবহার করে ধীরে ধীরে বক্সের স্কেল বৃদ্ধি করে এবং একটি কাস্টম এনিমেশন তৈরি করে।
• box.style.transform এর মাধ্যমে এনিমেশন বাস্তবায়িত হচ্ছে।

৩. Custom Animation Events

এনিমেশন চলাকালীন সময়ে কিছু Custom Animation Events ট্রিগার করতে চাইলে, আপনি JavaScript Event Listeners ব্যবহার করতে পারেন, যা এনিমেশন সম্পূর্ণ হওয়ার পর কিছু কাস্টম কাজ করে।

উদাহরণ: Custom Animation Events

<!-- CustomAnimationEventComponent.riot -->
<custom-animation-event>
  <button onclick={startAnimation}>Start Custom Animation</button>
  <div class="box" if={showBox} onanimationend={onAnimationEnd}></div>

  <script>
    export default {
      onMounted() {
        this.showBox = false;
      },

      startAnimation() {
        this.showBox = !this.showBox;
      },

      onAnimationEnd() {
        alert('Animation Ended');
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #2ecc71;
      margin-top: 20px;
      animation: scaleBox 2s ease-in-out;
    }

    @keyframes scaleBox {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.5);
      }
    }
  </style>
</custom-animation-event>

ব্যাখ্যা:

• onanimationend ইভেন্ট ব্যবহার করা হয়েছে, যা এনিমেশন শেষ হওয়ার পর onAnimationEnd ফাংশনকে কল করবে এবং একটি এলার্ট শো করবে।
• CSS @keyframes ব্যবহার করে এনিমেশন তৈরি করা হয়েছে, যেখানে বক্সের স্কেল 1 থেকে 1.5 বৃদ্ধি পায়।

৪. Transition Events ব্যবহার করা

Riot.js-এ transitionend ইভেন্ট ব্যবহার করে আপনি যখন ট্রান্সিশন সম্পূর্ণ হয়, তখন নির্দিষ্ট কিছু কাজ করতে পারেন।

উদাহরণ: Using Transition Events

<!-- TransitionEventComponent.riot -->
<transition-event>
  <button onclick={startTransition}>Start Transition</button>
  <div class="box" if={showBox} ontransitionend={onTransitionEnd}></div>

  <script>
    export default {
      onMounted() {
        this.showBox = false;
      },

      startTransition() {
        this.showBox = !this.showBox;
      },

      onTransitionEnd() {
        console.log('Transition Ended!');
      }
    }
  </script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #9b59b6;
      margin-top: 20px;
      transition: transform 1s ease-in-out;
    }

    .box[if] {
      transform: scale(1.5);
    }
  </style>
</transition-event>

ব্যাখ্যা:

• ontransitionend ইভেন্ট ব্যবহার করে ট্রান্সিশন শেষ হলে একটি কাস্টম ফাংশন কল করা হচ্ছে।
• CSS transition ব্যবহার করে বক্সের স্কেল পরিবর্তন করা হচ্ছে।

Riot.js-এ Animation Events এবং Custom Animations তৈরি করতে আপনি বিভিন্ন পদ্ধতি ব্যবহার করতে পারেন:

1. CSS Animations এবং Transitions: সহজ এনিমেশন এবং স্টাইল পরিবর্তন।
2. JavaScript Animations: কাস্টম এনিমেশন তৈরি করতে setInterval, requestAnimationFrame, বা অন্যান্য JavaScript ফিচার ব্যবহার করা।
3. Custom Events: এনিমেশন ইভেন্টগুলির শেষে কাস্টম কাজ করার জন্য ইভেন্ট ব্যবহার করা (যেমন onanimationend, ontransitionend)।

এগুলো Riot.js-এ এনিমেশন সংক্রান্ত কাজগুলো সহজ এবং কার্যকরভাবে করতে সাহায্য করবে।