Discussion :

[Stefounette]

Bonjour,

Je voudrais savoir si la "sample gallery" du site JavaFx est bien faite en javaFX.
Sample Gallery

Et si oui comment faire pour obtenir le même effet lorsqu'on passe sa souris sur une image?

Merci d'avance

[sinok]

La galerie n'est pas faite en javafx. Elle est codée en javascript(jquery en particulier). Enfin bon j'imagine que ce genre de trucs est faisable en javafx (même en swing c'est faisable en l'occurence)

[galien]

Oui la galerie est en javascript par contre sur la page d'accueil en bas il y a quelque chose de similaire avec 4 images, ca c'est en javafx.
Il n'y a pas le code mais finalement c'est pas trop compliqué a faire, il faut jouer sur scaleX et scaleY.

[Stefounette]

Ok, alors j'ai essayé de faire la même chose mais je n'ai pas réussis. Pouvez-vous m'aider?

[galien]

Même tarif

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
def NB_ITEM = 3;
var tms: Timeline[] = for (n in [0..<NB_ITEM]) Timeline{};
var rects: Rectangle[];
Stage {
    title : "Carrés magiques"
    scene: Scene {
        width: 500
        height: 200
        content: [
            rects = for (n in [0..<NB_ITEM])
            Rectangle {
                fill: Color.rgb(
                Math.random()*255,
                Math.random()*255,
                Math.random()*255)
                translateX: 50+n*110
                translateY: 50
                width: 100
                height: 100
                onMouseEntered: function (e: MouseEvent): Void {
                    def _rect = rects[n];
                    _rect.toFront();
                    var tm = tms[n];
                    if(tm != null and tm.running) {
                        tm.stop();
                    }
                    tm = Timeline {
                        keyFrames: [
                            KeyFrame {
                                time: .3s
                                values: [
                                    _rect.scaleX => 1.3 tween Interpolator.EASEOUT,
                                    _rect.scaleY => 1.3 tween Interpolator.EASEOUT
                                ]
                            }
 
                        ]
                    }
                    tm.playFromStart();
                }
                onMouseExited: function (e: MouseEvent): Void {
                    def _rect = rects[n];
                    var tm = tms[n];
                    if(tm != null and tm.running) {
                        tm.stop();
                    }
                    tm = Timeline {
                        keyFrames: [
                            KeyFrame {
                                time: .1s
                                values: [
                                    _rect.scaleX => 1. tween Interpolator.LINEAR,
                                    _rect.scaleY => 1. tween Interpolator.LINEAR
                                ]
                            }
 
                        ]
                    }
                    tm.playFromStart();
                }
            }
 
        ]
    }
}

[galien]

un petit beuug est rentré par la fenêtre

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
def NB_ITEM = 3;
var tms: Timeline[] = for (n in [0..<NB_ITEM]) Timeline{};
var rects: Rectangle[];
Stage {
    title : "Carrés magiques"
    scene: Scene {
        width: 480
        height: 200
        content: [
            rects = for (n in [0..<NB_ITEM])
            Rectangle {
                fill: Color.rgb(
                Math.random()*255,
                Math.random()*255,
                Math.random()*255)
                translateX: 50+n*130
                translateY: 50
                width: 100
                height: 100
                onMouseEntered: function (e: MouseEvent): Void {
                    def _rect = rects[n];
                    _rect.toFront();
                    if(tms[n] != null and tms[n].running) {
                        tms[n].stop();
                    }
                    tms[n] = Timeline {
                        keyFrames: [
                            KeyFrame {
                                time: .3s
                                values: [
                                    _rect.scaleX => 1.3 tween Interpolator.EASEOUT,
                                    _rect.scaleY => 1.3 tween Interpolator.EASEOUT
                                ]
                            }
 
                        ]
                    }
                    tms[n].playFromStart();
                }
                onMouseExited: function (e: MouseEvent): Void {
                    def _rect = rects[n];
                    if(tms[n] != null and tms[n].running) {
                        tms[n].stop();
                    }
                    tms[n] = Timeline {
                        keyFrames: [
                            KeyFrame {
                                time: .1s
                                values: [
                                    _rect.scaleX => 1. tween Interpolator.LINEAR,
                                    _rect.scaleY => 1. tween Interpolator.LINEAR
                                ]
                            }
                        ]
                    }
                    tms[n].playFromStart();
                }
            }
 
        ]
    }
}

[Stefounette]

Ok merci