تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations

اذهب الى الأسفل

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Empty تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations

مُساهمة من طرف زهراء في الخميس أكتوبر 25, 2018 6:50 am

أهلا بكم

بشكل عام ، يمكن تعريف الرسوم المتحركة على أنها تحول يؤدي إلى إنشاء الحركة الخاصة بأحد الكائنات. أو مجموعة التحويلات المطبقة على كائن خلال المدة المحددة بالتسلسل بحيث يمكن إظهار و خلق وهم لحركته عن طريق العرض السريع .
في 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);  
    }  
  
}  

و النتيجة كما يلى :


تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Javafx-rotate-transition
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Empty رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations

مُساهمة من طرف زهراء في الخميس أكتوبر 25, 2018 7:59 am

ثانيا : الفئة TranslateTransition

يتيح هذة الفئة إنشاء او تطبيق حركة على الكائن بنقله من موضع إلى موضع آخر خلال المدة المحددة. يتم الانتقال عن طريق الحفاظ على تحديث خصائص 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);  
    }  
  
}  

و النتبجة على النحو التالى :


تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Javafx-translate-transition
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Empty رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations

مُساهمة من طرف زهراء في الخميس أكتوبر 25, 2018 8:24 am

ثالثا : الفئة ScaleTransition

يتيح هذة الفئة الى توسيع أو تحجيم الشكل خلال المدة المحددة بواسطة العامل المحدد في أي من الاتجاهات الثلاثة 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);
   }
}

و النتبجة على النحو التالى :

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Javafx-scale-transition
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Empty رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations

مُساهمة من طرف زهراء في الخميس أكتوبر 25, 2018 8:44 am

رابعا : الفئة FadeTransition

تلك الفئة تستخدم لتنشيط عتامة الكائن بحيث يصبح لون ملء الكائن باهتًا. يمكن القيام بذلك عن طريق الحفاظ على تقليل عتامة لون التعبئة خلال مدة محددة للوصول إلى قيمة عتامة مستهدفة.

ويمكن فعل ذلك في 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);  
    }  
}  

و النتيجة على النحو التالى :

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Javafx-fade-transition
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Empty رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations

مُساهمة من طرف زهراء في الخميس أكتوبر 25, 2018 9:41 am

خامسا : الفئة FillTransition

تلك الفئة تستخدم لتيقوم بتحريك لون تعبئة الكائن بحيث يتغير لون التعبئة بين قيمتي اللون خلال المدة الزمنية المحددة.
ويذلك من خلال الطبقة 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();  
      
    }  
}  
  

و النتيجة على النحو التالى :


تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Javafx-fill-transition
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Empty رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations

مُساهمة من طرف زهراء في الخميس أكتوبر 25, 2018 11:40 am

سادسا : الفئة StrokeTransition

تلك الفئة تستخدم لتيقوم بتحريك لون تعبئة حدود الكائن بحيث يتغير لون الحد بين قيمتي اللون خلال المدة الزمنية المحددة.
ويذلك من خلال الطبقة 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();  
     
   }  
}  



و النتيجة على النحو التالى :


تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Javafx-stroke-transition
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Empty رد: تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations

مُساهمة من طرف زهراء في الخميس أكتوبر 25, 2018 12:03 pm

سابعا : الفئة TranslateTransition

تستخدم تلك لتطبيق قائمة الحركات السبقة على الكائن في ترتيب متسلسل (واحد تلو الآخر)....بمعنى لو اننا نريد انشاء اكثر من حركة على الكائن الواحد فعليك استخدام ترتيب زمني متسلسل لتشغيل كل حركة واحدة تلو الاخر.....الانتقال التسلسلي مهم في تصميم لعبة تحريك عناصرها بالترتيب التسلسلي.

المشيد لتك الفئة على النحو التالى :

الكود:
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 لتشغيل الحركات بشكل تسلسلي على النحو التالى :

تعلم JavaFx ..مقال 33_ التعامل مع الحركة JavaFX - Animations Javafx-sequential-transition
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

مواضيع ذات صلة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى