Raghu Nair: Java,JavaFX Tips

Let us see how we can create flying photos.  Images coming from the center and moving to different corners of the screen. This can be acheived by combining two transitions to ImageView.  

TranslateTransition and ScaleTransition.

TranslateTransition will translate images from center to different corners. Where as ScaleTransition will scale the images to get a 3D effect.

Here is the code snipplet 

public class FlyingImage extends CustomNode{

    public var stageWidth:Number = 1024;
    public var stageHeight:Number = 750;


    public var imageView = ImageView {
        fitWidth: 2
        fitHeight: 2
        preserveRatio: true
    }

    public var url : String on replace {
        if(url != null) {
            imageView.image = Image {
                url: url
                backgroundLoading: true
            }
            //visible = false;

        }
    }

    /*var progress = bind imageView.image.progress on replace {
        if(progress >= 50.0) {
            visible = true;
            play();
        }
    }*/


    var scaleT: ScaleTransition = ScaleTransition {
        node:this
        fromX:1.0
        fromY:1.0
        toX: 50.0
        toY: 50.0
        duration: 10s
    }

    var point = getNextPoint();


    var translateT: TranslateTransition = TranslateTransition {
        node:this
        fromX: stageWidth / 2
        fromY: stageHeight / 2
        toX: point.x
        toY: point.y
        duration:10s
    }

    var transition: Timeline = Timeline{
        repeatCount: Timeline.INDEFINITE
        keyFrames: [
            KeyFrame{
                time: 10s
                action: function(){
                    translateT.playFromStart();
                    scaleT.playFromStart();
                }
            }
        ]

    }

    function play(){
        transition.play();
    }

    override function create():Node {
        cursor = Cursor.HAND;
        blocksMouse = true;
        //        var borderRect = Rectangle {
        //            width: bind imageView.boundsInLocal.width
        //            height: bind imageView.boundsInLocal.height
        //            strokeWidth: 0.03
        //            stroke: Color.WHITE
        //            arcWidth: 0.5
        //            arcHeight: 0.5
        //        }
        play();
        Group {
            translateX: bind stageWidth / 2
            translateY: bind stageHeight / 2
            content: [ imageView ]
        }


    }

}

    var random = new Random();
    def maxPoint  = 15;
    var pointIndex = 0;

    class Point {
        public var x :Number;
        public var y :Number;
    }
    function getNextPoint():Point{
        var stageWidth = 1024;
        var stageHeight = 750;
        var points :Point[]= [
            Point{
                x: -stageWidth /2 ,
                y:-stageHeight /2},
            Point{
                x: stageWidth / 2 ,
                y:stageHeight / 2},
            Point{
                x: stageWidth / 2 ,
                y:-stageHeight /2},
            Point{
                x: -stageWidth / 2 ,
                y: stageHeight /2},
            Point{
                x: -stageWidth /2 ,
                y: -random.nextInt(stageHeight / 2)},
            Point{
                x: stageWidth / 2 ,
                y: random.nextInt(stageHeight / 2)},
            Point{
                x: random.nextInt(stageWidth / 2) ,
                y:-stageHeight /2},
            Point{
                x: -random.nextInt(stageWidth / 2) ,
                y: stageHeight /2},
        ];
        var point = points[0];
        if ( pointIndex < 8){
            point = points[pointIndex++];
        }else {
            pointIndex = 0;
        }
        return point;       
    }