JavaFX Animation এবং Transitions

JavaFX এ Animation এবং Transitions ব্যবহার করে UI উপাদানগুলোর মধ্যে মসৃণ অ্যানিমেশন এবং পরিবর্তন তৈরি করা সম্ভব। JavaFX গ্রাফিক্স এবং UI উপাদানগুলোর উপর বিভিন্ন ধরনের এনিমেশন তৈরি করতে সহায়ক টুলস প্রদান করে। এভাবে অ্যাপ্লিকেশনে গতিশীলতা এবং আকর্ষণীয়তা যোগ করা যায়।

JavaFX Animation Overview

JavaFX এ Animation এবং Transition এর মধ্যে কিছু পার্থক্য রয়েছে:

• Animation: এটি একটি সাধারণ শ্রেণী, যা বিভিন্ন ধরনের এনিমেশন তৈরি করতে ব্যবহৃত হয়। এটি অনেক ধরনের এনিমেশন প্রক্রিয়া পরিচালনা করতে সক্ষম।
• Transition: এটি Animation এর একটি বিশেষ ধরণ, যা নির্দিষ্ট গ্রাফিক্যাল উপাদানের মধ্যে পরিবর্তন বা রূপান্তরের জন্য ব্যবহৃত হয় (যেমন, একটি অবজেক্টের অবস্থান, আকার, অথবা আলোকমাত্রার পরিবর্তন)।

1. JavaFX Transition Types

JavaFX এ কয়েকটি সাধারণ Transition প্রকার রয়েছে:

• TranslateTransition: একটি অবজেক্টকে একটি নির্দিষ্ট অবস্থান থেকে অন্য অবস্থানে সরাতে ব্যবহার করা হয়।
• RotateTransition: একটি অবজেক্টকে ঘুরানোর জন্য ব্যবহৃত হয়।
• ScaleTransition: একটি অবজেক্টের আকার পরিবর্তন করতে ব্যবহৃত হয়।
• FadeTransition: একটি অবজেক্টকে অদৃশ্য থেকে দৃশ্যমান বা উল্টোভাবে দেখানোর জন্য ব্যবহৃত হয়।
• PathTransition: একটি অবজেক্টকে নির্দিষ্ট পথ ধরে চলার জন্য ব্যবহৃত হয়।

2. Transition Example: TranslateTransition

import javafx.animation.TranslateTransition;
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 JavaFXAnimationExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button("Click Me");
        
        // TranslateTransition তৈরি করা
        TranslateTransition translate = new TranslateTransition();
        translate.setNode(btn); // বাটনকে ট্রান্সলেট করতে হবে
        translate.setDuration(Duration.seconds(2)); // 2 সেকেন্ড সময়
        translate.setByX(200); // 200 পিক্সেল ডানদিকে সরানো
        translate.setCycleCount(TranslateTransition.INDEFINITE); // এন্ডলেস চক্রে চলবে
        translate.setAutoReverse(true); // ট্রান্সলেশন উল্টো পথে হবে

        btn.setOnAction(e -> {
            translate.play(); // ট্রান্সলেশন চালু করা
        });

        StackPane root = new StackPane();
        root.getChildren().add(btn);
        
        Scene scene = new Scene(root, 400, 300);
        
        primaryStage.setTitle("JavaFX Animation Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• TranslateTransition ব্যবহার করে বাটনটি 200 পিক্সেল ডান দিকে সরানো হয়।
• setCycleCount(TranslateTransition.INDEFINITE) ব্যবহার করে এনিমেশনটি একাধিক বার চলতে থাকে।
• setAutoReverse(true) ব্যবহার করলে এনিমেশনটি সম্পূর্ণ হওয়ার পরে উল্টো পথে ফিরে আসে।

3. RotateTransition Example

import javafx.animation.RotateTransition;
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 RotateTransitionExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button("Click to Rotate");

        // RotateTransition তৈরি করা
        RotateTransition rotate = new RotateTransition();
        rotate.setNode(btn); // বাটনটি ঘোরাতে হবে
        rotate.setDuration(Duration.seconds(1)); // 1 সেকেন্ড সময়
        rotate.setByAngle(360); // 360 ডিগ্রি ঘুরানো
        rotate.setCycleCount(RotateTransition.INDEFINITE); // ইনফিনিট চক্রে চলবে
        rotate.setAutoReverse(true); // ঘূর্ণন উল্টো পথে হবে

        btn.setOnAction(e -> {
            rotate.play(); // ঘূর্ণন শুরু করা
        });

        StackPane root = new StackPane();
        root.getChildren().add(btn);

        Scene scene = new Scene(root, 400, 300);

        primaryStage.setTitle("Rotate Transition Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• এখানে, RotateTransition ব্যবহার করে বাটনটিকে 360 ডিগ্রি ঘোরানো হচ্ছে।
• setCycleCount(RotateTransition.INDEFINITE) এর মাধ্যমে ইনফিনিট চক্রে ঘূর্ণন করা হয়।
• setAutoReverse(true) এর মাধ্যমে ঘূর্ণন উল্টো পথে ফিরে আসে।

4. FadeTransition Example

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 btn = new Button("Click to Fade");

        // FadeTransition তৈরি করা
        FadeTransition fade = new FadeTransition();
        fade.setNode(btn); // বাটনের উপর ফেড ট্রান্সিশন
        fade.setDuration(Duration.seconds(2)); // 2 সেকেন্ডে ফেড হবে
        fade.setFromValue(1.0); // সম্পূর্ণ দৃশ্যমান
        fade.setToValue(0.0); // সম্পূর্ণ অদৃশ্য
        fade.setCycleCount(1); // একবার হবে
        fade.setAutoReverse(true); // উল্টো দিকে ফেড হবে

        btn.setOnAction(e -> {
            fade.play(); // ফেড ট্রান্সিশন চালু করা
        });

        StackPane root = new StackPane();
        root.getChildren().add(btn);

        Scene scene = new Scene(root, 400, 300);

        primaryStage.setTitle("Fade Transition Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• FadeTransition ব্যবহার করে বাটনটিকে ধীরে ধীরে অদৃশ্য করা হয় (FromValue 1.0 থেকে ToValue 0.0)।
• setAutoReverse(true) এর মাধ্যমে ফেড উল্টো পথে অর্থাৎ দৃশ্যমান হতে শুরু করবে।

5. PathTransition Example

import javafx.animation.PathTransition;
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;
import javafx.scene.shape.Circle;

public class PathTransitionExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button("Click to Move");

        // Circle পাথ তৈরি করা
        Circle circlePath = new Circle(100, 100, 100); // একটি সার্কুলার পাথ

        // PathTransition তৈরি করা
        PathTransition pathTransition = new PathTransition();
        pathTransition.setNode(btn); // বাটনটিকে পাথের উপর চলতে হবে
        pathTransition.setPath(circlePath); // সার্কুলার পাথ সেট করা
        pathTransition.setInterpolator(javafx.animation.Interpolator.LINEAR); // লিনিয়ার ইন্টারপোলেটর ব্যবহার
        pathTransition.setCycleCount(PathTransition.INDEFINITE); // ইনফিনিট চক্রে চলবে
        pathTransition.setAutoReverse(true); // উল্টো পথে চলবে

        btn.setOnAction(e -> {
            pathTransition.play(); // পাথ ট্রান্সিশন চালু করা
        });

        StackPane root = new StackPane();
        root.getChildren().add(btn);

        Scene scene = new Scene(root, 400, 300);

        primaryStage.setTitle("Path Transition Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• PathTransition ব্যবহার করে একটি বাটনকে একটি সার্কুলার পাথে চলানোর জন্য সেট করা হয়েছে।
• setPath(circlePath) এর মাধ্যমে একটি সার্কুলার পাথ ব্যবহার করা হয়েছে, যাতে বাটনটি ওই সার্কেলটির চারপাশে চলবে।

JavaFX এর Animation এবং Transitions ব্যবহার করে আপনি UI উপাদানগুলির মধ্যে মসৃণ অ্যানিমেশন তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। JavaFX এ বিভিন্ন ধরনের ট্রানজিশন যেমন TranslateTransition, RotateTransition, ScaleTransition, FadeTransition, এবং PathTransition ব্যবহার করা যায় যা আপনার অ্যাপ্লিকেশনের UI কে আরও গতিশীল এবং প্রাণবন্ত করে তোলে।

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

JavaFX-এ অ্যানিমেশন তৈরি করার জন্য বিভিন্ন ধরনের ক্লাস এবং কৌশল রয়েছে, যেমন:

1. Transition Class: এটা একটি বেস ক্লাস যা বিভিন্ন ধরনের অ্যানিমেশন (যেমন, ট্রান্সলেট, রোটেট, স্কেল, ইত্যাদি) তৈরি করতে ব্যবহৃত হয়।
2. Timeline: এটি একটি অ্যানিমেশন ক্লাস যা নির্দিষ্ট সময়ের মধ্যে একটি বা একাধিক কীফ্রেমে পরিবর্তন করতে ব্যবহৃত হয়।

JavaFX অ্যানিমেশন খুবই সহজে তৈরি করা যায় এবং আপনাকে এই অ্যানিমেশনগুলিকে বিভিন্ন UI উপাদানের ওপর প্রয়োগ করতে সাহায্য করে।

JavaFX Animation এর ধরন:

1. Transition Animation:
   • এটি single transition effect প্রদান করে, যেমন TranslateTransition, RotateTransition, ScaleTransition, এবং FadeTransition। প্রত্যেকটি ট্রানজিশন UI উপাদানগুলোর অবস্থান বা বৈশিষ্ট্য পরিবর্তন করতে ব্যবহৃত হয়।
2. Timeline Animation:
   • এই অ্যানিমেশনের মাধ্যমে আপনি একাধিক keyframe ব্যবহার করে অ্যানিমেশন তৈরি করতে পারেন। এতে আপনি নির্দিষ্ট সময়ে উপাদানগুলোর পরিবর্তন কন্ট্রোল করতে পারেন।
3. Path Transition:
   • এই ট্রানজিশনটি একটি নির্দিষ্ট পথে (যেমন একটি রেখা বা কCurve) উপাদানকে অ্যানিমেট করে। এতে বিভিন্ন ধরনের পথ (path) ব্যবহার করা হয়, যেমন Line, CubicCurve, বা QuadCurve।

JavaFX Animation উদাহরণ:

1. TranslateTransition Animation:

এটি একটি উপাদানকে একটি স্থানে অন্য স্থানে স্থানান্তরিত করতে ব্যবহৃত হয়।

import javafx.animation.TranslateTransition;
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 TranslateTransitionExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // একটি বাটন তৈরি করা
        Button btn = new Button("Click Me!");
        
        // TranslateTransition তৈরি করা
        TranslateTransition translate = new TranslateTransition();
        translate.setNode(btn);
        translate.setDuration(Duration.seconds(2)); // 2 সেকেন্ডে অ্যানিমেশন হবে
        translate.setByX(200); // 200 পিক্সেল পর্যন্ত হরিজেন্টালি সরে যাবে
        translate.setCycleCount(TranslateTransition.INDEFINITE); // পুনরাবৃত্তি করবে
        translate.setAutoReverse(true); // প্রতি সাইকেলে পিছনে ফিরে যাবে

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

        StackPane root = new StackPane();
        root.getChildren().add(btn);
        
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("JavaFX Translate Transition");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• TranslateTransition ক্লাস ব্যবহার করে বাটনটি ২০০ পিক্সেল হরিজেন্টালি সরে যাবে।
• setCycleCount(TranslateTransition.INDEFINITE) এর মাধ্যমে অ্যানিমেশনটি অবিরাম চলতে থাকবে এবং setAutoReverse(true) এর মাধ্যমে অ্যানিমেশনটি প্রতি সাইকেলে উল্টো দিকে ফিরে যাবে।

2. FadeTransition Animation:

এটি একটি উপাদানকে হালকা বা গা dark ় করতে ব্যবহার করা হয়।

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 btn = new Button("Fade In/Out");

        // FadeTransition তৈরি করা
        FadeTransition fade = new FadeTransition();
        fade.setNode(btn);
        fade.setDuration(Duration.seconds(2)); // 2 সেকেন্ডে অ্যানিমেশন হবে
        fade.setFromValue(1.0); // পূর্ণ দৃশ্যমান (opacity 1.0)
        fade.setToValue(0.0); // অদৃশ্য (opacity 0.0)
        fade.setCycleCount(FadeTransition.INDEFINITE); // পুনরাবৃত্তি করবে
        fade.setAutoReverse(true); // প্রতি সাইকেলে উল্টো দিকে ফিরে যাবে

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

        StackPane root = new StackPane();
        root.getChildren().add(btn);
        
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("JavaFX Fade Transition");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• FadeTransition ব্যবহার করে বাটনের অপাসিটি পরিবর্তন করা হয়, ফলে এটি আস্তে আস্তে দৃশ্যমান থেকে অদৃশ্য হয়ে যাবে এবং আবার দৃশ্যমান হবে।

3. ScaleTransition Animation:

এটি উপাদানটির আকার পরিবর্তন করতে ব্যবহৃত হয়।

import javafx.animation.ScaleTransition;
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 ScaleTransitionExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // একটি বাটন তৈরি করা
        Button btn = new Button("Click to Scale");

        // ScaleTransition তৈরি করা
        ScaleTransition scale = new ScaleTransition();
        scale.setNode(btn);
        scale.setDuration(Duration.seconds(2)); // 2 সেকেন্ডে অ্যানিমেশন হবে
        scale.setByX(1.5); // 1.5 গুণ আকার বৃদ্ধি করবে
        scale.setByY(1.5); // 1.5 গুণ আকার বৃদ্ধি করবে

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

        StackPane root = new StackPane();
        root.getChildren().add(btn);
        
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("JavaFX Scale Transition");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• ScaleTransition ব্যবহার করে বাটনের আকার 1.5 গুণ বাড়ানো হয়।

JavaFX Timeline Animation:

Timeline অ্যানিমেশন দিয়ে আপনি একাধিক keyframe এর মাধ্যমে একটি উপাদানের একাধিক বৈশিষ্ট্যের পরিবর্তন নির্দিষ্ট সময়ের মধ্যে করতে পারেন।

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 TimelineExample extends Application {

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

        // Timeline তৈরি করা
        Timeline timeline = new Timeline(
            new KeyFrame(Duration.ZERO, e -> btn.setTranslateX(0)), // Initial position
            new KeyFrame(Duration.seconds(2), e -> btn.setTranslateX(200)) // Move to position X = 200
        );
        timeline.setCycleCount(Timeline.INDEFINITE); // Infinite animation
        timeline.setAutoReverse(true); // Reverse on each cycle

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

        StackPane root = new StackPane();
        root.getChildren().add(btn);
        
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("JavaFX Timeline Animation");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• Timeline ব্যবহার করে বাটনটি 0 পজিশন থেকে 200 পজিশনে চলে যাবে এবং এটি অবিরাম চলতে থাকবে।

JavaFX Animation এর সুবিধা:

1. কাস্টমাইজেশন: JavaFX অ্যানিমেশনগুলির মাধ্যমে আপনি UI উপাদানগুলির আচরণ পরিবর্তন করতে পারেন।
2. বিভিন্ন ট্রানজিশন: একাধিক অ্যানিমেশন ফিচার (Translate, Scale, Rotate, Fade, etc.) সহজেই প্রয়োগ করা যায়।
3. ইন্টারেক্টিভ অ্যাপ্লিকেশন: অ্যানিমেশন ইউজার ইন্টারফেসকে আরও ইন্টারেক্টিভ এবং দৃষ্টিনন্দন করে তোলে।

এভাবে JavaFX Animation ব্যবহার করে আপনি আপনার JavaFX অ্যাপ্লিকেশনে আকর্ষণীয় অ্যানিমেশন এবং গ্রাফিক্যাল ইফেক্ট যুক্ত করতে পারেন।

JavaFX একটি শক্তিশালী অ্যানিমেশন API সরবরাহ করে, যার মাধ্যমে আপনি আপনার ইউজার ইন্টারফেসে অ্যানিমেশন যোগ করতে পারেন। JavaFX এ তিনটি জনপ্রিয় এবং গুরুত্বপূর্ণ বিল্ট-ইন অ্যানিমেশন ক্লাস হল FadeTransition, TranslateTransition, এবং RotateTransition। এই অ্যানিমেশন ক্লাসগুলি ব্যবহার করে আপনি সহজেই আপনার UI উপাদানগুলিকে ফেড, সরানো বা ঘোরানোর মতো অ্যানিমেশন তৈরি করতে পারবেন।

১. FadeTransition (ফেড অ্যানিমেশন):

FadeTransition ক্লাস ব্যবহার করে একটি UI উপাদান ধীরে ধীরে দৃশ্যমান বা অদৃশ্য করা যায়। এটি একটি সহজ ফেড-ইন বা ফেড-আউট অ্যানিমেশন তৈরির জন্য ব্যবহৃত হয়।

FadeTransition Example:

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 btn = new Button("Click Me");

        // FadeTransition তৈরি করা
        FadeTransition fadeTransition = new FadeTransition(Duration.seconds(2), btn);
        fadeTransition.setFromValue(1.0); // পুরানো দৃশ্যমানতা
        fadeTransition.setToValue(0.0); // নতুন দৃশ্যমানতা (অদৃশ্য)
        fadeTransition.setCycleCount(2); // দুইবার অ্যানিমেশন করবে
        fadeTransition.setAutoReverse(true); // অ্যানিমেশন শেষে স্বয়ংক্রিয়ভাবে রিভার্স হবে

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

        // StackPane তৈরি এবং বাটন যোগ করা
        StackPane root = new StackPane();
        root.getChildren().add(btn);

        // সীন এবং স্টেজ তৈরি
        Scene scene = new Scene(root, 300, 200);
        primaryStage.setTitle("FadeTransition Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• এখানে, FadeTransition একটি বাটনে (button) ব্যবহার করা হয়েছে। অ্যানিমেশনটি বাটনের দৃশ্যমানতা পরিবর্তন করবে (ফেড ইন এবং ফেড আউট)।
• setFromValue() এবং setToValue() দিয়ে অ্যানিমেশনের শুরু এবং শেষ অবস্থান নির্ধারণ করা হয়।
• setCycleCount() দিয়ে অ্যানিমেশন কতবার চলবে তা নির্ধারণ করা হয়।
• setAutoReverse(true) দিয়ে অ্যানিমেশন শেষে উল্টানো হবে।

২. TranslateTransition (সরাসরি স্থানান্তর অ্যানিমেশন):

TranslateTransition ক্লাস ব্যবহার করে একটি UI উপাদানকে একটি নির্দিষ্ট সময়ের মধ্যে স্থানান্তর করা যায়, যা সরানো বা নড়ানো অনুভূতি সৃষ্টি করে।

TranslateTransition Example:

import javafx.animation.TranslateTransition;
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 TranslateTransitionExample extends Application {

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

        // TranslateTransition তৈরি করা
        TranslateTransition translateTransition = new TranslateTransition(Duration.seconds(2), btn);
        translateTransition.setByX(200); // ২০০ পিক্সেল ডান দিকে স্থানান্তর
        translateTransition.setByY(100); // ১০০ পিক্সেল উপরে স্থানান্তর

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

        // StackPane তৈরি এবং বাটন যোগ করা
        StackPane root = new StackPane();
        root.getChildren().add(btn);

        // সীন এবং স্টেজ তৈরি
        Scene scene = new Scene(root, 300, 200);
        primaryStage.setTitle("TranslateTransition Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• TranslateTransition ক্লাস ব্যবহার করে, আমরা বাটনকে X এবং Y অক্ষ বরাবর সরিয়েছি। setByX() এবং setByY() মেথড দ্বারা কী পরিমাণে স্থানান্তরিত হবে তা নির্ধারণ করা হয়।

৩. RotateTransition (ঘূর্ণন অ্যানিমেশন):

RotateTransition ক্লাস ব্যবহার করে একটি UI উপাদানকে একটি নির্দিষ্ট সময়ের মধ্যে ঘোরানো যায়।

RotateTransition Example:

import javafx.animation.RotateTransition;
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 RotateTransitionExample extends Application {

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

        // RotateTransition তৈরি করা
        RotateTransition rotateTransition = new RotateTransition(Duration.seconds(2), btn);
        rotateTransition.setByAngle(360); // ৩৬০ ডিগ্রি ঘোরানো
        rotateTransition.setCycleCount(1); // একবার ঘোরানো হবে
        rotateTransition.setAutoReverse(false); // ঘোরানোর পরে উল্টানো হবে না

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

        // StackPane তৈরি এবং বাটন যোগ করা
        StackPane root = new StackPane();
        root.getChildren().add(btn);

        // সীন এবং স্টেজ তৈরি
        Scene scene = new Scene(root, 300, 200);
        primaryStage.setTitle("RotateTransition Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

ব্যাখ্যা:

• এখানে RotateTransition ব্যবহার করা হয়েছে যাতে বাটনটি ২ সেকেন্ডে ৩৬০ ডিগ্রি ঘুরবে। setByAngle() মেথড দিয়ে ঘূর্ণনের কোণ নির্ধারণ করা হয়।

Common Transition Properties:

এই অ্যানিমেশন ট্রানজিশনগুলির জন্য কিছু সাধারণ প্রপার্টি আছে:

• Duration: অ্যানিমেশনের সময়কাল নির্ধারণ করে। Duration.seconds(2) দ্বারা ২ সেকেন্ডের সময়কাল নির্ধারণ করা হয়।
• Cycle Count: অ্যানিমেশন কতবার চালানো হবে তা নির্ধারণ করে।
• Auto Reverse: যদি true হয়, তাহলে অ্যানিমেশনটি শেষ হওয়ার পর উল্টো দিকে চলে যাবে।

JavaFX এ বিল্ট-ইন অ্যানিমেশন ক্লাসগুলি যেমন FadeTransition, TranslateTransition, এবং RotateTransition ব্যবহার করে সহজেই আপনার অ্যাপ্লিকেশনের UI উপাদানগুলিতে অ্যানিমেশন যোগ করতে পারেন। এটি ইউজার ইন্টারঅ্যাকশনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে, এবং JavaFX-এ অ্যাপ্লিকেশনকে আরও ডাইনামিক ও আকর্ষণীয় করে তোলে।

JavaFX Transition হল একটি খুব শক্তিশালী ফিচার যা UI উপাদানগুলির মধ্যে অ্যানিমেশন এবং পরিবর্তন পরিচালনা করতে ব্যবহৃত হয়। JavaFX-এ দুটি প্রধান ধরণের ট্রানজিশন রয়েছে: Sequential Transitions এবং Parallel Transitions। এই দুটি ট্রানজিশন আপনাকে এক বা একাধিক UI উপাদানের মধ্যে অ্যানিমেশন তৈরি করতে সহায়তা করে।

1. Sequential Transitions (সিকোয়েন্সিয়াল ট্রানজিশন)

Sequential Transitions হল যখন একাধিক অ্যানিমেশন একে অপরের পরে পরপর চলে। একটি ট্রানজিশন শেষ হওয়ার পরই পরবর্তী ট্রানজিশন শুরু হয়। এটি সাধারণত একটি নির্দিষ্ট অর্ডারে অ্যানিমেশন ঘটানোর জন্য ব্যবহৃত হয়। JavaFX-এ, আপনি SequentialTransition ক্লাস ব্যবহার করে সিকোয়েন্সিয়াল ট্রানজিশন তৈরি করতে পারেন।

উদাহরণ: Sequential Transitions

import javafx.animation.ScaleTransition;
import javafx.animation.SequentialTransition;
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 SequentialTransitionExample extends Application {

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

        // প্রথম ট্রানজিশন (Scale)
        ScaleTransition scaleTransition = new ScaleTransition(Duration.seconds(1), btn);
        scaleTransition.setByX(2);
        scaleTransition.setByY(2);

        // দ্বিতীয় ট্রানজিশন (Rotate)
        javafx.animation.RotateTransition rotateTransition = new javafx.animation.RotateTransition(Duration.seconds(1), btn);
        rotateTransition.setByAngle(90);

        // SequentialTransition তৈরি করা
        SequentialTransition sequentialTransition = new SequentialTransition(btn, scaleTransition, rotateTransition);

        // বাটনে ইভেন্ট হ্যান্ডলার যোগ করা
        btn.setOnAction(event -> sequentialTransition.play()); // ট্রানজিশন শুরু করা

        // StackPane layout তৈরি করা
        StackPane root = new StackPane();
        root.getChildren().add(btn);

        // Scene তৈরি এবং সেট করা
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Sequential Transitions Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

এখানে কী হচ্ছে?

1. প্রথমে, ScaleTransition তৈরি করা হয়েছে যা বাটনটির আকার বাড়িয়ে দেয়।
2. তারপর RotateTransition তৈরি করা হয়েছে যা বাটনটি 90 ডিগ্রি ঘুরিয়ে দেয়।
3. এই দুটি ট্রানজিশনকে SequentialTransition এর মধ্যে যুক্ত করা হয়েছে, যার ফলে একটির পর একটি ট্রানজিশন হবে।
4. বাটনটি ক্লিক করলে প্রথমে স্কেল অ্যানিমেশন চলবে এবং তারপরে রোটেট অ্যানিমেশন চালু হবে।

2. Parallel Transitions (প্যারালাল ট্রানজিশন)

Parallel Transitions হল যখন একাধিক অ্যানিমেশন একসাথে (একই সময়ে) চলে। JavaFX-এ, আপনি ParallelTransition ক্লাস ব্যবহার করে একাধিক ট্রানজিশন একসাথে চালাতে পারেন।

উদাহরণ: Parallel Transitions

import javafx.animation.FadeTransition;
import javafx.animation.ParallelTransition;
import javafx.animation.ScaleTransition;
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 ParallelTransitionExample extends Application {

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

        // প্রথম ট্রানজিশন (Scale)
        ScaleTransition scaleTransition = new ScaleTransition(Duration.seconds(2), btn);
        scaleTransition.setByX(2);
        scaleTransition.setByY(2);

        // দ্বিতীয় ট্রানজিশন (Fade)
        FadeTransition fadeTransition = new FadeTransition(Duration.seconds(2), btn);
        fadeTransition.setToValue(0); // ফেড আউট

        // ParallelTransition তৈরি করা
        ParallelTransition parallelTransition = new ParallelTransition(btn, scaleTransition, fadeTransition);

        // বাটনে ইভেন্ট হ্যান্ডলার যোগ করা
        btn.setOnAction(event -> parallelTransition.play()); // ট্রানজিশন শুরু করা

        // StackPane layout তৈরি করা
        StackPane root = new StackPane();
        root.getChildren().add(btn);

        // Scene তৈরি এবং সেট করা
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Parallel Transitions Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

এখানে কী হচ্ছে?

1. প্রথমে, ScaleTransition তৈরি করা হয়েছে যা বাটনটির আকার বাড়িয়ে দেয়।
2. এরপর, FadeTransition তৈরি করা হয়েছে যা বাটনটি অদৃশ্য করে দেয়।
3. ParallelTransition এর মধ্যে এই দুটি ট্রানজিশন একসাথে যুক্ত করা হয়েছে, যার ফলে দুটি ট্রানজিশন একে অপরের সাথে সমানভাবে চলে।

Comparing Sequential vs Parallel Transitions

• Sequential Transition:
  • অ্যানিমেশন একে একে চলে।
  • একটি অ্যানিমেশন শেষ হওয়ার পরে পরবর্তী অ্যানিমেশন শুরু হয়।
  • এটি সাধারণত অর্ডার বজায় রাখার জন্য ব্যবহৃত হয়।
• Parallel Transition:
  • অ্যানিমেশন একসাথে চলে।
  • দুটি বা আরও বেশি অ্যানিমেশন একসাথে চালানো হয়।
  • এটি দ্রুত ফলাফল পাওয়ার জন্য ব্যবহৃত হয়।

JavaFX Transition-এর অন্যান্য প্রকার:

JavaFX-এ আপনি বিভিন্ন ধরনের ট্রানজিশন ব্যবহার করতে পারেন, যেমন:

• FadeTransition: উপাদানটির দৃশ্যমানতা পরিবর্তন করতে ব্যবহৃত হয়।
• TranslateTransition: উপাদানটির স্থানান্তর বা পজিশন পরিবর্তন করতে ব্যবহৃত হয়।
• RotateTransition: উপাদানটিকে ঘুরানোর জন্য ব্যবহৃত হয়।
• ScaleTransition: উপাদানটির আকার পরিবর্তন করতে ব্যবহৃত হয়।
• PathTransition: একটি নির্দিষ্ট পথ অনুসরণ করে উপাদানটির চলাচল করানোর জন্য ব্যবহৃত হয়।

সারাংশ:

• Sequential Transitions একাধিক অ্যানিমেশনকে একটি নির্দিষ্ট অর্ডারে একে একে চালায়।
• Parallel Transitions একাধিক অ্যানিমেশনকে একসাথে চালায়।
• JavaFX-এ ট্রানজিশন ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন, যার মাধ্যমে ইউজারের অভিজ্ঞতা উন্নত হয়।

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 এ অ্যানিমেশন যোগ করার মাধ্যমে আপনি একটি ইন্টারেক্টিভ এবং দৃষ্টিনন্দন ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে পারবেন।