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

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

পেজ ট্রানজিশন (Page Transitions)

Framework7 রাউটিং সিস্টেম পেজ লোড এবং আনলোডের সময় স্বয়ংক্রিয়ভাবে ট্রানজিশন অ্যানিমেশন করে। যখন আপনি app.router.navigate() ব্যবহার করে একটি নতুন পেজে যান বা ব্যাক নেভিগেশন করেন, ফ্রেমওয়ার্কটি iOS ও Material Design অনুযায়ী Smooth অ্যানিমেশন প্রয়োগ করে।

app.router.navigate('/about/');

উপরের কোড চালানোর সময় পেজটি iOS থিমে ডানদিক থেকে বাঁদিকে এবং Material থিমে উপরে থেকে নিচে চলে আসার মতো নেটিভ ফিল-সমৃদ্ধ ট্রানজিশন দেখা যাবে।

Modal এবং Popup অ্যানিমেশন

Modal, Popup, Sheet, Action Sheet ইত্যাদি কম্পোনেন্ট ওপেন ও ক্লোজ করার সময় ডিফল্ট অ্যানিমেশন ব্যবহৃত হয়। এগুলো CSS ট্রানজিশনের মাধ্যমে হালকাভাবে স্কেল, ফেইড বা স্লাইড প্রয়োগ করে।

var popup = app.popup.open('.my-popup'); // ওপেন করার সময় Smooth Fade-in অ্যানিমেশন
app.popup.close('.my-popup'); // ক্লোজ করার সময় Fade-out অ্যানিমেশন

অ্যাকর্ডিয়ান (Accordion) অ্যানিমেশন

Framework7 এর অ্যাকর্ডিয়ান কম্পোনেন্ট ব্যবহার করলে টগল করার সময় Smooth Slide Down/Up অ্যানিমেশন দেখতে পাওয়া যায়।

<div class="list accordion-list">
  <ul>
    <li class="accordion-item">
      <a class="item-content item-link" href="#">
        <div class="item-inner">
          <div class="item-title">Title</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="block">
          <p>Accordion Content</p>
        </div>
      </div>
    </li>
  </ul>
</div>

ইউজার ট্যাপ করলে Accordion ফেইড এবং স্লাইড অ্যানিমেশন সহ খুলবে এবং বন্ধ হবে।

CSS ব্যবহার করে কাস্টম অ্যানিমেশন

Framework7 এ বিল্ট-ইন অ্যানিমেশনের পাশাপাশি কাস্টম CSS অ্যানিমেশন বা ট্রানজিশনও ব্যবহার করা যায়। আপনি CSS transition, transform ও animation প্রপার্টি ব্যবহার করে যেকোনো এলিমেন্টের অ্যানিমেশন তৈরি করতে পারেন।

.my-animated-element {
  transition: transform 0.3s ease-in-out;
}
.my-animated-element.active {
  transform: translateX(100px);
}

JavaScript দিয়ে .active ক্লাস যোগ ও সরানোর মাধ্যমে Smooth অ্যানিমেশন তৈরি করতে পারেন।

$('.my-animated-element').on('click', function () {$(this).toggleClass('active');
});

JavaScript API ব্যবহার করে কাস্টম অ্যানিমেশন

Framework7 এর Request Animation Frame (rAF) ও JavaScript ইভেন্ট ব্যবহার করে ডায়নামিক অ্যানিমেশন তৈরি করা যায়। আপনি CSS ক্লাস টগল বা ইনলাইন স্টাইল পরিবর্তন করে Fluid অ্যানিমেশন ইফেক্ট প্রদান করতে পারেন।

থিম ও প্ল্যাটফর্মভেদে অ্যানিমেশন

Framework7 নিজস্ব থিম অনুযায়ী অ্যানিমেশন প্যাটার্ন নির্ধারণ করে। iOS থিমে অ্যানিমেশন সাধারণত Slide-based, Material থিমে Fade এবং Scale-based অ্যানিমেশন বেশি ব্যবহৃত হয়। আপনার অ্যাপ যে প্ল্যাটফর্মে চলবে, সেই অনুযায়ী Framework7 স্বয়ংক্রিয়ভাবে মানানসই অ্যানিমেশন প্রয়োগ করে।

Framework7 এর মাধ্যমে ডিফল্ট অ্যানিমেশন ব্যবহার করা যেমন সহজ, তেমনি CSS ও JavaScript দিয়ে কাস্টম অ্যানিমেশন তৈরি করাও সম্ভব। এতে আপনার অ্যাপ UX উন্নত হবে এবং ব্যবহারকারীরা প্রাকৃতিক ও সাবলীল অভিজ্ঞতা পাবেন।

Framework7 অ্যাপ্লিকেশনে পৃষ্ঠা পরিবর্তন, উপাদান প্রদর্শন বা লুকানো, এমনকি কাস্টম ইন্টারঅ্যাকশনেও অ্যানিমেশন ব্যবহার করা যায়। এর ফলে ইউজার ইন্টারফেস আরও প্রানবন্ত, ব্যবহার-বান্ধব এবং অ্যাপের অভিজ্ঞতা উন্নত হয়।

Page Level Animations

Framework7 পৃষ্ঠা পরিবর্তন করার সময় ডিফল্টভাবে অ্যানিমেশন ব্যবহার করে। রাউট পরিবর্তনের সময় পৃষ্ঠা একটিতে প্রবেশ এবং অন্যটি থেকে প্রস্থানের সময় বিভিন্ন Transition Animation দেখা যায়।

ডিফল্ট পৃষ্ঠা অ্যানিমেশন

• Slide In/Out: একটি পৃষ্ঠা স্ক্রিনের ডানে বা বামে থেকে স্লাইড করে প্রবেশ বা প্রস্থান করে।
• Fade In/Out: পৃষ্ঠা ধীরে ধীরে ফেইড ইন বা ফেইড আউট হয়।

আপনি রাউট কনফিগারেশনে animate: false সেট করে অ্যানিমেশন বন্ধ করতে পারেন, বা কাস্টম ক্লাস ব্যবহার করে নিজস্ব অ্যানিমেশন যুক্ত করতে পারেন।

{
  path: '/about/',
  url: './pages/about.html',
  options: {
    animate: false
  }
}

উপরের উদাহরণে about পেজে যাওয়ার সময় অ্যানিমেশন বন্ধ করা হয়েছে।

কাস্টম পৃষ্ঠা ট্রান্সিশন

আপনি CSS ট্রান্সিশন ব্যবহার করে কাস্টম পৃষ্ঠা ট্রান্সিশন তৈরি করতে পারেন। পৃষ্ঠা DOM এ .page-previous, .page-current, .page-next ক্লাস ব্যবহার করে নির্দিষ্ট অ্যানিমেশন যোগ করা সম্ভব।

.page-current {
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
}
.page-previous {
  transform: translateX(-100%);
}
.page-next {
  transform: translateX(100%);
}

উপরের CSS কোডটি একটি স্লাইডিং অ্যানিমেশন তৈরিতে সহায়তা করে। যখন নতুন পৃষ্ঠা .page-current ক্লাস পায়, তখন এটি স্ক্রিনের ভেতরে স্লাইড করে আসে।

Element Level Animations

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

CSS Transitions ব্যবহার করে অ্যানিমেশন

HTML এলিমেন্টে CSS ক্লাস যোগ অথবা সরিয়ে অ্যানিমেশন ট্রিগার করা যায়। উদাহরণস্বরূপ, একটি বোতাম ক্লিক করলে কোনো DIV এলিমেন্ট ফেইড ইন বা ফেইড আউট করার অ্যানিমেশন:

<button class="button button-fill" id="toggleBtn">Toggle Box</button>
<div id="box" class="hidden-box">Some content here</div>

.hidden-box {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hidden-box.show {
  opacity: 1;
}

var $= Dom7;$('#toggleBtn').on('click', function() {
  $$('#box').toggleClass('show');
});

উপরের কোডে বোতাম ক্লিক করলে show ক্লাস যুক্ত বা সরানো হয়, যা opacity পরিবর্তনের মাধ্যমে অ্যানিমেশন তৈরি করে।

CSS Animations ব্যবহার করে কাস্টম মোশন

CSS Keyframes ব্যবহার করে কাস্টম অ্যানিমেশন তৈরি করা যায়, যা নির্দিষ্ট সময় পরপর উপাদানের স্টেট পরিবর্তন করতে পারে।

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}

.bounce {
  animation: bounce 1s infinite;
}

উপরের কোডে .bounce ক্লাস যুক্ত করলে উপাদান ক্রমাগত বাউন্স করবে।

JS বা Vue/React Integration সহ অ্যানিমেশন

যদি আপনি Framework7(Vue) বা Framework7(React) ব্যবহার করেন, তবে Transitions বা Animations লাইব্রেরির সাথে সহজে ইন্টিগ্রেট করতে পারবেন (যেমন GSAP, Animate.css, বা Vue/React-এর Transition কম্পোনেন্ট)। এভাবে স্টেট ম্যানেজমেন্টের সাথে অ্যানিমেশন সংযুক্ত করে UI কে আরও ইন্টারেক্টিভ করা যায়।

অ্যানিমেশন ব্যবহার করার সময় কিছু পরামর্শ

• সহজ এবং ক্ষণস্থায়ী রাখুন: খুব বেশি অ্যানিমেশন অ্যাপকে ধীর করে দিতে পারে। সংক্ষেপে এবং প্রয়োজনীয় জায়গায় অ্যানিমেশন ব্যবহার করুন।
• ইউজার এক্সপেরিয়েন্স বাড়ান: অ্যানিমেশন শুধু সাজসজ্জা নয়, ইউজারের দৃষ্টি নির্দেশনা বা অ্যাকশনের প্রতিক্রিয়া দেখানোর জন্য ব্যবহার করুন।
• পারফরম্যান্স খেয়াল রাখুন: CSS ট্রান্সফর্ম ব্যবহার করে হার্ডওয়্যার অ্যাক্সেলেশন পাওয়া যায়, যা অ্যানিমেশন স্মুথ করে।

Page এবং Element Level Animations ব্যবহার করে Framework7 অ্যাপের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করা যায়। ডিফল্ট পৃষ্ঠা ট্রান্সিশন, CSS ট্রান্সিশন, এবং কাস্টম keyframe অ্যানিমেশন ব্যবহার করে দ্রুত এবং কার্যকর অ্যানিমেশন যোগ করা সম্ভব।

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

১. পেজ ট্রানজিশন (Page Transitions)

Framework7 এর রাউটার সিস্টেম পেজ লোড এবং আনলোডের সময় বিভিন্ন ধরনের অ্যানিমেশন ব্যবহার করে। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে স্লাইড, ফেইড, এবং অন্যান্য ট্রানজিশন ইফেক্ট প্রদান করে।

ডিফল্ট পেজ ট্রানজিশন

Framework7 ডিফল্টভাবে পেজ ট্রানজিশন হিসেবে স্লাইড ইন/আউট ব্যবহার করে। উদাহরণস্বরূপ, iOS থিমে পেজ ডান থেকে বামে স্লাইড করে আসে, আর Material Design থিমে উপরে থেকে নিচে।

// নতুন পেজে নেভিগেট করা
app.router.navigate('/about/');

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

আপনি যদি কাস্টম ট্রানজিশন ব্যবহার করতে চান, তবে রাউট কনফিগারেশনে transition অপশন যোগ করতে পারেন।

{
  path: '/about/',
  url: './pages/about.html',
  options: {
    transition: 'f7-cover' // উদাহরণস্বরূপ, 'f7-cover' ট্রানজিশন ব্যবহার করা
  }
}

পেজ ট্রানজিশন বন্ধ করা

যদি আপনি কোনও পেজ ট্রানজিশন না চান, তাহলে animate অপশন false করতে পারেন।

{
  path: '/about/',
  url: './pages/about.html',
  options: {
    animate: false // ট্রানজিশন বন্ধ করা
  }
}

২. Modal এবং Popup অ্যানিমেশন

Framework7 এর Modal (মডাল), Popup (পপআপ), Sheet, এবং Action Sheet কম্পোনেন্টগুলোতে ডিফল্ট অ্যানিমেশন সাপোর্ট করে, যা এগুলোকে হালকা ফেইড বা স্লাইড ইন/আউট ইফেক্ট প্রদান করে।

পপআপ ওপেন এবং ক্লোজ অ্যানিমেশন

// পপআপ ওপেন করা
app.popup.open('.my-popup');

// পপআপ ক্লোজ করা
app.popup.close('.my-popup');

ডায়ালগ অ্যানিমেশন

// এলার্ট ডায়ালগ ওপেন করা
app.dialog.alert('Hello Framework7!', function () {
  console.log('Alert closed');
});

কাস্টম অ্যানিমেশন সহ মডাল

আপনি CSS ব্যবহার করে মডালের ওপেন এবং ক্লোজ অ্যানিমেশন কাস্টমাইজ করতে পারেন।

<!-- মডাল HTML -->
<div class="popup my-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">My Popup</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is a custom popup.</p>
        <a href="#" class="close-popup">Close</a>
      </div>
    </div>
  </div>
</div>

/* কাস্টম অ্যানিমেশন */
.my-popup {
  animation: fadeIn 0.5s ease;
}

.my-popup.popup-out {
  animation: fadeOut 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

// মডাল ওপেন এবং ক্লোজ ইভেন্ট হ্যান্ডল করা
var popup = app.popup.open('.my-popup');

popup.on('popup:open', function () {
  console.log('Popup opened');
});

popup.on('popup:close', function () {
  console.log('Popup closed');
});

৩. অ্যাকর্ডিয়ান (Accordion) অ্যানিমেশন

Framework7 এর অ্যাকর্ডিয়ান কম্পোনেন্টে টগল করার সময় স্বয়ংক্রিয়ভাবে স্লাইড ডাউন এবং স্লাইড আপ অ্যানিমেশন ব্যবহৃত হয়, যা বিষয়বস্তুকে সুন্দরভাবে প্রদর্শন করে।

অ্যাকর্ডিয়ান উদাহরণ

<div class="list accordion-list">
  <ul>
    <li class="accordion-item">
      <a class="item-content item-link" href="#">
        <div class="item-inner">
          <div class="item-title">Accordion Title 1</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="block">
          <p>Content for accordion 1.</p>
        </div>
      </div>
    </li>
    <li class="accordion-item">
      <a class="item-content item-link" href="#">
        <div class="item-inner">
          <div class="item-title">Accordion Title 2</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="block">
          <p>Content for accordion 2.</p>
        </div>
      </div>
    </li>
  </ul>
</div>

এই উদাহরণে, ইউজার যখন অ্যাকর্ডিয়ানের টাইটেলে ক্লিক করবে, তখন সংশ্লিষ্ট বিষয়বস্তু সুন্দরভাবে স্লাইড করে প্রদর্শিত এবং লুকানো হবে।

৪. CSS ব্যবহার করে কাস্টম অ্যানিমেশন

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

CSS Transition ব্যবহার করে কাস্টম অ্যানিমেশন

<button class="button button-fill" id="animateBtn">Animate Box</button>
<div id="box" class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: #2196f3;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.box.active {
  transform: translateX(200px);
  opacity: 0.5;
}

var $= Dom7;$('#animateBtn').on('click', function () {
  $$('#box').toggleClass('active');
});
এই উদাহরণে, বোতাম ক্লিক করলে বক্সের অবস্থান পরিবর্তন এবং অস্বচ্ছতা পরিবর্তিত হবে, যা একটি স্মুথ ট্রানজিশন ইফেক্ট তৈরি করবে।
CSS Keyframes ব্যবহার করে কাস্টম অ্যানিমেশন
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.bounce {
  animation: bounce 2s infinite;
}
Bouncing Text
এই উদাহরণে, .bounce ক্লাস যুক্ত করলে উপাদান ক্রমাগত বাউন্স করবে, যা একটি আকর্ষণীয় অ্যানিমেশন ইফেক্ট প্রদান করে।
৫. কাস্টম জাভাস্ক্রিপ্ট অ্যানিমেশন
Framework7 এর জাভাস্ক্রিপ্ট API ব্যবহার করে আরও ডাইনামিক এবং জটিল অ্যানিমেশন তৈরি করা যায়। আপনি JavaScript এর মাধ্যমে DOM এলিমেন্টের স্টাইল পরিবর্তন করতে পারেন বা Framework7 এর বিল্ট-ইন ফাংশন ব্যবহার করতে পারেন।
কাস্টম অ্যানিমেশন উদাহরণ
Fade In
Fade Out

.box {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.box.visible {
  opacity: 1;
}
var $$
 = Dom7;

$('#fadeInBtn').on('click', function () {$('#animatedBox').addClass('visible');
});

$('#fadeOutBtn').on('click', function () {$('#animatedBox').removeClass('visible');
});

এই উদাহরণে, দুটি বোতাম ব্যবহার করে একটি বক্সের ফেইড ইন এবং ফেইড আউট অ্যানিমেশন নিয়ন্ত্রণ করা হয়েছে।

৬. থিম ও প্ল্যাটফর্মভেদে অ্যানিমেশন

Framework7 বিভিন্ন থিম (iOS, Material Design) অনুসারে অ্যানিমেশন প্যাটার্ন নির্ধারণ করে। প্রতিটি থিমের নিজস্ব অ্যানিমেশন স্টাইল রয়েছে যা প্ল্যাটফর্মের নেটিভ লুক এবং ফিলকে মিলে।

থিম নির্বাচন

আপনি প্রজেক্ট তৈরির সময় থিম নির্বাচন করতে পারেন বা Runtime এ থিম পরিবর্তন করতে পারেন।

var app = new Framework7({
  root: '#app',
  theme: 'ios', // অথবা 'md' (Material Design)
});

থিমভেদে অ্যানিমেশন উদাহরণ

• iOS থিম: পেজ স্লাইড ইন ডান থেকে বামে, ডায়ালগ ফেইড ইন, অ্যাকর্ডিয়ান স্লাইড ডাউন/আপ।
• Material Design থিম: পেজ ফেইড ইন, মডাল স্কেল ইন, পপআপ ফেইড ইন।

সারাংশ

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

সম্পূর্ণ উদাহরণ

নীচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যেখানে Framework7 এর বিল্ট-ইন অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করা হয়েছে:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Framework7 Animation Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #ff5722;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
      transform: translateY(20px);
    }
    .box.visible {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="view view-main">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Animation Example</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <button class="button button-fill" id="showBox">Show Box</button>
            <button class="button button-fill" id="hideBox">Hide Box</button>
          </div>
          <div class="block">
            <div id="box" class="box"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
  <script>
    var app = new Framework7({
      root: '#app',
      theme: 'ios', // অথবা 'md'
    });

    var $= Dom7;$('#showBox').on('click', function () {
      $$('#box').addClass('visible');
    });

    $$('#hideBox').on('click', function () {
      $$('#box').removeClass('visible');
    });
  </script>
</body>
</html>

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

Framework7 এর বিল্ট-ইন অ্যানিমেশন এবং ট্রানজিশন ফিচারগুলি ব্যবহার করে আপনি সহজেই একটি স্মুথ, ডাইনামিক এবং প্রফেশনাল লুকিং অ্যাপ তৈরি করতে পারেন, যা আপনার ইউজারদের জন্য একটি উন্নত অভিজ্ঞতা প্রদান করবে।

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 এবং বিভিন্ন অ্যানিমেশন লাইব্রেরি ব্যবহার করে আরও উন্নত এবং ইন্টারঅ্যাক্টিভ অ্যানিমেশন তৈরি করা সম্ভব। এই ফিচারগুলো অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও প্রাণবন্ত এবং আকর্ষণীয় করে তুলবে।

Framework7 এ Hardware Accelerated Animations ব্যবহার করা অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে অত্যন্ত কার্যকর। হার্ডওয়্যার অ্যাক্সিলারেটেড অ্যানিমেশনগুলি GPU (গ্রাফিক্স প্রসেসিং ইউনিট) ব্যবহার করে দ্রুত এবং স্মুথ অ্যানিমেশন প্রদান করে, যা CPU ভিত্তিক অ্যানিমেশনগুলির তুলনায় অনেক বেশি কার্যকরী এবং কম ল্যাগ তৈরি করে।

Hardware Accelerated Animations কী?

Hardware Accelerated Animations হল এমন অ্যানিমেশন যা ডিভাইসের গ্রাফিক্স হার্ডওয়্যার (GPU) ব্যবহার করে দ্রুত এবং কার্যকরভাবে রেন্ডার করা হয়। সাধারণত CSS এর transform এবং opacity প্রপার্টি ব্যবহার করে এই ধরনের অ্যানিমেশন তৈরি করা হয়, যা GPU দ্বারা প্রক্রিয়াজাত করা যায় এবং স্মুথ ট্রানজিশন প্রদান করে।

কেন Hardware Acceleration ব্যবহার করবেন?

1. পারফরম্যান্স উন্নয়ন: GPU দ্রুত গ্রাফিক্স এবং অ্যানিমেশন রেন্ডার করতে পারে, যা স্মুথ এবং ফ্লুইড ইউজার এক্সপেরিয়েন্স প্রদান করে।
2. বেটার ব্যাটারি লাইফ: কার্যকরী অ্যানিমেশন CPU এর উপর কম বোঝা ফেলে, ফলে ডিভাইসের ব্যাটারি দীর্ঘস্থায়ী হয়।
3. কম ল্যাগ এবং জ্যাম: জটিল অ্যানিমেশনগুলিতে কম ল্যাগ এবং জ্যাম থাকে, যা ইউজারকে একটি প্রফেশনাল অভিজ্ঞতা দেয়।

Framework7 এ Hardware Accelerated Animations কিভাবে ব্যবহার করবেন?

Framework7 এ Hardware Accelerated Animations ব্যবহার করতে মূলত CSS এর transform এবং opacity প্রপার্টি ব্যবহার করা হয়। নিচে কিছু উদাহরণ দেওয়া হলো:

১. CSS Transforms ব্যবহার করে অ্যানিমেশন

/* CSS এ হার্ডওয়্যার অ্যাক্সিলারেটেড ট্রান্সফর্ম */
.animated-element {
  transition: transform 0.5s ease, opacity 0.5s ease;
  transform: translate3d(0, 0, 0);
}

.animated-element.move-right {
  transform: translate3d(100px, 0, 0);
}

<!-- HTML এ অ্যানিমেটেড এলিমেন্ট -->
<div class="animated-element">Move Me!</div>
<button onclick="moveElement()">Move Right</button>

<script>
  function moveElement() {
    document.querySelector('.animated-element').classList.toggle('move-right');
  }
</script>

২. Framework7 এর Transition API ব্যবহার করে অ্যানিমেশন

Framework7 নিজস্ব Transition API প্রদান করে, যা সহজে অ্যানিমেশন তৈরি এবং নিয়ন্ত্রণ করতে সাহায্য করে।

// Framework7 এর Transition API ব্যবহার করে কাস্টম অ্যানিমেশন
var app = new Framework7({
  // আপনার ফ্রেমওয়ার্ক৭ কনফিগারেশন
});

function showCustomAnimation() {
  app.dialog.alert('This is a custom animated dialog!', 'Animated Alert');
}

// CSS এ কাস্টম অ্যানিমেশন
<style>
  .animated-dialog {
    animation: fadeInUp 0.5s ease forwards;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
</style>

<!-- HTML এ বাটন -->
<button onclick="showCustomAnimation()">Show Animated Alert</button>

৩. JavaScript এর মাধ্যমে হার্ডওয়্যার অ্যাক্সিলারেটেড ট্রান্সফর্ম প্রয়োগ

// JavaScript দিয়ে সরাসরি স্টাইল পরিবর্তন করে অ্যানিমেশন প্রয়োগ
const element = document.querySelector('.animated-element');

function animateElement() {
  element.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
  element.style.transform = 'translate3d(100px, 0, 0)';
  element.style.opacity = '0.5';
}

document.querySelector('button').addEventListener('click', animateElement);

Best Practices for Hardware Accelerated Animations

1. Transform এবং Opacity ব্যবহার করুন: এই দুইটি প্রপার্টি GPU দ্বারা কার্যকরভাবে প্রক্রিয়াজাত করা যায় এবং স্মুথ অ্যানিমেশন প্রদান করে।
2. Avoid Layout Thrashing: অ্যানিমেশন চলাকালীন DOM এর লেআউট পরিবর্তন থেকে বিরত থাকুন, কারণ এটি পারফরম্যান্স ড্রপ করতে পারে।
3. Use translate3d Instead of translate: translate3d ব্যবহার করলে ব্রাউজার এলিমেন্টকে GPU লেয়ারতে প্রক্রিয়াজাত করে, যা অ্যানিমেশনকে আরও স্মুথ করে।
4. Minimize Repaints and Reflows: অ্যানিমেশন চলাকালীন স্টাইল পরিবর্তন থেকে বিরত থাকুন যা রেপেইন্ট বা রিফ্লো সৃষ্টি করতে পারে।
5. Optimize Animation Duration and Easing: অ্যানিমেশন খুব দ্রুত বা খুব ধীরে না হয়ে উপযুক্ত সময় এবং ইজিং ফাংশন ব্যবহার করুন যাতে ইউজার এক্সপেরিয়েন্স ভালো থাকে।

উদাহরণ: Carousel এ Hardware Accelerated Animation

Framework7 এর Carousel কম্পোনেন্টে Hardware Accelerated Animation ব্যবহার করা যায় translate3d প্রপার্টি দিয়ে।

<!-- HTML এ Carousel -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- নেভিগেশন বোতাম -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

// Framework7 এর Carousel সেটআপ
var app = new Framework7({
  // আপনার ফ্রেমওয়ার্ক৭ কনফিগারেশন
});

var swiper = new Swiper('.swiper-container', {
  speed: 600, // অ্যানিমেশন স্পিড
  effect: 'slide', // অ্যানিমেশন ইফেক্ট
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

/* CSS এ হার্ডওয়্যার অ্যাক্সিলারেটেড ট্রান্সফর্ম */
.swiper-slide {
  transition: transform 0.6s ease;
  transform: translate3d(0, 0, 0);
}

সারাংশ

Framework7 এ Hardware Accelerated Animations ব্যবহার করে আপনার অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্স উল্লেখযোগ্যভাবে উন্নত করতে পারেন। CSS এর transform এবং opacity প্রপার্টি, Framework7 এর Transition API, এবং JavaScript দিয়ে সরাসরি স্টাইল পরিবর্তন করে আপনি স্মুথ এবং কার্যকরী অ্যানিমেশন তৈরি করতে পারেন। Best practices অনুসরণ করলে আপনার অ্যাপ্লিকেশন আরও দ্রুত এবং ব্যবহারবান্ধব হবে।

Framework7 এর হার্ডওয়্যার অ্যাক্সিলারেটেড অ্যানিমেশনগুলি ব্যবহার করে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ, দ্রুত এবং প্রফেশনাল করে তুলুন!