JavaFX Example Code | KeystrokeMotion

KeyMotion: Keystroke Visualization

By Josh Marinacci, September 24, 2008

이 샘플은 흥미로운 방법으로 현재 눌려진 키를 어떻게 시각화(vizualize) 하지는 보여줍니다. 아래 예제에서 멋진 모션 효과(motion effect)를 보기 위해서 단순히 타이핑을 하거나 키를 누르고만 있으면 됩니다.

코드 이해하기

비록 이 샘플은 복잡하게 보여지겠지만 실제 코드는 꽤 간단합니다. 투명한 사각형은 키가 눌러지는것을 위해 "listens"를 오버레이 합니다. 사용자가 하나의 키를 누를때마다 오버레이는 움직이고 페이드 하고 실제로 자신을 지우는 새로운 FadeLetter 객체를 생성합니다.

Source Code

var currKey:String = "A";

var letterGroup = Group { };

var rect:Rectangle =  Rectangle {
    width:  500
    height: 500
    fill: Color.WHITE
    onMousePressed: function(e:MouseEvent) {
        rect.requestFocus();
    }
    onKeyPressed: function(e:KeyEvent) {
        currKey = e.text;
        var letter = FadeLetter {
            content: e.text
            startX: 250
            startY: 250
            };
            
        insert letter into letterGroup.content;
        letter.fade.start();
    }
};

var text = Text { 
    y: 500-30
    content: bind "type away"
    textOrigin: TextOrigin.BOTTOM
    font: Font { size: 40 } 
};


Stage {
    scene: Scene {
        content: [
            rect,
            letterGroup,
            text,
        ]

    }
}

Figure 1: Main.fx

실제로 FadeLetter는 Text의 하위 클래스 입니다. FadeLetter는 스스로 화면에 중앙에 위치하고나서 화면의 아무곳으로나 이동하고 동시에 페이드합니다. 4초후 부모 그룹으로 부터 글자를 지우는 액션 함수(action function)가 호출됩니다.

Source Code

public class FadeLetter extends Text {
    override var fill = Color.BLACK;
    override var font = Font { size: 200 };
    public var startX = 0.0;
    public var startY = 0.0;
    override var textOrigin = TextOrigin.BASELINE;
    public var fade = Timeline {
        keyFrames: [
            at(0s) {
                x => startX - boundsInLocal.width/2 tween Interpolator.LINEAR;
                y => startY tween Interpolator.LINEAR;
            },
            at(3s) {
                x => Math.random()*500.0 tween Interpolator.LINEAR;
                y => Math.random()*500.0 tween Interpolator.LINEAR;
                this.opacity => 0.0 tween Interpolator.LINEAR;
            },
            KeyFrame {
                time: 4s
                action: function() {
                    delete this from (this.parent as Group).content;
                }
            }
        ]
    }
}

Figure 2: FadeLetter.fx

FX

Profile

KeyMotion: Keystroke Visualization

코드 이해하기