Custom Animations এবং Transitions তৈরি করা

Framework7 অ্যাপ্লিকেশনে কাস্টম অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করে ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাক্টিভ করা যায়। কাস্টম অ্যানিমেশন এবং ট্রানজিশন অ্যাপের ইউজার এক্সপেরিয়েন্স (UX) উন্নত করে এবং ব্যবহারকারীদের সাথে আরও ভালভাবে সংযোগ স্থাপন করে। নিচে Framework7-এ কাস্টম অ্যানিমেশন এবং ট্রানজিশন তৈরি করার ধাপগুলো বিস্তারিতভাবে আলোচনা করা হলো।

১. Framework7-এ অ্যানিমেশন এবং ট্রানজিশনের মৌলিক ধারণা

অ্যানিমেশন হলো কোন উপাদানের পরিবর্তনশীল অবস্থাকে মসৃণভাবে প্রদর্শন করার পদ্ধতি, যেমন একটি বাটন ক্লিক করলে এটি বাড়া বা কমা।
ট্রানজিশন হলো এক ভিউ বা পেজ থেকে অন্য ভিউ বা পেজে যাওয়ার সময় ঘটে এমন দৃশ্যমান পরিবর্তন, যেমন ফেইড ইন, স্লাইড ইত্যাদি।

Framework7 নিজেই কিছু বিল্ট-ইন অ্যানিমেশন এবং ট্রানজিশন প্রদান করে, তবে আপনি আপনার প্রয়োজন অনুযায়ী কাস্টম অ্যানিমেশন এবং ট্রানজিশনও তৈরি করতে পারেন।

২. কাস্টম CSS অ্যানিমেশন তৈরি করা

CSS ব্যবহার করে কাস্টম অ্যানিমেশন তৈরি করা সবচেয়ে সহজ উপায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি এলিমেন্টে ফেইড ইন এবং স্লাইড ইন অ্যানিমেশন প্রয়োগ করা হয়েছে।

CSS এ অ্যানিমেশন ডেফিনেশন:

/* ফেইড ইন অ্যানিমেশন */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* স্লাইড ইন অ্যানিমেশন */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* অ্যানিমেশন ক্লাস */
.fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

.slide-in {
  animation: slideIn 0.5s ease-out forwards;
}

HTML এ অ্যানিমেশন প্রয়োগ:

<!-- ফেইড ইন এলিমেন্ট -->
<div class="popup fade-in" id="fade-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Fade In Popup</div>
          <div class="right">
            <a href="#" class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        <p>This popup fades in!</p>
      </div>
    </div>
  </div>
</div>

<!-- স্লাইড ইন এলিমেন্ট -->
<div class="popover slide-in" id="slide-popover">
  <div class="popover-inner">
    <div class="block">
      <p>This popover slides in!</p>
    </div>
  </div>
</div>

JavaScript দিয়ে অ্যানিমেশন ট্রিগার করা:

// ফেইড ইন Popup খোলা
app.popup.open('#fade-popup');

// স্লাইড ইন Popover খোলা
app.popover.open('#slide-popover', '#open-slide-popover');

৩. Framework7 এর Transition API ব্যবহার করা

Framework7 একটি Transition API প্রদান করে যা আপনাকে কাস্টম ট্রানজিশন তৈরি করতে এবং ব্যবহার করতে সাহায্য করে। এটি বিশেষ করে ভিউ বা পেজের মধ্যে পরিবর্তনশীল ট্রানজিশন নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

কাস্টম ট্রানজিশন তৈরি:

// কাস্টম ট্রানজিশন তৈরি
app.views.create('.view-main', {
  // টার্গেট ভিউ সিলেক্টর
  main: true,
  // কাস্টম ট্রানজিশন নাম
  transition: 'custom-transition',
});

// CSS এ কাস্টম ট্রানজিশন স্টাইল
<style>
.custom-transition .page {
  animation: customPageTransition 0.5s forwards;
}

@keyframes customPageTransition {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
</style>

ট্রানজিশন প্যারামিটার সেট করা:

// পেজ লোড করার সময় কাস্টম ট্রানজিশন প্রয়োগ
app.router.navigate('/about/', {
  transition: 'custom-transition',
});

৪. JavaScript দিয়ে ডায়নামিক অ্যানিমেশন তৈরি করা

JavaScript ব্যবহার করে আপনি আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করতে পারেন। উদাহরণস্বরূপ, ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে এলিমেন্টের অ্যানিমেশন পরিবর্তন করা।

উদাহরণ: বাটন ক্লিক করলে এলিমেন্ট অ্যানিমেট করা:

<!-- HTML -->
<button id="animate-btn" class="button">Animate</button>
<div id="animated-element" class="box">Animate Me!</div>

/* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin-top: 20px;
  transition: transform 0.5s, opacity 0.5s;
}

.box.animate {
  transform: rotate(45deg) scale(1.2);
  opacity: 0.5;
}

// JavaScript
document.getElementById('animate-btn').addEventListener('click', function () {
  var element = document.getElementById('animated-element');
  element.classList.toggle('animate');
});

৫. Framework7 এর Page Transitions কাস্টমাইজ করা

Framework7-এ পেজ ট্রানজিশন কাস্টমাইজ করতে আপনাকে ফ্রেমওয়ার্কের রাউটিং সিস্টেমের মাধ্যমে ট্রানজিশন সেটআপ করতে হবে।

কাস্টম পেজ ট্রানজিশন:

// app.js বা main.js
var app = new Framework7({
  root: '#app',
  name: 'MyApp',
  theme: 'auto',
  routes: [
    {
      path: '/',
      url: './index.html',
      options: {
        transition: 'custom-page-transition',
      },
    },
    {
      path: '/about/',
      url: './pages/about.html',
      options: {
        transition: 'custom-page-transition',
      },
    },
  ],
});

CSS এ কাস্টম পেজ ট্রানজিশন স্টাইল:

/* কাস্টম পেজ ট্রানজিশন */
.page.custom-page-transition {
  animation: customPageFadeIn 0.7s forwards;
}

@keyframes customPageFadeIn {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

৬. অনিমেশনের জন্য ফ্রেমওয়ার্ক এবং লাইব্রেরি ব্যবহার করা

Framework7-এ অ্যানিমেশন এবং ট্রানজিশন আরও উন্নত করতে আপনি বিভিন্ন জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরি যেমন Animate.css, GSAP (GreenSock Animation Platform), বা Velocity.js ব্যবহার করতে পারেন।

Animate.css ব্যবহার:

<!-- Animate.css CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<!-- HTML এলিমেন্ট -->
<div id="animated-element" class="animate__animated">Hello Animate.css!</div>

// JavaScript দিয়ে অ্যানিমেশন ট্রিগার করা
document.getElementById('animate-btn').addEventListener('click', function () {
  var element = document.getElementById('animated-element');
  element.classList.add('animate__bounceIn');
  
  // অ্যানিমেশন শেষ হলে ক্লাস রিমুভ করা
  element.addEventListener('animationend', function () {
    element.classList.remove('animate__bounceIn');
  }, { once: true });
});

GSAP ব্যবহার:

# NPM দিয়ে GSAP ইনস্টল
npm install gsap

// JavaScript
import { gsap } from 'gsap';

// এলিমেন্টে GSAP অ্যানিমেশন প্রয়োগ করা
document.getElementById('animate-btn').addEventListener('click', function () {
  gsap.to('#animated-element', { duration: 1, x: 100, opacity: 0.5 });
});

৭. উদাহরণ: কাস্টম অ্যানিমেশন এবং ট্রানজিশন ইন্টিগ্রেশন

উদাহরণ ১: পেজ ফেইড ইন অ্যানিমেশন

HTML:

<!-- index.html -->
<div class="view view-main">
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Home</div>
      </div>
    </div>
    <div class="page-content">
      <button id="open-popup" class="button">Open Popup</button>
    </div>
  </div>
</div>

<!-- Popup -->
<div class="popup fade-in-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Popup</div>
          <div class="right">
            <a href="#" class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        <p>This is a custom fade-in popup!</p>
      </div>
    </div>
  </div>
</div>

CSS:

/* Custom Fade-In Popup */
@keyframes customFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in-popup {
  animation: customFadeIn 0.5s forwards;
}

JavaScript:

// app.js
var app = new Framework7({
  root: '#app',
  name: 'MyApp',
  theme: 'auto',
  routes: [
    {
      path: '/',
      url: './index.html',
      options: {
        transition: 'custom-page-transition',
      },
    },
    {
      path: '/popup/',
      url: './pages/popup.html',
    },
  ],
});

// Popup খোলা
document.getElementById('open-popup').addEventListener('click', function () {
  app.popup.open('.fade-in-popup');
});

৮. গুরুত্বপূর্ণ টিপস

1. অ্যানিমেশন পারফরম্যান্স:
   অ্যানিমেশন এবং ট্রানজিশন খুব বেশি ব্যবহার করলে অ্যাপের পারফরম্যান্স প্রভাবিত হতে পারে। তাই শুধুমাত্র প্রয়োজনীয় ক্ষেত্রে অ্যানিমেশন ব্যবহার করুন।
2. রেসপন্সিভ ডিজাইন:
   অ্যানিমেশন এবং ট্রানজিশন ডিজাইনটি রেসপন্সিভ হতে হবে যাতে বিভিন্ন ডিভাইস এবং স্ক্রিন সাইজে এটি সুন্দরভাবে প্রদর্শিত হয়।
3. Accessibility (অ্যাক্সেসিবিলিটি):
   অ্যানিমেশনগুলি এমনভাবে তৈরি করুন যাতে ব্যবহারকারীরা সহজে বুঝতে পারেন এবং অ্যাপ্লিকেশনটি অ্যাক্সেসিবল থাকে। অতিরিক্ত অ্যানিমেশন ব্যবহার করলে তা ইউজারদের জন্য বিরক্তিকর হতে পারে।
4. কনসিস্টেন্ট থিম:
   অ্যানিমেশন এবং ট্রানজিশন ডিজাইনটি অ্যাপ্লিকেশনের সাধারণ থিম এবং স্টাইলের সাথে সঙ্গতিপূর্ণ হওয়া উচিত।

Framework7-এ কাস্টম অ্যানিমেশন এবং ট্রানজিশন তৈরি করা সহজ এবং কার্যকর। CSS এবং JavaScript ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে বিভিন্ন ধরনের অ্যানিমেশন এবং ট্রানজিশন যুক্ত করতে পারেন, যা ইউজার এক্সপেরিয়েন্স উন্নত করে। এছাড়াও, Framework7 এর Transition API এবং বিভিন্ন অ্যানিমেশন লাইব্রেরি ব্যবহার করে আরও উন্নত এবং ইন্টারঅ্যাক্টিভ অ্যানিমেশন তৈরি করা সম্ভব। এই ফিচারগুলো অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও প্রাণবন্ত এবং আকর্ষণীয় করে তুলবে।