Learn Typing Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Computer Fundamentals English English Conversations Problem Solving

JavaFXطريقة تشغيل عدة مؤثرات في وقت واحد

المثال التالي يعلمك كيف تضيف و تشغل أكثر من تأثير في وقت واحد ( Parallel Transition ) لأي شيء تنوي وضعه في النافذة.
فعلياً, قمنا بجعل النص يتحرك و يدور في الوقت, جعلنا كلا التأثيرين يعملان لنفس المدة أيضاً و جعلنا كلاهما يعادان في كل مرة حيث عكسنا تأثيرهما أيضاً.

مثال

Main.java
import javafx.animation.ParallelTransition;
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);
// هنا قمنا بجعل النص يميل للخلف بنسبة 40 بيكسل لأننا سنجعله يميل للأمام بنفس النسبة عند تشغيل تأثير الدوران
// ملاحظة: لجعل النص يميل للأمام بنسبة 40 درجة, يجب جعل نسبة الدوران عند تشغيل التأثير 2 * 40 أي 80
text.setRotate(-40);
// هنا قمنا بجعل النص يبتعد عن جهة اليمين بنسبة 70 بيكسل لأننا سنجعله يبتعد لليسار بنفس النسبة عند تشغيل تأثير التحرك
// ملاحظة: لجعل النص يقترب من المكان الذي إبتعد عنه في الأساس, يجب جعله يقترب من جهة اليمين بنسبة 70 بيكسل أيضاً عند تشغيل التأثير
StackPane.setMargin(text, new Insets(0, 70, 0, 0));
// الذي يمثل النص text و الذي سيتيح لنا إضافة تأثير التحرك على الكائن TranslateTransition هنا قمنا بإنشاء كائن من الكلاس
TranslateTransition translateTransition = new TranslateTransition();
translateTransition.setDuration(Duration.seconds(0.8));
translateTransition.setNode(text);
translateTransition.setByX(70);
translateTransition.setCycleCount(-1);
translateTransition.setAutoReverse(true);
// الذي يمثل النص text و الذي سيتيح لنا إضافة تأثير الدوران على الكائن TranslateTransition هنا قمنا بإنشاء كائن من الكلاس
RotateTransition rotateTransition = new RotateTransition();
rotateTransition.setDuration(Duration.seconds(1.6));
rotateTransition.setNode(text);
rotateTransition.setByAngle(80);
rotateTransition.setCycleCount(-1);
rotateTransition.setAutoReverse(true);
// و ربطنا فيه النص مع التأثيرين اللذين ننوي تطبقهما عليه في نفس الوقت ParallelTransition هنا قمنا بإنشاء كائن من الكلاس
ParallelTransition parallelTransition = new ParallelTransition(text, translateTransition, rotateTransition );
// text حتى يتم تشغيل كلا التأثيرين على الكائن parallelTransition هنا قمنا بتشغيل الكائن
parallelTransition.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("Parallel Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
import javafx.animation.ParallelTransition; 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); // هنا قمنا بجعل النص يميل للخلف بنسبة 40 بيكسل لأننا سنجعله يميل للأمام بنفس النسبة عند تشغيل تأثير الدوران // ملاحظة: لجعل النص يميل للأمام بنسبة 40 درجة, يجب جعل نسبة الدوران عند تشغيل التأثير 2 * 40 أي 80 text.setRotate(-40); // هنا قمنا بجعل النص يبتعد عن جهة اليمين بنسبة 70 بيكسل لأننا سنجعله يبتعد لليسار بنفس النسبة عند تشغيل تأثير التحرك // ملاحظة: لجعل النص يقترب من المكان الذي إبتعد عنه في الأساس, يجب جعله يقترب من جهة اليمين بنسبة 70 بيكسل أيضاً عند تشغيل التأثير StackPane.setMargin(text, new Insets(0, 70, 0, 0)); // الذي يمثل النص text و الذي سيتيح لنا إضافة تأثير التحرك على الكائن TranslateTransition هنا قمنا بإنشاء كائن من الكلاس TranslateTransition translateTransition = new TranslateTransition(); translateTransition.setDuration(Duration.seconds(0.8)); translateTransition.setNode(text); translateTransition.setByX(70); translateTransition.setCycleCount(-1); translateTransition.setAutoReverse(true); // الذي يمثل النص text و الذي سيتيح لنا إضافة تأثير الدوران على الكائن TranslateTransition هنا قمنا بإنشاء كائن من الكلاس RotateTransition rotateTransition = new RotateTransition(); rotateTransition.setDuration(Duration.seconds(1.6)); rotateTransition.setNode(text); rotateTransition.setByAngle(80); rotateTransition.setCycleCount(-1); rotateTransition.setAutoReverse(true); // و ربطنا فيه النص مع التأثيرين اللذين ننوي تطبقهما عليه في نفس الوقت ParallelTransition هنا قمنا بإنشاء كائن من الكلاس ParallelTransition parallelTransition = new ParallelTransition(text, translateTransition, rotateTransition ); // text حتى يتم تشغيل كلا التأثيرين على الكائن parallelTransition هنا قمنا بتشغيل الكائن parallelTransition.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("Parallel Transition Example"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }

ستظهر لك النافذة التالية عند التشغيل.

مثال حول Parallel Transition في JavaFX

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة