JavaFX Example Code | TransparentWindow

사라지는 투명 창

By Josh Marinacci, September 24, 2008

이 예제는 마우스 커서가 바깥에 있으면 투명해지고, 안쪽으로 움직이면 더 불투명해지는 창을 만드는 방법을 보여준다.

바깥쪽

안쪽

Java Webstart로 예제 실행

코드 이해하기

이 예제에는 두가지 주요 부분이 있다. 첫번째는, fade라는 customOpacity 변수 값을 0.4에서 0.9로 변하게 하는 Timeline을 만든다. toggle 변수는 true로 설정한다. 이 설정은 호출될때마다 애니메이션의 반전 방향을 정해준다.

Source Code

import javafx.animation.*;
import javafx.scene.*;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.stage.Stage;

var opacity = 0.5;
var fade = Timeline {
    keyFrames: [
        at(0s) { opacity => 0.4 tween Interpolator.LINEAR },
        at(0.5s) { opacity => 0.9 tween Interpolator.LINEAR },
    ]
};

그림 1: 사라지는 애니메이션

코드의 두번째 부분은 customOpacity 변수 내의 opacity를 가진 Frame을 만든다. frame의 내용은 몇가지 본문들과 마우스 이벤트를 위한 listener들을 가진 사각형 틀모양을 가진다(The content of the frame is some text and an overlay rectangle with listeners for mouse events). 사각형으로 마우스 커서가 들어갔다 나갔다 할때 마다, 사라지는 애니메이션이 시작된다. 사라지는 애니메이션에서 toggle 속성은 fade.start() 함수가 호출될 때마다 사라지는 방향을 반전시킨다.

Source Code

Stage {
    width: 400 height: 250
    opacity: bind opacity;
	title: "Transparent Window"
    scene: Scene {
        fill: Color.WHITE
        content: [
            Text { content: "Surrender Earthling!" 
                y: 150 x: 100 font: Font { size: 25 } },
            Rectangle {
                width: 400 height: 250
                fill: Color.rgb(0,0,0,0)
                onMouseEntered: function(e:MouseEvent) {
                    fade.rate = 1.0;
                    fade.play();
                }
                onMouseExited: function(e:MouseEvent) {
                    fade.rate = -1.0;
                    fade.play();
                }
            }
        ]
    }
};

그림 2: Frame 생성

FX

Profile

사라지는 투명 창

코드 이해하기