Discussion :

[kapac]

bonjour;
je voudrais deformer un rectangle 2D dans une animation mais je ne trouve aucun tutorial ;pouvez vous me donner une idée
merci

[bouye]

Cela dépend de quelle transformation tu veux appliquer.

S'il s'agit d'une transformation qui respecte le parallélisme des coté, tu peux avoir un Rectangle et modifier ses dimensions via une Timeline :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
final Rectangle rectangle = new Rectangle(50, 50, 250, 100);
rectangle.setFill(Color.RED);
root.getChildren().add(rectangle);
final Timeline animation = new Timeline();
animation.getKeyFrames().add(new KeyFrame(Duration.ZERO, new KeyValue(rectangle.widthProperty(), 100)));
animation.getKeyFrames().add(new KeyFrame(Duration.seconds(5), new KeyValue(rectangle.widthProperty(), 300)));
animation.playFromStart();

Tu peux aussi utiliser les transitions toutes prêtes TranslateTransition, ScaleTransition, RotateTransition, pour arriver à des effets similaires.

Si au contraire tes 4 sommets doivent bouger indépendamment les uns des autres, tu vas plutôt devoir utiliser un Path (la classe Polygon ne supportant pas des valeurs observables elle ne se prête pas à ce genre de chose) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
final Path rectangle = new Path();
rectangle.getElements().add(new MoveTo(50, 50));
rectangle.getElements().add(new LineTo(300, 50));
rectangle.getElements().add(new LineTo(300, 150));
rectangle.getElements().add(new LineTo(50, 150));
rectangle.getElements().add(new ClosePath());
rectangle.setFill(Color.RED);
rectangle.setStroke(null);
root.getChildren().add(rectangle);
final DoubleProperty xProperty = ((LineTo) rectangle.getElements().get(1)).xProperty();
final DoubleProperty yProperty = ((LineTo) rectangle.getElements().get(1)).yProperty();
final Timeline animation = new Timeline();
animation.getKeyFrames().add(new KeyFrame(Duration.ZERO,
        new KeyValue(xProperty, 300),
        new KeyValue(yProperty, 50)));
animation.getKeyFrames().add(new KeyFrame(Duration.seconds(5), 
        new KeyValue(xProperty, 350),
        new KeyValue(yProperty, 0)));
animation.playFromStart();

Ici le sommet supérieur droit va se déplacer.

Enfin et c'est un peu plus complexe, on peut obtenir un résultat similaire avec une PerspectiveTransform appliquée sur un Rectangle qu'on anime dans une Timeline (ici c'est la perspective qui est animée et non pas le rectangle lui-même) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
final Rectangle rectangle = new Rectangle(50, 50, 250, 100);
rectangle.setFill(Color.RED);
root.getChildren().add(rectangle);
final PerspectiveTransform perspective = new PerspectiveTransform();
perspective.setUlx(50);
perspective.setUly(50);
perspective.setUrx(300);
perspective.setUry(50);
perspective.setLlx(50);
perspective.setLly(150);
perspective.setLrx(300);
perspective.setLry(150);
rectangle.setEffect(perspective);
final Timeline animation = new Timeline();
animation.getKeyFrames().add(new KeyFrame(Duration.ZERO, 
        new KeyValue(perspective.urxProperty(), 300),
        new KeyValue(perspective.uryProperty(), 50)));
animation.getKeyFrames().add(new KeyFrame(Duration.seconds(5), 
        new KeyValue(perspective.urxProperty(), 350),
        new KeyValue(perspective.uryProperty(), 0)));
animation.playFromStart();

Ici aussi le sommet supérieur droit va se déplacer.

Quand le rectangle est rempli avec une couleur unie, le résultat semble identique entre la méthode 2 et 3. Cependant si on utilise un gradient ou une texture, visuellement le résultat devrait différer.

[kapac]

super,merci de ta réponse ;y a du boulot
j'ai essayé de déplacer un sommet d'un triangle avec scaling mais c'est les 3 sommets qui bougent

[bouye]

C'est normal, une mise à l'échelle préserve le parallélisme des cotés. Après tout tu n'as jamais spécifié quel type d'animation tu souhaitais faire.