Custom Animation তৈরি করা এবং প্রয়োগ করা

JavaFX এ Custom Animation তৈরি করা খুবই সহজ এবং এটি আপনাকে আপনার অ্যাপ্লিকেশনে মজার এবং ইন্টারেকটিভ অ্যানিমেশন যুক্ত করার সুযোগ দেয়। JavaFX এ অ্যানিমেশন তৈরি করার জন্য বিভিন্ন ক্লাস ও মেথড রয়েছে, যেমন Timeline, KeyFrame, এবং TranslateTransition। কিন্তু, আপনি যদি কাস্টম অ্যানিমেশন তৈরি করতে চান, তবে আপনাকে Timeline এবং KeyFrame ক্লাস ব্যবহার করতে হবে।

1. JavaFX অ্যানিমেশন কনসেপ্ট

JavaFX এ কাস্টম অ্যানিমেশন তৈরি করার জন্য মূলত দুটি বিষয় ব্যবহার করা হয়:

• Timeline: অ্যানিমেশন টাইমলাইনের সময় নির্ধারণ করে, যেখানে একাধিক কীগুলি (keyframes) থাকে।
• KeyFrame: এটি নির্দিষ্ট সময়ের মধ্যে অ্যানিমেশনের যে স্টেট (পরিস্থিতি) হবে তা নির্ধারণ করে।

2. Custom Animation উদাহরণ

নিচে একটি উদাহরণ দেওয়া হয়েছে যেখানে আমরা একটি কাস্টম অ্যানিমেশন তৈরি করেছি যা একটি বাটনকে স্ক্রীনে স্থানান্তরিত (move) করবে।

Custom Animation উদাহরণ:

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class CustomAnimationExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // বাটন তৈরি
        Button button = new Button("Click Me!");
        
        // একটি Circle তৈরি
        Circle circle = new Circle(50, Color.RED);
        
        // StackPane লেআউট তৈরি
        StackPane root = new StackPane();
        root.getChildren().addAll(circle, button);
        
        // Timeline অ্যানিমেশন তৈরি
        Timeline timeline = new Timeline();
        
        // KeyFrame তৈরি - সময় এবং অবস্থান নির্ধারণ করা
        KeyFrame keyFrame = new KeyFrame(Duration.seconds(0.5), 
            e -> circle.setTranslateX(circle.getTranslateX() + 10));  // 0.5 সেকেন্ডে 10 পিক্সেল ডানদিকে সরবে
        timeline.getKeyFrames().add(keyFrame);
        
        // Timeline অ্যানিমেশন চালু করার জন্য
        button.setOnAction(e -> timeline.play());  // বাটন ক্লিক করলে অ্যানিমেশন চালু হবে
        
        // Scene তৈরি
        Scene scene = new Scene(root, 400, 300);
        
        // স্টেজ সেট করা
        primaryStage.setTitle("Custom Animation Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

ব্যাখ্যা:

1. Button এবং Circle:
   • এখানে একটি Button এবং একটি Circle তৈরি করা হয়েছে।
   • Circle টি শুরুতে রেড কালারের এবং ৫০ পিক্সেল ব্যাসার্ধযুক্ত।
2. Timeline এবং KeyFrame:
   • Timeline হল একটি অ্যানিমেশন টাইমলাইন, যা সময়ের সাথে সাথে বিভিন্ন KeyFrame নির্ধারণ করে।
   • একটি KeyFrame তৈরি করা হয়েছে যা প্রতি 0.5 সেকেন্ডে circle.setTranslateX() ব্যবহার করে বৃত্তটির X পজিশন পরিবর্তন করবে (অর্থাৎ, বৃত্তটি প্রতি 0.5 সেকেন্ডে 10 পিক্সেল ডান দিকে সরবে)।
3. Button Event Handler:
   • button.setOnAction(e -> timeline.play());: যখন বাটনটি ক্লিক করা হবে, তখন Timeline অ্যানিমেশন শুরু হবে, যা বৃত্তটি সরাতে থাকবে।

3. Custom Transition Animation উদাহরণ

এখন আমরা একটি Transition অ্যানিমেশন তৈরি করব, যেখানে একটি UI উপাদান যেমন একটি বাটন ধীরে ধীরে দৃশ্যমান (fade in) হবে।

Custom Transition উদাহরণ (Fade Transition):

import javafx.animation.FadeTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class FadeTransitionExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // বাটন তৈরি
        Button button = new Button("Click Me!");
        
        // StackPane লেআউট তৈরি
        StackPane root = new StackPane();
        root.getChildren().add(button);
        
        // FadeTransition তৈরি - বাটনকে ফেড ইন করা
        FadeTransition fadeTransition = new FadeTransition(Duration.seconds(2), button);
        fadeTransition.setFromValue(0);  // শুরুতে ০% দৃশ্যমান হবে
        fadeTransition.setToValue(1);    // ২ সেকেন্ডে ১০০% দৃশ্যমান হবে
        fadeTransition.setCycleCount(1); // একবারই হবে
        fadeTransition.setAutoReverse(false);
        
        // বাটন ক্লিক করলে ফেড ট্রানজিশন চালু হবে
        button.setOnAction(e -> fadeTransition.play());
        
        // Scene তৈরি
        Scene scene = new Scene(root, 300, 200);
        
        // স্টেজ সেট করা
        primaryStage.setTitle("Fade Transition Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

ব্যাখ্যা:

1. FadeTransition:
   • FadeTransition ব্যবহার করে, বাটনটি প্রথমে অদৃশ্য (opacity 0) অবস্থায় থাকবে এবং পরে ২ সেকেন্ডের মধ্যে সম্পূর্ণ দৃশ্যমান (opacity 1) হবে।
   • setFromValue(0) দিয়ে বাটনের শুরুর opacity সেট করা হয়েছে এবং setToValue(1) দিয়ে শেষ opacity সেট করা হয়েছে।
2. Button Event Handler:
   • button.setOnAction(e -> fadeTransition.play());: বাটন ক্লিক করলে ফেড অ্যানিমেশন শুরু হবে।

4. KeyFrame Animations: Complex Example

JavaFX এর Timeline এবং KeyFrame ব্যবহার করে আপনি জটিল অ্যানিমেশন তৈরি করতে পারেন। এখানে একটি উদাহরণ দেওয়া হয়েছে যেখানে একটি বাটন একাধিক স্টেপে চলে।

KeyFrame Animation উদাহরণ:

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ComplexKeyFrameAnimationExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // বাটন তৈরি
        Button button = new Button("Click Me!");

        // StackPane লেআউট তৈরি
        StackPane root = new StackPane();
        root.getChildren().add(button);

        // Timeline তৈরি
        Timeline timeline = new Timeline();

        // KeyFrame তৈরি - বাটনকে একাধিক ধাপে সরানোর জন্য
        KeyFrame keyFrame1 = new KeyFrame(Duration.seconds(1), e -> button.setTranslateX(50));
        KeyFrame keyFrame2 = new KeyFrame(Duration.seconds(2), e -> button.setTranslateY(50));
        KeyFrame keyFrame3 = new KeyFrame(Duration.seconds(3), e -> button.setTranslateX(-50));
        KeyFrame keyFrame4 = new KeyFrame(Duration.seconds(4), e -> button.setTranslateY(-50));

        // KeyFrame গুলো timeline-এ যোগ করা
        timeline.getKeyFrames().addAll(keyFrame1, keyFrame2, keyFrame3, keyFrame4);

        // বাটন ক্লিক করলে অ্যানিমেশন শুরু হবে
        button.setOnAction(e -> timeline.play());

        // Scene তৈরি
        Scene scene = new Scene(root, 300, 200);

        // স্টেজ সেট করা
        primaryStage.setTitle("Complex KeyFrame Animation Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

ব্যাখ্যা:

1. KeyFrames:
   • এখানে ৪টি KeyFrame তৈরি করা হয়েছে যেখানে প্রতিটি KeyFrame একটি নির্দিষ্ট সময় পরে বাটনের অবস্থান পরিবর্তন করবে।
   • প্রথম KeyFrame বাটনকে 1 সেকেন্ডে X-অক্ষ বরাবর 50 পিক্সেল সরাবে, দ্বিতীয় KeyFrame Y-অক্ষ বরাবর 50 পিক্সেল সরাবে এবং অন্যান্য KeyFrames বাটনটি অন্যভাবে সরাবে।
2. Timeline:
   • Timeline ব্যবহার করে একাধিক KeyFrame কে সিকোয়েন্সে প্লে করা হয়েছে।

JavaFX এ কাস্টম অ্যানিমেশন তৈরি করা সহজ এবং আপনার অ্যাপ্লিকেশনের রূপ এবং অনুভূতি উন্নত করতে সাহায্য করে। Timeline এবং KeyFrame এর মাধ্যমে আপনি বিভিন্ন ধরনের অ্যানিমেশন তৈরি করতে পারেন, যেমন বাটনের চলাচল, ফেড ইন/আউট, স্কেল, রোটেশন ইত্যাদি। JavaFX এ অ্যানিমেশন যোগ করার মাধ্যমে আপনি একটি ইন্টারেক্টিভ এবং দৃষ্টিনন্দন ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে পারবেন।