Effet lors du passage de la souris sur une image

Version imprimable

16/04/2010, 11h14
Stefounette

Effet lors du passage de la souris sur une image

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
16/04/2010, 11h48
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)
16/04/2010, 12h20
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.
16/04/2010, 15h02
Stefounette

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

Même tarif

Code:

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();
                }
            }
 
        ]
    }
}

un petit beuug est rentré par la fenêtre

Code:

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();
                }
            }
 
        ]
    }
}

20/04/2010, 10h37
Stefounette

Ok merci