إضافة مؤثرات لعناصر النافذة في javafx
مقدمة
المستخدم في العادة يفضل دائماً استخدام التطبيق الذي يحتوي على واجهة مستخدم جميلة و سهلة الإستخدام بالنسبة له.
بالإضافة إلى ما سبق فإن المستخدم العادي لا يكترث على الإطلاق حول الطريقة التي تم فيها بناء هذا التطبيق لأنه أصلاً ليس مبرمجاً و لا يفهم في هذه الأمور التقنية.
الآن عليك معرفة أن كل الأشياء التي تعلمت كيف تضيفها و تتعامل معها في النافذة يمكن إضافة مؤثرات عليها مثل جعلها تتحرك, تدور, يتغيير لونها كل مدة, تظهر, تختفي إلخ.. و هذا ما سنراه لاحقاً في الأمثلة.
إضافة مؤثرات في التطبيقات التي ستبنيها مستقبلاً أمر مهم جداً لأنه يلفت إنتباه المستخدمين بشكل كبير دون أدنى شك و هذا ما ستتعلمه في هذا الدرس.
أمثلة شاملة للتعامل مع المؤثرات او التأثيرات
طريقة إضافة التأثير Rotate Transition
المثال التالي يعلمك كيف تضيف التأثير Rotate Transition لأي شيء تنوي وضعه في النافذة.
فعلياً, جعلنا المربع يدور 180 درجة كل ثانية و نصف, ثم يدور بالإتجاه العكسي كما كان موضوعاً قبل أن يبدأ بالدوران.
مثال
import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
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("Loading");
// بالإضافة إلى لونه text هنا قمنا بتحديد نوع و حجم خط الكائن
text.setFont(new Font("Tahoma", 18));
text.setFill(Color.WHITE);
text.setStroke(Color.WHITE);
// يمثل المستطيل الذي نريد إضافته في النافذة Rectangle هنا قمنا بإنشاء كائن من الكلاس
Rectangle rectangle = new Rectangle();
// rectangle هنا قمنا بتحديد طول و عرض الكائن
rectangle.setHeight(100);
rectangle.setWidth(100);
// بالعرض و الطول rectangle هنا قنما بتحديد درجة إنحناء زوايا الكائن
rectangle.setArcWidth(30);
rectangle.setArcHeight(30);
// إلى اللون الأزرق و حددنا أن لون حدوده هو الأسود rectangle هنا قمنا بإعطاء الكائن لون
rectangle.setFill(Color.CADETBLUE);
rectangle.setStroke(Color.BLACK);
// و الذي سيتيح لنا إضافة تأثير الدوران على أي شيء نربطه به RotateTransition هنا قمنا بإنشاء كائن من الكلاس
RotateTransition rotateTransition = new RotateTransition();
// عندما يتم تشغيله rotateTransition هنا قمنا بتحديد المدة التي سيتنفذ خلالها التأثير الذي يمثل الكائن
rotateTransition.setDuration(Duration.seconds(1.5));
// rectangle سيتم تطبيقه على الكائن rotateTransition هنا حددنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
rotateTransition.setNode(rectangle);
// هو دوران ناحية اليمين بنسبة 180 درجة rotateTransition هنا قلنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
rotateTransition.setByAngle(180);
// هنا وضعنا 1- للإشارة إلى أننا لا نريد أن يتم إيقاف التأثير
rotateTransition.setCycleCount(-1);
// كلما تم تشغيله rotateTransition هنا قلنا أننا نريد أن يتم إرجاع التأثير الذي يفعله الكائن
rotateTransition.setAutoReverse(true);
// rotateTransition هنا قمنا بتشغيل التأثير الذي يمثله الكائن
rotateTransition.play();
// في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
StackPane root = new StackPane();
// root في الكائن text و rectangle هنا قمنا بإضافة الكائنين
root.getChildren().addAll(rectangle, text);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("Rotate Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إضافة التأثير Scale Transition
المثال التالي يعلمك كيف تضيف التأثير Scale Transition لأي شيء تنوي وضعه في النافذة.
فعلياً, جعلنا النص يتضاعف حجمه بنسبة 1.5 كل ثانية, ثم يرجع لحجمه الأصلي كما كان موضوعاً قبل أن يتمدد و يكبر.
مثال
import javafx.animation.ScaleTransition;
import javafx.application.Application;
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", 18));
text.setFill(Color.RED);
text.setStroke(Color.BLACK);
// و الذي سيتيح لنا إضافة تأثير التمدد على أي شيء نربطه به ScaleTransition هنا قمنا بإنشاء كائن من الكلاس
ScaleTransition scaleTransition = new ScaleTransition();
// عندما يتم تشغيله scaleTransition هنا قمنا بتحديد المدة التي سيتنفذ خلالها التأثير الذي يمثل الكائن
scaleTransition.setDuration(Duration.seconds(1));
// text سيتم تطبيقه على الكائن scaleTransition هنا حددنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
scaleTransition.setNode(text);
// هو تمدد عامودي و أفقي بنسبة 1.5 scaleTransition هنا قلنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
// هذه النسبة تعني أن الشيء الذي سيتم تطبيق التأثير عليه سيتم مضاعفة حجمه مرة و نصف
scaleTransition.setByY(1.5);
scaleTransition.setByX(1.5);
// هنا وضعنا 1- للإشارة إلى أننا لا نريد أن يتم إيقاف التأثير
scaleTransition.setCycleCount(-1);
// كلما تم تشغيله scaleTransition هنا قلنا أننا نريد أن يتم إرجاع التأثير الذي يفعله الكائن
scaleTransition.setAutoReverse(true);
// scaleTransition هنا قمنا بتشغيل التأثير الذي يمثله الكائن
scaleTransition.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("Scale Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إضافة التأثير Translate Transition
المثال التالي يعلمك كيف تضيف التأثير Translate Transition لأي شيء تنوي وضعه في النافذة.
فعلياً, جعلنا النص يتحرك من مكانه للأسفل بنسبة 50 بيسكل كل 0.8 ثانية, ثم يرجع لمكانه الأصلي الذي كان موضوعاً فيه قبل أن يتحرك.
مثال
import javafx.animation.TranslateTransition;
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);
StackPane.setMargin(text, new Insets(-80, 0, 0, 0));
// و الذي سيتيح لنا إضافة تأثير التحرك على أي شيء نربطه به TranslateTransition هنا قمنا بإنشاء كائن من الكلاس
TranslateTransition translateTransition = new TranslateTransition();
// عندما يتم تشغيله translateTransition هنا قمنا بتحديد المدة التي سيتنفذ خلالها التأثير الذي يمثل الكائن
translateTransition.setDuration(Duration.seconds(0.8));
// text سيتم تطبيقه على الكائن translateTransition هنا حددنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
translateTransition.setNode(text);
// هو التحرك للأسفل بنسبة 80 بيكسل translateTransition هنا قلنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
translateTransition.setByY(80);
// هنا وضعنا 1- للإشارة إلى أننا لا نريد أن يتم إيقاف التأثير
translateTransition.setCycleCount(-1);
// كلما تم تشغيله translateTransition هنا قلنا أننا نريد أن يتم إرجاع التأثير الذي يفعله الكائن
translateTransition.setAutoReverse(true);
// translateTransition هنا قمنا بتشغيل التأثير الذي يمثله الكائن
translateTransition.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("Translate Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إضافة التأثير Path Transition
المثال التالي يعلمك كيف تضيف التأثير Path Transition لأي شيء تنوي وضعه في النافذة.
فعلياً, قمنا برسم المسار الذي سيتحرك النص فوقه. كل ثانيتين جعلناه يسير عليه و من ثم يرجع لمكانه الأصلي الذي كان موضوعاً فيه قبل أن يتحرك.
مثال
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
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", 28));
text.setFill(Color.RED);
text.setStroke(Color.BLACK);
// يمثل المسار الذي ننوي جعل النص يسير عليه Path هنا قمنا بإنشاء كائن من الكلاس
// ملاحظة: المسار عبارة عن مجموعة نقاط قمنا بتحديد مكان كل نقطة منهم في النافذة
Path path = new Path();
MoveTo move = new MoveTo(200, 30);
LineTo line1 = new LineTo(300, 125);
LineTo line2 = new LineTo(200, 220);
LineTo line3 = new LineTo(100, 125);
LineTo line4 = new LineTo(200, 30);
path.getElements().addAll(move, line1, line2, line3, line4);
// و الذي سيتيح لنا إضافة تأثير التحرك على أي شيء نربطه به PathTransition هنا قمنا بإنشاء كائن من الكلاس
PathTransition pathTransition = new PathTransition();
// عندما يتم تشغيله pathTransition هنا قمنا بتحديد المدة التي سيتنفذ خلالها التأثير الذي يمثل الكائن
pathTransition.setDuration(Duration.seconds(2));
// text سيتم تطبيقه على الكائن pathTransition هنا حددنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
pathTransition.setNode(text);
// path هو التحرك على النقاط الموضوعة في الكائن pathTransition هنا قلنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
pathTransition.setPath(path);
// هنا وضعنا 1- للإشارة إلى أننا لا نريد أن يتم إيقاف التأثير
pathTransition.setCycleCount(-1);
// كلما تم تشغيله pathTransition هنا قلنا أننا نريد أن يتم إرجاع التأثير الذي يفعله الكائن
pathTransition.setAutoReverse(true);
// pathTransition هنا قمنا بتشغيل التأثير الذي يمثله الكائن
pathTransition.play();
// في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن text هنا قمنا بإضافة الكائن
root.getChildren().addAll(text);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("Path Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إضافة التأثير Fill Transition
المثال التالي يعلمك كيف تضيف التأثير Fill Transition لأي شيء تنوي وضعه في النافذة.
فعلياً, قمنا بجعل لون النص يتغير من اللون الأزرق إلى اللون الأحمر كل ثانيتين, ثم جعلنا اللون يرجع من اللون الأزرق إلى الأحمر لأننا عكسنا التأثير.
مثال
import javafx.animation.FillTransition;
import javafx.application.Application;
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", 40));
text.setStroke(Color.GRAY);
// و الذي سيتيح لنا إضافة تأثير تغيّر اللون على أي شيء نربطه به FillTransition هنا قمنا بإنشاء كائن من الكلاس
FillTransition fillTransition = new FillTransition();
// عندما يتم تشغيله fillTransition هنا قمنا بتحديد المدة التي سيتنفذ خلالها التأثير الذي يمثل الكائن
fillTransition.setDuration(Duration.seconds(1.5));
// text سيتم تطبيقه على الكائن fillTransition هنا حددنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
fillTransition.setShape(text);
// عندما يتم تشغيله fillTransition هنا حددنا اللون الأساسي الذي سيوضع للشيء الذي نربطه بالكائن
fillTransition.setFromValue(Color.CYAN);
// عندما يتوقف عن التشغيل fillTransition هنا حددنا اللون الجديد الذي سيوضع للشيء الذي نربطه بالكائن
fillTransition.setToValue(Color.CORAL);
// هنا وضعنا 1- للإشارة إلى أننا لا نريد أن يتم إيقاف التأثير
fillTransition.setCycleCount(-1);
// كلما تم تشغيله fillTransition هنا قلنا أننا نريد أن يتم إرجاع التأثير الذي يفعله الكائن
fillTransition.setAutoReverse(true);
// fillTransition هنا قمنا بتشغيل التأثير الذي يمثله الكائن
fillTransition.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("Fill Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إضافة التأثير Stroke Transition
المثال التالي يعلمك كيف تضيف التأثير Stroke Transition لأي شيء تنوي وضعه في النافذة.
فعلياً, قمنا بإظهار اللون الأسود الذي يحيط بالدائرة كل نصف ثانية, ثم جعلناه يختفي خلال نصف ثانية أيضاً لأننا عكسنا التأثير.
مثال
import javafx.animation.StrokeTransition;
import javafx.application.Application;
import javafx.scene.Scene;
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 Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الدائرة التي نريد إضافتها في النافذة Circle هنا قمنا بإنشاء كائن من الكلاس
Circle circle = new Circle();
// الذي يمثل الدائرة, مع الإشارة إلى أن حجم قطر الدائرة سيساوي 2 * 50 Circle هنا قمنا بتحدد حجم قطر الكائن
circle.setRadius(50);
// circle هنا قمنا بتحديد اللون الداخلي للكائن
circle.setFill(Color.RED);
// circle هنا قمنا بتحديد لون و سماكة حجم الخط الذي سنظهره حول الكائن
circle.setStroke(Color.BLACK);
circle.setStrokeWidth(5);
// و الذي سيتيح لنا إضافة تأثير إظهار و إخفاء اللون الذي سنضعه حول أي شيء نربطه به StrokeTransition هنا قمنا بإنشاء كائن من الكلاس
StrokeTransition strokeTransition = new StrokeTransition();
// عندما يتم تشغيله strokeTransition هنا قمنا بتحديد المدة التي سيتنفذ خلالها التأثير الذي يمثل الكائن
strokeTransition.setDuration(Duration.seconds(0.5));
// circle سيتم تطبيقه على الكائن strokeTransition هنا حددنا أن التأثير الذي سنحصل عليه عند تشغيل الكائن
strokeTransition.setShape(circle);
// عندما يتم تشغيله strokeTransition هنا حددنا اللون الأساسي الذي سيوضع للشيء الذي نربطه بالكائن
strokeTransition.setFromValue(Color.BLACK);
// عندما يتوقف عن التشغيل strokeTransition هنا حددنا اللون الجديد الذي سيوضع للشيء الذي نربطه بالكائن
// Color.TRANSPARENT لاحظ أننا لم نضع لون ثاني, بل قمنا فقط بإخفاء اللون الأساسي و هذا معنى
strokeTransition.setToValue(Color.TRANSPARENT);
// هنا وضعنا 1- للإشارة إلى أننا لا نريد أن يتم إيقاف التأثير
strokeTransition.setCycleCount(-1);
// كلما تم تشغيله strokeTransition هنا قلنا أننا نريد أن يتم إرجاع التأثير الذي يفعله الكائن
strokeTransition.setAutoReverse(true);
// strokeTransition هنا قمنا بتشغيل التأثير الذي يمثله الكائن
strokeTransition.play();
// في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
StackPane root = new StackPane();
// root في الكائن text هنا قمنا بإضافة الكائن
root.getChildren().addAll(circle);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("Stroke Transition Example");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تشغيل عدة مؤثرات وراء بعضهم البعض
المثال التالي يعلمك كيف تضيف أكثر من تأثير و تشغلهم الواحد تلو الآخر ( 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);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تشغيل عدة مؤثرات في وقت واحد
المثال التالي يعلمك كيف تضيف و تشغل أكثر من تأثير في وقت واحد ( Parallel Transition ) لأي شيء تنوي وضعه في النافذة.
فعلياً, قمنا بجعل النص يتحرك و يدور في الوقت, جعلنا كلا التأثيرين يعملان لنفس المدة أيضاً و جعلنا كلاهما يعادان في كل مرة حيث عكسنا تأثيرهما أيضاً.
مثال
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);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
