Yet Another Simple Javafx animation
Ditulis oleh Muhammad Hakim di/pada 30 September 2009 1:04 am
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
}




Yet Another Simple Javafx Time-Based animation « JFXStudio: sketch, hack, share berkata
[...] from my blog Possibly related posts: (automatically generated)Javafx Pie Menu (with Fish Eye Effect)JavaFX + [...]