จากสมศรี 422R สู่หุ่นยนต๋ในยุค llm

สอนสร้างแอนิเมชันแบบ macOS ใน JavaFX

JavaFX เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้าง UI ที่ทันสมัยและสามารถเพิ่มแอนิเมชันเพื่อทำให้แอปพลิเคชันดูมีชีวิตชีวามากขึ้น เช่น การขยายแท็บหรือเอฟเฟกต์เมื่อเมาส์ชี้ปุ่ม ซึ่งสามารถทำให้ผู้ใช้รู้สึกเหมือนใช้ macOS ได้ เรามาดูกันว่าคุณสามารถสร้างแอนิเมชันเหล่านี้ใน JavaFX ได้อย่างไร

---

เอฟเฟกต์ Hover บนปุ่ม

เมื่อต้องการให้ปุ่มดูโดดเด่นเมื่อผู้ใช้เลื่อนเมาส์ไปชี้ เราสามารถใช้ ScaleTransition เพื่อสร้างเอฟเฟกต์การขยายได้:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.Color;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.animation.ScaleTransition;
import javafx.util.Duration;

public class ButtonHoverEffect extends Application {
    @Override
    public void start(Stage stage) {
        Button button = new Button("Hover Me");

        DropShadow shadow = new DropShadow();
        shadow.setColor(Color.LIGHTGRAY);
        button.setEffect(shadow);

        ScaleTransition scaleUp = new ScaleTransition(Duration.millis(200), button);
        scaleUp.setToX(1.2);
        scaleUp.setToY(1.2);

        ScaleTransition scaleDown = new ScaleTransition(Duration.millis(200), button);
        scaleDown.setToX(1.0);
        scaleDown.setToY(1.0);

        button.setOnMouseEntered(e -> scaleUp.playFromStart());
        button.setOnMouseExited(e -> scaleDown.playFromStart());

        StackPane root = new StackPane(button);
        root.setPrefSize(400, 200);

        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.setTitle("Button Hover Effect");
        stage.show();
    }

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

ในโค้ดนี้ เมื่อเมาส์ชี้ที่ปุ่ม ขนาดของปุ่มจะขยายขึ้น 20% และกลับสู่ขนาดเดิมเมื่อเมาส์ออกจากปุ่ม ทำให้เกิดเอฟเฟกต์ที่ดูโดดเด่นและดึงดูดสายตา

---

เอฟเฟกต์การขยายแท็บ

สำหรับการทำให้แท็บขยายอย่างราบรื่นเมื่อถูกเลือก คุณสามารถใช้ Transition แบบกำหนดเอง:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.animation.Transition;
import javafx.util.Duration;

public class TabExpansionEffect extends Application {
    @Override
    public void start(Stage stage) {
        TabPane tabPane = new TabPane();

        Tab tab1 = new Tab("Tab 1");
        VBox tab1Content = new VBox();
        tab1.setContent(tab1Content);

        tab1.setOnSelectionChanged(e -> {
            if (tab1.isSelected()) {
                animateTab(tab1Content);
            }
        });

        tabPane.getTabs().add(tab1);

        Scene scene = new Scene(tabPane, 600, 400);
        stage.setScene(scene);
        stage.setTitle("Tab Expansion Effect");
        stage.show();
    }

    private void animateTab(VBox tabContent) {
        tabContent.setPrefHeight(0);
        Transition transition = new Transition() {
            {
                setCycleDuration(Duration.millis(300));
            }

            @Override
            protected void interpolate(double frac) {
                tabContent.setPrefHeight(frac * 200); // กำหนดความสูงสุดท้ายที่ต้องการ
            }
        };
        transition.play();
    }

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

ในโค้ดนี้ เมื่อผู้ใช้เลือกแท็บที่ต้องการ เนื้อหาในแท็บจะขยายขึ้นอย่างราบรื่นจนถึงความสูงที่กำหนดไว้ ทำให้เกิดการเปลี่ยนแปลงที่นุ่มนวลและน่าดึงดูด

---

เคล็ดลับการใช้งาน

1. แอนิเมชันที่ลื่นไหล:

   • ใช้ Timeline หรือ Transition เพื่อควบคุมแอนิเมชันอย่างละเอียด
   • ปรับ Duration เพื่อให้แอนิเมชันช้าหรือเร็วขึ้น

2. เอฟเฟกต์การเคลื่อนไหว:

   • ใช้ Interpolator.EASE_BOTH เพื่อทำให้การเคลื่อนไหวดูเป็นธรรมชาติ

3. สไตล์ที่โดดเด่น:

   • ใช้ CSS ใน JavaFX เพื่อเพิ่มความสวยงาม เช่น การเพิ่มเงา (Shadow) หรือไล่สี (Gradient)

4. ประสิทธิภาพ:

   • ทดสอบแอนิเมชันบนอุปกรณ์ที่หลากหลายเพื่อให้แน่ใจว่าแอปพลิเคชันทำงานได้อย่างราบรื่น

---

ด้วยการนำเทคนิคเหล่านี้ไปใช้ คุณสามารถสร้าง UI ที่สวยงามและแอนิเมชันที่น่าดึงดูดใน JavaFX ซึ่งช่วยยกระดับประสบการณ์ของผู้ใช้ได้อย่างมาก