Yet Another Simple Javafx animation

tonight, i decide to add timeline and audio to my flower, to create simple animation and better UX :P :

watch the demo below:

here the (timeline & mediaplayer) code that i was added:

Timeline {
        repeatCount: Timeline.INDEFINITE
        keyFrames : [
                KeyFrame {
                        time : 30ms
                        canSkip : true
                        action: function () {
                            for (i in [0..125]){
                                //flower[i].rotate += 1 + 0.05*(125-i);
                                flower[i].rotate += 3 + 0.05*i;
                                flower[i].scaleX = 1.25 - 0.01*i;
                                flower[i].scaleY = 1.25 - 0.01*i;
                            }
                        }
                }
        ]
}.play();

MediaPlayer {
        media : Media {
                source: "http://hakimfx.googlecode.com/files/music.mp3";
        }
}.play();


complete source code:

/*
 * Kembang.fx
 *
 * Created on 07 Mar 09, 14:32:08
 */

package flower;

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.Rectangle;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;

/**
 * @author Hakim
 */
var width:Number = 600;
def stop1 = Stop {
    offset: 0.0
    color: Color.web("#EE7EF3");
}
def stop2 = Stop {
    color: Color.web("#C736DD", .7);
    offset: 0.774
}
def stop3 = Stop {
    color: Color.web("#D025D7", 0.7);
    offset: 0.566
}

def stop4 = Stop {
    offset: 1.0
    color: Color.web("#FFFFFF");
}
def stop5 = Stop {
    color: Color.web("#5CFF00", );
    offset: 0.21
}

var s = 0.0;
var r = 0;
var s3 = bind s*s*s;

def lg = LinearGradient{
    startX: 0.0
    startY: 0.5
    endX: 1.0
    endY: .5
    proportional: true
    stops: [ stop1, stop5, stop3, stop2 ]
}

def flower = reverse [ for (i in [0..125]){
    s += 0.01;
    r += 27;
    Rectangle{
        translateX: bind (width-250)/2,
        translateY: bind (width-250)/2
        width: 250,
        height: 250
        fill: lg
        rotate: r
        scaleX: s3 + 0.1
        scaleY: s3 + 0.1;
        arcWidth: 20
        arcHeight: 20
    }
}];

Timeline {
        repeatCount: Timeline.INDEFINITE
        keyFrames : [
                KeyFrame {
                        time : 30ms
                        canSkip : true
                        action: function () {
                            for (i in [0..125]){
                                //flower[i].rotate += 1 + 0.05*(125-i);
                                flower[i].rotate += 3 + 0.05*i;
                                flower[i].scaleX = 1.25 - 0.01*i;
                                flower[i].scaleY = 1.25 - 0.01*i;
                            }
                        }
                }
        ]
}.play();

MediaPlayer {
        media : Media {
                source: "http://hakimfx.googlecode.com/files/music.mp3";
        }
        repeatCount: MediaPlayer.REPEAT_FOREVER;
}.play();


def scene:Scene = Scene {
        fill:Color.BLACK
        content: flower
    };

Stage {
    title: "Flower"
    width: bind width with inverse
    height: bind width with inverse
    scene: scene
}

One thought on “Yet Another Simple Javafx animation

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s