JavaFXطريقة تشغيل عدة مؤثرات وراء بعضهم البعض
المثال التالي يعلمك كيف تضيف أكثر من تأثير و تشغلهم الواحد تلو الآخر ( Sequence Transition ) لأي شيء تنوي وضعه في النافذة.
فعلياً, قمنا بجعل النص يتحرك من أعلى الشاشة إلى منتصفها. و بعد أن يتوقف تماماً عن الحركة سيدور ليظهر بشكل جميل و سهل القراءة.
مثال
import javafx.animation.SequentialTransition;
import javafx.animation.TranslateTransition;
import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل النص الذي نريد إضافته في النافذة Text هنا قمنا بإنشاء كائن من الكلاس
Text text = new Text("HARMASH.COM");
// بالإضافة إلى لونه text هنا قمنا بتحديد نوع و حجم خط الكائن
text.setFont(new Font("Tahoma", 30));
text.setFill(Color.RED);
text.setStroke(Color.BLACK);
// هنا قمنا بجعل النص يميل بنسبة 30 بيكسل لأننا سنجعله يميل للأمام بنفس النسبة عند تشغيل تأثير الدوران
// -ملاحظة: لجعل النص يميل للوراء بنسبة 30 درجة, يجب جعل نسبة الدوران عند تشغيل التأثير 30
text.setRotate(30);
// هنا قمنا بجعل النص يبتعد عن منتصف النافذة من الجهة العلوية بنسبة 1000 بيكسل لأننا سنجعله ينزل من الأعلى عند تشغيل تأثير التحرك
// ملاحظة: لجعل النص يقترب من المكان الذي إبتعد عنه في الأساس, يجب جعله يبتعد بنسبة 500 بيكسل عن الأعلى عند تشغيل التأُثير
StackPane.setMargin(text, new Insets(0, 0, 1000, 0));
// الذي يمثل النص text و الذي سيتيح لنا إضافة تأثير التحرك على الكائن TranslateTransition هنا قمنا بإنشاء كائن من الكلاس
TranslateTransition translateTransition = new TranslateTransition();
translateTransition.setDuration(Duration.seconds(2));
translateTransition.setNode(text);
translateTransition.setByY(500);
translateTransition.setCycleCount(1);
translateTransition.setAutoReverse(true);
// الذي يمثل النص text و الذي سيتيح لنا إضافة تأثير الدوران على الكائن TranslateTransition هنا قمنا بإنشاء كائن من الكلاس
RotateTransition rotateTransition = new RotateTransition();
rotateTransition.setDuration(Duration.seconds(0.5));
rotateTransition.setNode(text);
rotateTransition.setByAngle(-30);
rotateTransition.setCycleCount(1);
rotateTransition.setAutoReverse(false);
// و ربطنا فيه النص مع التأثيرين اللذين ننوي تطبقهما عليه الواحد تلو الآخر SequentialTransition هنا قمنا بإنشاء كائن من الكلاس
SequentialTransition sequentialTransition = new SequentialTransition(text, translateTransition, rotateTransition );
// بالترتيب الموضوعين فيه text حتى يتم تشغيل كلا التأثيرين على الكائن sequentialTransition هنا قمنا بتشغيل الكائن
sequentialTransition.play();
// في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
StackPane root = new StackPane();
// root في الكائن text هنا قمنا بإضافة الكائن
root.getChildren().addAll(text);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("Sequential Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
import javafx.animation.SequentialTransition;
import javafx.animation.TranslateTransition;
import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل النص الذي نريد إضافته في النافذة Text هنا قمنا بإنشاء كائن من الكلاس
Text text = new Text("HARMASH.COM");
// بالإضافة إلى لونه text هنا قمنا بتحديد نوع و حجم خط الكائن
text.setFont(new Font("Tahoma", 30));
text.setFill(Color.RED);
text.setStroke(Color.BLACK);
// هنا قمنا بجعل النص يميل بنسبة 30 بيكسل لأننا سنجعله يميل للأمام بنفس النسبة عند تشغيل تأثير الدوران
// -ملاحظة: لجعل النص يميل للوراء بنسبة 30 درجة, يجب جعل نسبة الدوران عند تشغيل التأثير 30
text.setRotate(30);
// هنا قمنا بجعل النص يبتعد عن منتصف النافذة من الجهة العلوية بنسبة 1000 بيكسل لأننا سنجعله ينزل من الأعلى عند تشغيل تأثير التحرك
// ملاحظة: لجعل النص يقترب من المكان الذي إبتعد عنه في الأساس, يجب جعله يبتعد بنسبة 500 بيكسل عن الأعلى عند تشغيل التأُثير
StackPane.setMargin(text, new Insets(0, 0, 1000, 0));
// الذي يمثل النص text و الذي سيتيح لنا إضافة تأثير التحرك على الكائن TranslateTransition هنا قمنا بإنشاء كائن من الكلاس
TranslateTransition translateTransition = new TranslateTransition();
translateTransition.setDuration(Duration.seconds(2));
translateTransition.setNode(text);
translateTransition.setByY(500);
translateTransition.setCycleCount(1);
translateTransition.setAutoReverse(true);
// الذي يمثل النص text و الذي سيتيح لنا إضافة تأثير الدوران على الكائن TranslateTransition هنا قمنا بإنشاء كائن من الكلاس
RotateTransition rotateTransition = new RotateTransition();
rotateTransition.setDuration(Duration.seconds(0.5));
rotateTransition.setNode(text);
rotateTransition.setByAngle(-30);
rotateTransition.setCycleCount(1);
rotateTransition.setAutoReverse(false);
// و ربطنا فيه النص مع التأثيرين اللذين ننوي تطبقهما عليه الواحد تلو الآخر SequentialTransition هنا قمنا بإنشاء كائن من الكلاس
SequentialTransition sequentialTransition = new SequentialTransition(text, translateTransition, rotateTransition );
// بالترتيب الموضوعين فيه text حتى يتم تشغيل كلا التأثيرين على الكائن sequentialTransition هنا قمنا بتشغيل الكائن
sequentialTransition.play();
// في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
StackPane root = new StackPane();
// root في الكائن text هنا قمنا بإضافة الكائن
root.getChildren().addAll(text);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("Sequential Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
ستظهر لك النافذة التالية عند التشغيل.