Complex Animations তৈরি করা গাইড ও নোট

Ionic অ্যাপে Complex Animations তৈরি করা খুবই সহজ, কারণ Ionic প্ল্যাটফর্মে অনেক ধরনের অ্যানিমেশন সহজেই ইমপ্লিমেন্ট করা যায়। Ionic ব্যবহার করে আপনি CSS অথবা JavaScript (Angular Animation) এর মাধ্যমে কমপ্লেক্স অ্যানিমেশন তৈরি করতে পারেন। এখানে আমরা কিছু সাধারণ এবং কমপ্লেক্স অ্যানিমেশন তৈরির প্রক্রিয়া দেখব।

১. Ionic CSS Animations

Ionic CSS Animations ব্যবহার করে সহজভাবে অ্যানিমেশন তৈরি করা যেতে পারে। সাধারণত আপনি CSS এর @keyframes বা transition প্রোপার্টি ব্যবহার করে অ্যানিমেশনগুলো নিয়ন্ত্রণ করতে পারেন।

১.১ Fade In এবং Fade Out Animations

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

home.page.scss ফাইলে:

.fade-in {
  animation: fadeIn 2s ease-in-out forwards;
}

.fade-out {
  animation: fadeOut 2s ease-in-out forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

home.page.html ফাইলে:

<ion-content>
  <div [ngClass]="isVisible ? 'fade-in' : 'fade-out'">
    <p>This content will fade in and out</p>
  </div>
  <ion-button (click)="toggleVisibility()">Toggle Fade</ion-button>
</ion-content>

home.page.ts ফাইলে:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  isVisible = true;

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

এখানে:

• @keyframes দিয়ে ফেড ইন এবং ফেড আউট অ্যানিমেশন তৈরি করা হয়েছে।
• ngClass দিয়ে ক্লাস পরিবর্তন করে অ্যানিমেশন চালানো হচ্ছে।

২. Ionic Animations with Angular Animations

Ionic অ্যাপে Angular Animations ব্যবহার করে আরও কমপ্লেক্স অ্যানিমেশন তৈরি করা সম্ভব। Angular Animations এর মাধ্যমে আপনি ট্রানজিশন, স্টেট পরিবর্তন এবং বিভিন্ন অ্যানিমেশন ইফেক্ট তৈরি করতে পারবেন।

২.১ Angular Animations সেটআপ

প্রথমে আপনাকে @angular/animations মডিউলটি ইম্পোর্ট করতে হবে:

app.module.ts ফাইলে:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

২.২ Bounce Animation Example

এখন, আমরা একটি Bounce অ্যানিমেশন তৈরি করব যা একটি বাটন ক্লিক করলে দৃশ্যমান হবে।

home.page.ts ফাইলে:

import { Component } from '@angular/core';
import { trigger, transition, style, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
  animations: [
    trigger('bounce', [
      transition('void => *', [
        animate('1s ease-in', keyframes([
          style({ transform: 'translateY(0)', offset: 0 }),
          style({ transform: 'translateY(-30px)', offset: 0.5 }),
          style({ transform: 'translateY(0)', offset: 1 })
        ]))
      ])
    ])
  ]
})
export class HomePage {
  showElement = false;

  toggleBounce() {
    this.showElement = !this.showElement;
  }
}

home.page.html ফাইলে:

<ion-content>
  <div *ngIf="showElement" [@bounce]>
    <ion-button>Bounce Button</ion-button>
  </div>
  <ion-button (click)="toggleBounce()">Toggle Bounce</ion-button>
</ion-content>

এখানে:

• keyframes ব্যবহার করে বাউন্স অ্যানিমেশন তৈরি করা হয়েছে।
• void => * ট্রানজিশন দিয়ে এলিমেন্টের উপস্থিতি এবং অদৃশ্য হওয়ার সময় অ্যানিমেশন অ্যাপ্লাই করা হচ্ছে।

৩. Ionic Native Animations (Ionics' Animation API)

Ionic 4 এবং পরবর্তী ভার্সনে Ionic Animation API সরাসরি মোবাইল অ্যাপ্লিকেশনগুলিতে অ্যানিমেশন যোগ করার জন্য একটি শক্তিশালী উপায়। এটি Angular এর সাথে সহজে কাজ করে।

৩.১ Ionic Animation API ব্যবহার করা

home.page.ts ফাইলে:

import { Component } from '@angular/core';
import { AnimationController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  constructor(private animationCtrl: AnimationController) {}

  triggerAnimation() {
    const animation = this.animationCtrl.create()
      .addElement(document.querySelector('.box'))
      .duration(1000)
      .iterations(1)
      .keyframes([
        { offset: 0, transform: 'scale(0)' },
        { offset: 0.5, transform: 'scale(1.2)' },
        { offset: 1, transform: 'scale(1)' },
      ]);

    animation.play();
  }
}

home.page.html ফাইলে:

<ion-content>
  <div class="box" style="width: 100px; height: 100px; background-color: red;"></div>
  <ion-button (click)="triggerAnimation()">Trigger Animation</ion-button>
</ion-content>

এখানে:

• AnimationController ব্যবহার করে একটি এলিমেন্টে স্কেল অ্যানিমেশন তৈরি করা হয়েছে।
• keyframes এর মাধ্যমে অ্যানিমেশন কীগুলি এবং ট্রানজিশন টাইম সেট করা হয়েছে।

৪. Advanced Animations: Sequence of Animations

আপনি একাধিক অ্যানিমেশন একসাথে বা নির্দিষ্ট সময়ে একে একে চালাতে পারেন। উদাহরণস্বরূপ, আমরা দুটি অ্যানিমেশন একসাথে চালাবো।

home.page.ts ফাইলে:

import { Component } from '@angular/core';
import { AnimationController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  constructor(private animationCtrl: AnimationController) {}

  triggerMultipleAnimations() {
    const animation1 = this.animationCtrl.create()
      .addElement(document.querySelector('.box1'))
      .duration(1000)
      .keyframes([
        { offset: 0, transform: 'translateX(0)' },
        { offset: 1, transform: 'translateX(200px)' },
      ]);

    const animation2 = this.animationCtrl.create()
      .addElement(document.querySelector('.box2'))
      .duration(1000)
      .keyframes([
        { offset: 0, transform: 'translateY(0)' },
        { offset: 1, transform: 'translateY(200px)' },
      ]);

    animation1.play();
    animation2.play();
  }
}

home.page.html ফাইলে:

<ion-content>
  <div class="box1" style="width: 100px; height: 100px; background-color: red; margin-bottom: 10px;"></div>
  <div class="box2" style="width: 100px; height: 100px; background-color: blue;"></div>
  <ion-button (click)="triggerMultipleAnimations()">Trigger Multiple Animations</ion-button>
</ion-content>

এখানে:

• দুটি আলাদা অ্যানিমেশন একসাথে চালানো হয়েছে।
• একে একে বা একসাথে অ্যানিমেশন চালানোর জন্য play() ফাংশন ব্যবহার করা হয়েছে।

সারাংশ

• CSS Animations সহজ এবং দ্রুত অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়, যেমন ফেড ইন/আউট, স্কেল, রোটেট ইত্যাদি।
• Angular Animations আরও কমপ্লেক্স এবং কাস্টম অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়, যেমন বাউন্স, স্লাইড, শেক ইত্যাদি।
• Ionic Animation API ব্যবহার করে মোবাইল অ্যাপ্লিকেশনগুলিতে অত্যাধুনিক অ্যানিমেশন তৈরি করা যেতে পারে, যা দ্রুত এবং শক্তিশালী।
• Animation Sequences এর মাধ্যমে একাধিক অ্যানিমেশন একসাথে বা সময়মতো চালানো যেতে পারে।

এগুলি ছিল Ionic অ্যাপে Complex Animations তৈরি করার প্রক্রিয়া।