JavaFX Example Code | SwirlingSquares

Swirling Squares: Shaped Windows and Animation

By Josh Marinacci, September 22, 2008

빙빙 도는 사각형들은 펄스, 일반 윈도위 밖인 여러분의 바탕화면에서 직접적으로 빙빙 도는 사각형들을 보여줍니다. 프로그램을 종료하기 위해서는 빨간 사각형을 클릭하세요.

코드 이해하기

비록 그것이 복잡하게 보이더라도 이 샘플을 위한 실제 코드는 매우 간단합니다. Figure 1의 코드는 그룹을 포함한 투명 프레임을 생성합니다. 그룹 컨텐츠는 중심점을 주위를 회전했던 10개의 사각형들 입니다. 각 정사각형의 회전 각도는 단 하나의 angle 변수에 달려있습니다. 정가운데에서 각 정사각형의 거리 역시 각도에 달려 있습니다.

마지막으로 타임라인은 angle 변수를 360도에서 -360도 사이를 요동치도록 만듭니다. 그 이유는 정사각형의 위치와 각도가 angle 변수에 달려 있고 angle 변수가 변하기 시작할때 정사각형의 모든것들은 움직일것이기 때문입니다.

Source Code

var angle = 0.0;

Frame {
    windowStyle: WindowStyle.TRANSPARENT  visible: true
    width: 400 height: 400
    scene: Scene {
        fill: null
        content: Group {
            translateX: 100 translateY: 100
            content: for(i in [0..10]) {
                // here is the magic with binding
                Rectangle {
                    fill: Color.rgb(25*i,0,0, i/10.0)
                    width: 100 height: 100 arcHeight: 10 arcWidth: 10
                    stroke: Color.BLACK strokeWidth: 5
                    transforms: bind [ 
                        // the rotate and translate are bound to 'angle'
                        Transform.rotate(-i*36+angle/2,50,50),
                        Transform.translate(angle/4,0),
                    ]
                }
            }
            onMousePressed: function(e:MouseEvent):Void { System.exit(0); }
        }
    }
}

var anim = Timeline { keyFrames: [
        KeyFrame { time: 0s values: angle => -360 tween Interpolator.EASEBOTH },
        KeyFrame { time: 2s values: angle => 360 tween Interpolator.EASEBOTH },
    ]
    autoReverse: true
    repeatCount: Timeline.INDEFINITE
};
anim.start();

Figure 1: Creating Swirling Squares

FX

Profile

Swirling Squares: Shaped Windows and Animation

코드 이해하기