Friday Mar 20, 2009

Timelines - Ease to Use in JavaFX

JavaFX being an easy language, one complex part is to write proper timeline for animation. Though its quite easy but as beginner I feel problem sometime. And sometime as a Java Developer, we start demanding those things which are generally done by the concept of multi-threading in Java. Remember, JavaFX is single threaded application.

So, this is what I generally follow. Say, If I have a class Ball, which has a circle and every ball has a timeline for its own. Now, if you want One ball move after another ball, I write a master timeline in Main file and there we write something like this :

var t = Timeline {
    repeatCount: 1
    keyFrames: [
         KeyFrame { time:0s action: function(){ t1.t.playFromStart(); } },
         KeyFrame { time:1s action: function(){ t2.t.playFromStart(); } },

    ]
}

Where there is an animation of 1s in t1.t.playFromStart(); So, the next timeline call goes at 1s, means finishing at first one. If you want some initial delay, you can write :

var t = Timeline {
    repeatCount: 1
    keyFrames: [
         KeyFrame { time:1s action: function(){ t1.t.playFromStart(); } },
         KeyFrame { time:2s action: function(){ t2.t.playFromStart(); } },

    ]
}

Means, dont do anything from 0s to 1s.

But, It is possible that you messed up after sometime. For that, you need to check the "javafx.animation.transition" package, one of the awesome packages in FX API's.

Though, example is everywhere in API Doc. I just show a small one, copied from the API' example itself. First car will fade, then move left and right, then rotate, then move again and then zoom.

Code for assistance :

1. Main for timeline problem.

2. Time class for timeline problem

3. Transitions Main Class.


Tuesday Jul 29, 2008

Boat in an ocean :-) JavaFX !

OK, nothing to laugh. I know my animation sense is little poor. But here I tried to move a ship, in the way they show in movies -D. Nothing like that, I have tried to give a sinusoidal movement of a ship. In the comment section, you can see there is a sea image as well. Animation was looking little ugly with sea, so I removed it :-). But point to note, you can give any animation to a image based on any mathematical methods. And if you have a complex equation, you can fit that in, in place of my simple sin curve. Here is the code:

package move;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.paint.Color;
import java.lang.Math;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

var time : Number = 0.0;


var timeline : Timeline = Timeline {
    repeatCount: Timeline.INDEFINITE        
    keyFrames : 
        KeyFrame {
            time : 5ms
            action: function() {
                time += 0.02;
            }                
        }
};
Frame {
    title: "MyApplication"
    width: 1200
    height: 500
    closeAction: function() { 
        java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        fill: Color.AQUA
        content: [
     /\*       ImageView {
                image: Image {
                url: "http://birdblog.merseyblogs.co.uk/sea21206.jpg"
                 }
            },
     \*/
            ImageView {
                x:bind(100 + time \* 10)
                y:bind(100 + Math.cos(time) \* 10)
                image: Image {
                    url: "http://lal.cas.psu.edu/Research/visualiz/images/boat.gif"
                }
            }
        ]

    }
}
timeline.start(); 

Just 3-4 drags from Netbeans 6.1 FX viewer :

1.  One Timeline and an action inside it.

2. One Frame.

3. One Image.

Thats it ! Set the code logic and rest leave all the work on binding :-). Quite simple, just that I am not able to make some good animation out of it !

About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today