تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations
صفحة 1 من اصل 1 • شاطر
تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations
أهلا بكم
بشكل عام ، يمكن تعريف الرسوم المتحركة على أنها تحول يؤدي إلى إنشاء الحركة الخاصة بأحد الكائنات. أو مجموعة التحويلات المطبقة على كائن خلال المدة المحددة بالتسلسل بحيث يمكن إظهار و خلق وهم لحركته عن طريق العرض السريع .
في JavaFX ، تحتوي الحزمة javafx.animation على جميع الفئات لتطبيق الحركة على الرسوم و الاشكال . تمدد جميع فئات هذه الحزمة للفئة javafx.animation.Animation.
و تعالوا نتعرف على فئات الحركة التى توفرها الحزمة javafx.animation.Animation و كيفية التعامل معها :
أولا : الفئة Rotate Transition
يتم استخدام هذة الفئة لتطبيق انتقال الدوران على العقدة أو الشكل حيث تقوم بتدوير الشكل على أي من المحاور الثلاثة خلال المدة المحددة...يتم تمثيل RotateTransition بواسطة الفئة javafx.animation.RotateTransition. و نحتاج فقط إلى إنشاء مثيل لهذه الفئة لإنشاء الدوران المناسب.
دوال و اساليب الفئة :
المشيد لتلك الفئة على النحو التالى :
الخطوات اللازمة لتطبيق حركة الدوران على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة .RotateTransition
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
3_إنشاء مثيل جديد من الكلاس RotateTransition الذى يعبر عن حركة الدوان
4_ تحديد محور الدوران
5_ تحديد زواية الدوران
6_تحديد المدة الزمنية للدوران بالملى ثانية
7_ تحديد الشكل المراد تطبيق علية حركة الدوان
8_ بدء تشغيل حركة الدوران
بشكل عام ، يمكن تعريف الرسوم المتحركة على أنها تحول يؤدي إلى إنشاء الحركة الخاصة بأحد الكائنات. أو مجموعة التحويلات المطبقة على كائن خلال المدة المحددة بالتسلسل بحيث يمكن إظهار و خلق وهم لحركته عن طريق العرض السريع .
في JavaFX ، تحتوي الحزمة javafx.animation على جميع الفئات لتطبيق الحركة على الرسوم و الاشكال . تمدد جميع فئات هذه الحزمة للفئة javafx.animation.Animation.
و تعالوا نتعرف على فئات الحركة التى توفرها الحزمة javafx.animation.Animation و كيفية التعامل معها :
أولا : الفئة Rotate Transition
يتم استخدام هذة الفئة لتطبيق انتقال الدوران على العقدة أو الشكل حيث تقوم بتدوير الشكل على أي من المحاور الثلاثة خلال المدة المحددة...يتم تمثيل RotateTransition بواسطة الفئة javafx.animation.RotateTransition. و نحتاج فقط إلى إنشاء مثيل لهذه الفئة لإنشاء الدوران المناسب.
دوال و اساليب الفئة :
- الدالة axis : يمثل محور انتقال الدوران
- الكود:
setAxis(Point3D value)
- الدالة :byAngle تمثل الزاوية التي سيتم تدوير الكائن بها
- الكود:
setByAngle(double value)
- الدالة : duration تمثل المدة الزمنية لتطبيق حركة الدوران بالملى ثانية
- الكود:
setDuration(Duration value)
- الدالة fromAngle :تمثل بداية زاوية انتقال الدوران
- الكود:
setFromAngle(double value)
- الدالة node : تمثل العقدة او الشكل التي سيتم تطبيق انتقال التدوير عليها.
- الكود:
setNode(Node value)
- الدالة :toAngle :مثل قيمة زاوية التوقف عند انتهاء التدوير
- الكود:
setToAngle(double value)
المشيد لتلك الفئة على النحو التالى :
- الكود:
public RotateTransition(Duration duration, Node node):
الخطوات اللازمة لتطبيق حركة الدوران على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة .RotateTransition
- الكود:
import javafx.animation.RotateTransition;
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
- الكود:
import javafx.util.Duration;
3_إنشاء مثيل جديد من الكلاس RotateTransition الذى يعبر عن حركة الدوان
- الكود:
RotateTransition rotate = new RotateTransition();
4_ تحديد محور الدوران
- الكود:
rotate.setAxis(Rotate.Z_AXIS);
5_ تحديد زواية الدوران
- الكود:
rotate.setByAngle(360);
6_تحديد المدة الزمنية للدوران بالملى ثانية
- الكود:
rotate.setDuration(Duration.millis(1000));
7_ تحديد الشكل المراد تطبيق علية حركة الدوان
- الكود:
rotate.setNode(rect);
8_ بدء تشغيل حركة الدوران
- الكود:
rotate.play();
والمثال الكامل على النحو التالى :
- الكود:
import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.geometry.Point3D;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Rotate_Transition extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
//Creating Rectangle
Rectangle rect = new Rectangle(200,100,200,200);
rect.setFill(Color.LIMEGREEN);
rect.setStroke(Color.HOTPINK);
rect.setStrokeWidth(5);
//Instantiating RotateTransition class
RotateTransition rotate = new RotateTransition();
//Setting Axis of rotation
rotate.setAxis(Rotate.Z_AXIS);
// setting the angle of rotation
rotate.setByAngle(360);
//setting cycle count of the rotation
rotate.setCycleCount(500);
//Setting duration of the transition
rotate.setDuration(Duration.millis(1000));
//the transition will be auto reversed by setting this to true
rotate.setAutoReverse(true);
//setting Rectangle as the node onto which the
// transition will be applied
rotate.setNode(rect);
//playing the transition
rotate.play();
//Configuring Group and Scene
Group root = new Group();
root.getChildren().add(rect);
Scene scene = new Scene(root,600,400,Color.BLACK);
primaryStage.setScene(scene);
primaryStage.setTitle("Rotate Transition example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
و النتيجة كما يلى :
زهراء- ........
- تاريخ التسجيل : 18/02/2011
المساهمات : 438
النقاط : 769
التقيم : 67
الدولة :
الجنس :
رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations
ثانيا : الفئة TranslateTransition
يتيح هذة الفئة إنشاء او تطبيق حركة على الكائن بنقله من موضع إلى موضع آخر خلال المدة المحددة. يتم الانتقال عن طريق الحفاظ على تحديث خصائص translateX و translateY للعقدة على فترات منتظمة....تعتمد سرعة الانتقال على عدد الدورات CycleCount
في JavaFX ، يتم تمثيل TranslateTransition بواسطة الفئة javafx.animation.TranslateTransition. نحن بحاجة إلى إنشاء هذا الصف من أجل توليد الحركة الخاصة بها.
الخطوات اللازمة لتطبيق حركة الدوران على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة TranslateTransition
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
3_إنشاء مثيل جديد من الكلاس TranslateTransition الذى يعبر عن حركة الدوان
4_ تحديد عامل التوقف للاحداثي مثلا الاحداثى الافقي x او بمعنى مكان الوضع الجديد للشكل بالبيكسل
يتيح هذة الفئة إنشاء او تطبيق حركة على الكائن بنقله من موضع إلى موضع آخر خلال المدة المحددة. يتم الانتقال عن طريق الحفاظ على تحديث خصائص translateX و translateY للعقدة على فترات منتظمة....تعتمد سرعة الانتقال على عدد الدورات CycleCount
في JavaFX ، يتم تمثيل TranslateTransition بواسطة الفئة javafx.animation.TranslateTransition. نحن بحاجة إلى إنشاء هذا الصف من أجل توليد الحركة الخاصة بها.
الخطوات اللازمة لتطبيق حركة الدوران على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة TranslateTransition
- الكود:
import javafx.animation.TranslateTransition;
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
- الكود:
import javafx.util.Duration;
3_إنشاء مثيل جديد من الكلاس TranslateTransition الذى يعبر عن حركة الدوان
- الكود:
TranslateTransition translate = new TranslateTransition()
4_ تحديد عامل التوقف للاحداثي مثلا الاحداثى الافقي x او بمعنى مكان الوضع الجديد للشكل بالبيكسل
- الكود:
translate.setByX(400);
واليكم مثال كامل :
- الكود:
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Translate_Transition extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
//Creating the circle
Circle cir = new Circle(50,100,50);
//setting color and stroke of the cirlce
cir.setFill(Color.RED);
cir.setStroke(Color.BLACK);
//Instantiating TranslateTransition class
TranslateTransition translate = new TranslateTransition();
//shifting the X coordinate of the centre of the circle by 400
translate.setByX(400);
//setting the duration for the Translate transition
translate.setDuration(Duration.millis(1000));
//setting cycle count for the Translate transition
translate.setCycleCount(500);
//the transition will set to be auto reversed by setting this to true
translate.setAutoReverse(true);
//setting Circle as the node onto which the transition will be applied
translate.setNode(cir);
//playing the transition
translate.play();
//Configuring Group and Scene
Group root = new Group();
root.getChildren().addAll(cir);
Scene scene = new Scene(root,500,200,Color.WHEAT);
primaryStage.setScene(scene);
primaryStage.setTitle("Translate Transition example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
و النتبجة على النحو التالى :
زهراء- ........
- تاريخ التسجيل : 18/02/2011
المساهمات : 438
النقاط : 769
التقيم : 67
الدولة :
الجنس :
رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations
ثالثا : الفئة ScaleTransition
يتيح هذة الفئة الى توسيع أو تحجيم الشكل خلال المدة المحددة بواسطة العامل المحدد في أي من الاتجاهات الثلاثة X و Y و Z أو جميعها...
في JavaFX ، يتم تمثيل ScaleTransition بواسطة الفئة javafx.animation.ScaleTransition نحن بحاجة إلى إنشاء هذا الصف من أجل توليد الحركة الخاصة بها.
الخطوات اللازمة لتطبيق حركة التوسع و التحجيم على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة ScaleTransition
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
3_إنشاء مثيل جديد من الكلاس ScaleTransition الذى يعبر عن حركة الدوان
4_تحديد الأبعاد للحركة
4_تحديد سرعة الحركة
واليكم مثال كامل :
و النتبجة على النحو التالى :
يتيح هذة الفئة الى توسيع أو تحجيم الشكل خلال المدة المحددة بواسطة العامل المحدد في أي من الاتجاهات الثلاثة X و Y و Z أو جميعها...
في JavaFX ، يتم تمثيل ScaleTransition بواسطة الفئة javafx.animation.ScaleTransition نحن بحاجة إلى إنشاء هذا الصف من أجل توليد الحركة الخاصة بها.
الخطوات اللازمة لتطبيق حركة التوسع و التحجيم على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة ScaleTransition
- الكود:
import javafx.animation.ScaleTransition;
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
- الكود:
import javafx.util.Duration;
3_إنشاء مثيل جديد من الكلاس ScaleTransition الذى يعبر عن حركة الدوان
- الكود:
ScaleTransition scaleTransition = new ScaleTransition();
4_تحديد الأبعاد للحركة
- الكود:
scaleTransition.setByY(1.5);
scaleTransition.setByX(1.5);
4_تحديد سرعة الحركة
- الكود:
scaleTransition.setCycleCount(50);
واليكم مثال كامل :
- الكود:
import javafx.animation.ScaleTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ScaleTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(300.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(50.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Creating scale Transition
ScaleTransition scaleTransition = new ScaleTransition();
//Setting the duration for the transition
scaleTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
scaleTransition.setNode(circle);
//Setting the dimensions for scaling
scaleTransition.setByY(1.5);
scaleTransition.setByX(1.5);
//Setting the cycle count for the translation
scaleTransition.setCycleCount(50);
//Setting auto reverse value to true
scaleTransition.setAutoReverse(false);
//Playing the animation
scaleTransition.play();
//Creating a Group object
Group root = new Group(circle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Scale transition example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
و النتبجة على النحو التالى :
زهراء- ........
- تاريخ التسجيل : 18/02/2011
المساهمات : 438
النقاط : 769
التقيم : 67
الدولة :
الجنس :
رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations
رابعا : الفئة FadeTransition
تلك الفئة تستخدم لتنشيط عتامة الكائن بحيث يصبح لون ملء الكائن باهتًا. يمكن القيام بذلك عن طريق الحفاظ على تقليل عتامة لون التعبئة خلال مدة محددة للوصول إلى قيمة عتامة مستهدفة.
ويمكن فعل ذلك في JavaFX ، من خلال الطبقة javafx.animation.FadeTransition نحتاج إلى إنشاء مثيل لهذه الفئة من أجل إنشاء حركة Fade المناسب.
أهم دوال تلك الفئة :
الدالة fromValue : القيمة الاولية للتلاشى و التعتيم
الدالة byValue : القيمة العددية لاظهار التعتيم فى كل لحظة
الدالة toValue : القيمة النهاية للتلاشي و التعتيم
الخطوات اللازمة لتطبيق حركة التلاشى و التعتيم على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة FadeTransition
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
3_إنشاء مثيل من الكلاس FadeTransition يمثل حركة التلاشي
4_تحديد قيمة العتامة الأولية والاخيرة للتلاشي
و المثال الكامل على النحو التالى :
و النتيجة على النحو التالى :
تلك الفئة تستخدم لتنشيط عتامة الكائن بحيث يصبح لون ملء الكائن باهتًا. يمكن القيام بذلك عن طريق الحفاظ على تقليل عتامة لون التعبئة خلال مدة محددة للوصول إلى قيمة عتامة مستهدفة.
ويمكن فعل ذلك في JavaFX ، من خلال الطبقة javafx.animation.FadeTransition نحتاج إلى إنشاء مثيل لهذه الفئة من أجل إنشاء حركة Fade المناسب.
أهم دوال تلك الفئة :
الدالة fromValue : القيمة الاولية للتلاشى و التعتيم
الدالة byValue : القيمة العددية لاظهار التعتيم فى كل لحظة
الدالة toValue : القيمة النهاية للتلاشي و التعتيم
الخطوات اللازمة لتطبيق حركة التلاشى و التعتيم على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة FadeTransition
- الكود:
import javafx.animation.FadeTransition;
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
- الكود:
import javafx.util.Duration;
3_إنشاء مثيل من الكلاس FadeTransition يمثل حركة التلاشي
- الكود:
FadeTransition fade = new FadeTransition();
4_تحديد قيمة العتامة الأولية والاخيرة للتلاشي
- الكود:
fade.setFromValue(10);
fade.setToValue(0.1);
و المثال الكامل على النحو التالى :
- الكود:
import javafx.animation.FadeTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Fade_Transition extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
//Creating the circle
Circle cir = new Circle(250,120,80);
//setting color and stroke of the circle
cir.setFill(Color.RED);
cir.setStroke(Color.BLACK);
//Instantiating FadeTransition class
FadeTransition fade = new FadeTransition();
//setting the duration for the Fade transition
fade.setDuration(Duration.millis(5000));
//setting the initial and the target opacity value for the transition
fade.setFromValue(10);
fade.setToValue(0.1);
//setting cycle count for the Fade transition
fade.setCycleCount(1000);
//the transition will set to be auto reversed by setting this to true
fade.setAutoReverse(true);
//setting Circle as the node onto which the transition will be applied
fade.setNode(cir);
//playing the transition
fade.play();
//Configuring Group and Scene
Group root = new Group();
root.getChildren().addAll(cir);
Scene scene = new Scene(root,500,250,Color.WHEAT);
primaryStage.setScene(scene);
primaryStage.setTitle("Translate Transition example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
و النتيجة على النحو التالى :
زهراء- ........
- تاريخ التسجيل : 18/02/2011
المساهمات : 438
النقاط : 769
التقيم : 67
الدولة :
الجنس :
رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations
خامسا : الفئة FillTransition
تلك الفئة تستخدم لتيقوم بتحريك لون تعبئة الكائن بحيث يتغير لون التعبئة بين قيمتي اللون خلال المدة الزمنية المحددة.
ويذلك من خلال الطبقة import javafx.animation.FillTransition; نحتاج إلى إنشاء مثيل لهذه الفئة من أجل إنشاء حركة اللون المناسب.
أهم دوال تلك الفئة :
الدالة fromValue : القيمة الاولية للون المراد تطبيقة
الدالة toValue : القيمة النهاية للون
الدالة shape : تحدد الشكل او الرسم المراد تطبيق حركة اللون بداخله
المشيد على النحو التالى :
الخطوات اللازمة لتطبيق حركة اللون على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة FillTransition
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
3_إنشاء مثيل من الكلاس FillTransition يمثل حركة التلاشي
4_تحديد قيم اللون الاولى و الاخيرة
و المثال الكامل على النحو التالى :
و النتيجة على النحو التالى :
تلك الفئة تستخدم لتيقوم بتحريك لون تعبئة الكائن بحيث يتغير لون التعبئة بين قيمتي اللون خلال المدة الزمنية المحددة.
ويذلك من خلال الطبقة import javafx.animation.FillTransition; نحتاج إلى إنشاء مثيل لهذه الفئة من أجل إنشاء حركة اللون المناسب.
أهم دوال تلك الفئة :
الدالة fromValue : القيمة الاولية للون المراد تطبيقة
الدالة toValue : القيمة النهاية للون
الدالة shape : تحدد الشكل او الرسم المراد تطبيق حركة اللون بداخله
المشيد على النحو التالى :
- الكود:
public FillTransition(Duration duration, Shape shape, Color fromValue, Color toValue)
الخطوات اللازمة لتطبيق حركة اللون على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة FillTransition
- الكود:
import javafx.animation.FillTransition;
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
- الكود:
import javafx.util.Duration;
3_إنشاء مثيل من الكلاس FillTransition يمثل حركة التلاشي
- الكود:
FillTransition fill = new FillTransition();
4_تحديد قيم اللون الاولى و الاخيرة
- الكود:
fill.setFromValue(Color.BLACK);
fill.setToValue(Color.WHITE);
و المثال الكامل على النحو التالى :
- الكود:
import javafx.animation.FillTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Fill_Transition extends Application{
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
//Creating Polygon
Polygon poly = new Polygon();
//Setting points for the polyogn
poly.getPoints().addAll(new Double[] {220.0,270.0,170.0,220.0,170.0,120.0,220.0,70.0,270.0,120.0,270.0,220.0});
//Setting Color and Stroke properties for the polygon
poly.setStroke(Color.BLACK);
//Instantiating Fill Transition class
FillTransition fill = new FillTransition();
//The transition will set to be auto reserved by setting this to true
fill.setAutoReverse(true);
//setting cycle count for the fill transition
fill.setCycleCount(50);
//setting duration for the Fill Transition
fill.setDuration(Duration.millis(1000));
//setting the Intital from value of the color
fill.setFromValue(Color.BLACK);
//setting the target value of the color
fill.setToValue(Color.WHITE);
//setting polygon as the shape onto which the fill transition will be applied
fill.setShape(poly);
//playing the fill transition
fill.play();
//Configuring Group and Scene
Group root = new Group();
root.getChildren().addAll(poly);
Scene scene = new Scene(root,420,400,Color.WHEAT);
primaryStage.setScene(scene);
primaryStage.setTitle("Fill Transition example");
primaryStage.show();
}
}
و النتيجة على النحو التالى :
زهراء- ........
- تاريخ التسجيل : 18/02/2011
المساهمات : 438
النقاط : 769
التقيم : 67
الدولة :
الجنس :
رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations
سادسا : الفئة StrokeTransition
تلك الفئة تستخدم لتيقوم بتحريك لون تعبئة حدود الكائن بحيث يتغير لون الحد بين قيمتي اللون خلال المدة الزمنية المحددة.
ويذلك من خلال الطبقة import javafx.animation.StrokeTransition; نحتاج إلى إنشاء مثيل لهذه الفئة من أجل إنشاء حركة اللون المناسب.
أهم دوال تلك الفئة :
الدالة fromValue : القيمة الاولية للون المراد تطبيقة
الدالة toValue : القيمة النهاية للون
الدالة shape : تحدد الشكل او الرسم المراد تطبيق حركة اللون على حدوده
المشيد على النحو التالى :
الخطوات اللازمة لتطبيق حركة اللون على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة StokeTransition
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
3_إنشاء مثيل من الكلاس StrokeTransition يمثل حركة التلاشي
4_تحديد قيم اللون الاولى و الاخيرة
و المثال الكامل على النحو التالى :
و النتيجة على النحو التالى :
تلك الفئة تستخدم لتيقوم بتحريك لون تعبئة حدود الكائن بحيث يتغير لون الحد بين قيمتي اللون خلال المدة الزمنية المحددة.
ويذلك من خلال الطبقة import javafx.animation.StrokeTransition; نحتاج إلى إنشاء مثيل لهذه الفئة من أجل إنشاء حركة اللون المناسب.
أهم دوال تلك الفئة :
الدالة fromValue : القيمة الاولية للون المراد تطبيقة
الدالة toValue : القيمة النهاية للون
الدالة shape : تحدد الشكل او الرسم المراد تطبيق حركة اللون على حدوده
المشيد على النحو التالى :
- الكود:
public StokeTransition(Duration duration, Shape shape, Color fromValue, Color toValue)
الخطوات اللازمة لتطبيق حركة اللون على العقد او الشكل :
1_ إستيراد حزمة الحركة و تحديد منها فئة StokeTransition
- الكود:
import javafx.animation.StrokeTransition;
2_استيراد الفئة Duration لاستخدامها فى اضافة مدة زمنية للحركة
- الكود:
import javafx.util.Duration;
3_إنشاء مثيل من الكلاس StrokeTransition يمثل حركة التلاشي
- الكود:
StrokeTransition stroke = new StrokeTransition();
4_تحديد قيم اللون الاولى و الاخيرة
- الكود:
stroke.setFromValue(Color.BLACK);
stroke.setToValue(Color.PURPLE);
و المثال الكامل على النحو التالى :
- الكود:
import javafx.animation.StrokeTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Stroke_Transition extends Application{
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
//Creating Circle
Circle cir = new Circle(200,150,100);
//Setting stroke and color for the circle
cir.setStroke(Color.BLUE);
cir.setFill(Color.RED);
cir.setStrokeWidth(10);
//Instantiating StrokeTransition class
StrokeTransition stroke = new StrokeTransition();
//The transition will set to be auto reserved by setting this to true
stroke.setAutoReverse(true);
//setting cycle count for the Stroke transition
stroke.setCycleCount(500);
//setting duration for the Stroke Transition
stroke.setDuration(Duration.millis(500));
//setting the Initial from value of the Stroke color
stroke.setFromValue(Color.BLACK);
//setting the target value of the Stroke color
stroke.setToValue(Color.PURPLE);
//setting polygon as the shape onto which the Stroke transition will be applied
stroke.setShape(cir);
//playing the Stroke transition
stroke.play();
//Configuring Group and Scene
Group root = new Group();
root.getChildren().addAll(cir);
Scene scene = new Scene(root,420,300,Color.WHEAT);
primaryStage.setScene(scene);
primaryStage.setTitle("Stroke Transition example");
primaryStage.show();
}
}
و النتيجة على النحو التالى :
زهراء- ........
- تاريخ التسجيل : 18/02/2011
المساهمات : 438
النقاط : 769
التقيم : 67
الدولة :
الجنس :
رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations
سابعا : الفئة TranslateTransition
تستخدم تلك لتطبيق قائمة الحركات السبقة على الكائن في ترتيب متسلسل (واحد تلو الآخر)....بمعنى لو اننا نريد انشاء اكثر من حركة على الكائن الواحد فعليك استخدام ترتيب زمني متسلسل لتشغيل كل حركة واحدة تلو الاخر.....الانتقال التسلسلي مهم في تصميم لعبة تحريك عناصرها بالترتيب التسلسلي.
المشيد لتك الفئة على النحو التالى :
حيث أن :
Node : الشكل او العقدة المراد تنفيذ الحركة لها
Animation : نوع الحركة الذى انشأته لهذا الكائن ...يمكن إضافة اكثر من حركة للكائن الواحد
مثال كامل يوضح كيفية الاستخدام :
فى المثال اعلاه أنشئا شكل و طبقنا عليه اكثر من حركة ثم استخدمنا الفئة Sequential لتشغيل الحركات بشكل تسلسلي على النحو التالى :
تستخدم تلك لتطبيق قائمة الحركات السبقة على الكائن في ترتيب متسلسل (واحد تلو الآخر)....بمعنى لو اننا نريد انشاء اكثر من حركة على الكائن الواحد فعليك استخدام ترتيب زمني متسلسل لتشغيل كل حركة واحدة تلو الاخر.....الانتقال التسلسلي مهم في تصميم لعبة تحريك عناصرها بالترتيب التسلسلي.
المشيد لتك الفئة على النحو التالى :
- الكود:
public SequentialTransition(Node node, Animation? children)
حيث أن :
Node : الشكل او العقدة المراد تنفيذ الحركة لها
Animation : نوع الحركة الذى انشأته لهذا الكائن ...يمكن إضافة اكثر من حركة للكائن الواحد
مثال كامل يوضح كيفية الاستخدام :
- الكود:
import javafx.animation.FadeTransition;
import javafx.animation.PauseTransition;
import javafx.animation.RotateTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.SequentialTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;
public class SequentialTransitionExample extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Polygon poly = new Polygon();
//Setting points for the polyogn
poly.getPoints().addAll(new Double[] {320.0,270.0,270.0,220.0,270.0,270.0,320.0,120.0,370.0,270.0,370.0,220.0});
//Setting Color and Stroke properties for the polygon
poly.setFill(Color.LIMEGREEN);
poly.setStroke(Color.BLACK);
//Setting durations for the transitions
Duration dur1 = Duration.millis(1000);
Duration dur2 = Duration.millis(500);
//Setting the pause transition
PauseTransition pause = new PauseTransition(Duration.millis(1000));
//Setting the fade transition
FadeTransition fade = new FadeTransition(dur2);
fade.setFromValue(1.0f);
fade.setToValue(0.3f);
fade.setCycleCount(2);
fade.setAutoReverse(true);
//Setting Translate transition
TranslateTransition translate = new TranslateTransition(dur1);
translate.setToX(-150f);
translate.setCycleCount(2);
translate.setAutoReverse(true);
//Setting Rotate Transition
RotateTransition rotate = new RotateTransition(dur2);
rotate.setByAngle(180f);
rotate.setCycleCount(4);
rotate.setAutoReverse(true);
//Setting Scale Transition
ScaleTransition scale = new ScaleTransition(dur1);
scale.setByX(1.5f);
scale.setByY(1.2f);
scale.setCycleCount(2);
scale.setAutoReverse(true);
//Instantiating Sequential Transition class by passing the list of transitions into its constructor
SequentialTransition seqT = new SequentialTransition (poly,rotate, pause, fade, translate, scale);
//playing the transition
seqT.play();
//Configuring the group and scene
Group root = new Group();
root.getChildren().addAll(poly);
Scene scene = new Scene(root,490,450,Color.WHEAT);
primaryStage.setScene(scene);
primaryStage.setTitle("Sequential Transition Example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
فى المثال اعلاه أنشئا شكل و طبقنا عليه اكثر من حركة ثم استخدمنا الفئة Sequential لتشغيل الحركات بشكل تسلسلي على النحو التالى :
زهراء- ........
- تاريخ التسجيل : 18/02/2011
المساهمات : 438
النقاط : 769
التقيم : 67
الدولة :
الجنس :
| |
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
أمس في 7:09 pm من طرف moslema_r
» شركة تنظيف فرشات بالرياض
الثلاثاء مارس 26, 2024 6:26 pm من طرف moslema_r
» شركة تنظيف استراحات بالرياض
الأحد مارس 24, 2024 10:49 pm من طرف moslema_r
» كشف تسربات المياه في جدة
السبت مارس 23, 2024 7:23 pm من طرف gmalnagy
» خدمات كشف تسربات المياه بخصم 25% - اتصل الان
السبت مارس 23, 2024 7:22 pm من طرف gmalnagy
» شركة تنظيف ثريات بالرياض
الخميس مارس 21, 2024 7:23 pm من طرف moslema_r
» كهربائي منازل بالرياض
الأحد مارس 17, 2024 1:52 pm من طرف رانيا حماد
» افضل شركة نقل عفش بالرياض نقل باكستاني 40% خصم | موقع الانوار
الأحد مارس 17, 2024 1:25 pm من طرف رانيا حماد
» افضل معلم جبس بالرياض تركيب جبس بورد بالرياض 20% خصم اتصل الآن
الأحد مارس 17, 2024 1:09 pm من طرف رانيا حماد
» شراء اثاث مستعمل بالكويت بخصم 30%
الأحد مارس 17, 2024 12:54 pm من طرف رانيا حماد