JavaFX Example Code | ImageLoader

기다려주세요: 이미지가 로딩할때 돌아가는 스피너(Spinner)

By Josh Marinacci, September 24, 2008

이 예제는 네트웍 너머의 이미지가 로딩되는 동안 보여지고 이미지가 완전하게 로드되었을때 한번에 사라지는 살아있는 스피너(spinner)를 어떻게 만드는지 보여줍니다.

Flickr.com에서 이미지 로드하기

코드 이해하기

이 샘플의 핵심은 ImageLoadingSpinner 클래스 입니다. 그것은 특정 이미지 위에 스피너를 그리는 커스텀 노드 입니다. 이 클래스는 이미지의 프로그레스(progress) 변수를 관찰합니다. 프로그레스가 100에 다다랐을때 이미지 아래에서 보여지는 이 스피너는 사라져 버립니다. 이러한 처리는 Figure 1에서 보이는 것처럼 내부 프로그레스 변수에 의해서 처리됩니다.

Source Code

public class ImageLoadingSpinner extends CustomNode {
    public var image:Image;
    public var width:Integer = 50;
    public var height:Integer = 50;
    
    var spinnerAnim:Timeline;
    var fadeAnim:Timeline;
    var progress = bind image.progress on replace {
        if(progress >= 100) {
            fadeAnim.start();
        }
    }

Figure 1: Monitoring the Image's Progress

이 클래스의 나머지 부분은 실제 스피너를 만듭니다. 그것은 중앙의 주위를 회전하는 네개의 원들의 그룹입니다. 이것은 0 부터 3까지 루프를 돌면서 중앙에서 파생된 반투명 원을 만들고 각도 변수에 오프셋(offet)을 더해서 회전하는 Figure 2의 코드로 처리됩니다. 각도 변수가 움직였을때 원들은 더욱 생기있게 됩니다.

Source Code

    override public function create():Node {
        var angle = 0;
        var spinner = Group {
            content: [
                // grey background
                Rectangle { width: bind width height: bind height fill: Color.DARKGRAY },
                //spinning circles
                Group {
                    translateX: bind width/2
                    translateY: bind height/2
                    content: for(n in [0..3]) {
                        Circle { fill: Color.rgb(255,255,255,0.5) 
                            centerX: 30 centerY: 30 radius: 50 rotate: bind angle+n*90
                        }
                    }
                }
            ]
        };
        
        spinnerAnim = Timeline {
            repeatCount: Timeline.INDEFINITE
            keyFrames: [
                at(0s) { angle => 0 tween Interpolator.LINEAR },
                at(2s) { angle => 360 tween Interpolator.LINEAR }
            ]
        };
        spinnerAnim.start();

Figure 2: Spinner Code

실제로 create 함수에서 리턴되는 노드는 이미지와 이미지 최상단에 있는 스피너를 포함하는 그룹입니다. 페이드 애니메이션은 스피너의 불투명도를 0.5초 정도 낮추고 CPU 사이클이 너무 낭비되지 않도록 애니메이션을 멈춥니다.

Source Code

fadeAnim = Timeline {
    keyFrames: [
        at(0s) { spinner.opacity => 1.0 tween Interpolator.LINEAR },
        KeyFrame { 
            time: 0.5s values: spinner.opacity => 0.0 tween Interpolator.LINEAR
            action: function():Void { spinnerAnim.stop(); }
            },
        ]
};

return Group {
    content: [ ImageView { image: image }, spinner ]
}

Figure 3: Fade Animation

예지하기

이 예제는 움직이는 슬라이드쇼 안의 스피너들 사이에 다른 애니메이션이 적용된 스피너들이나 다수의 이미지를 로딩하는 스피너를 만듦으로써 확장될수 있습니다.

FX

Profile

기다려주세요: 이미지가 로딩할때 돌아가는 스피너(Spinner)

코드 이해하기

예지하기