Over a million developers have joined DZone.
Platinum Partner

Reply via JavaFX on: Shadow Motion Effect in 5 Lines Of jQuery

· Java Zone

The Java Zone is brought to you in partnership with ZeroTurnaround. Check out this 8-step guide to see how you can increase your productivity by skipping slow application redeploys and by implementing application profiling, as you code!

I took the opportunity to see how easy or difficult it is to implement a “shadow motion effect” in JavaFX. The effect is described in a post from Lam Nguyen and he implements it in jQuery in 5 lines.

What do we need to do this in JavaFX? Is this possible at all?

Yes it is possible and it was easy, fast (~10 min) and IMHO it looks nice and it is not only an animation – you can drag it:

1. Create a new JavaFX project in NetBeans and choose ‘Drag and Drop’.

2. Then adapt the DragBehaviour to the following. The necessary changes are minimal and marked with HERE:

// HERE: change 1 line
public var targetGroup: Group;

public var targetWidth: Number;
public var targetHeight: Number;
public var maxX = 200.0;
public var maxY = 200.0;
var startX = 0.0;
var startY = 0.0;

init {
// HERE: +1 line
var target = targetGroup.content[0];

target.onMousePressed = function (e: MouseEvent): Void {
startX = e.sceneX - target.translateX;
startY = e.sceneY - target.translateY;
}

target.onMouseDragged = function (e: MouseEvent): Void {
var tx = e.sceneX - startX;

// HERE +7 lines
var cloned = Duplicator.duplicate(target);
insert cloned into targetGroup.content;
FadeTransition {
node: cloned fromValue: 1 toValue: 0 duration: 0.5s repeatCount: 1
action: function () {
delete cloned from targetGroup.content;
} }.play();

if (tx < 0)
tx = 0;

if (tx > maxX - targetWidth)
tx = maxX - targetWidth;

target.translateX = tx;
var ty = e.sceneY - startY;
if (ty < 0)
ty = 0;

if (ty > maxY - targetHeight)
ty = maxY - targetHeight;

target.translateY = ty;
} // onMouseDragged
} // init

 

3. Drag it yourself  or try it out now:

 

From http://karussell.wordpress.com/2010/04/22/reply-via-javafx-on-shadow-motion-effect-in-5-lines-of-jquery/

The Java Zone is brought to you in partnership with ZeroTurnaround. Check out this 8-step guide to see how you can increase your productivity by skipping slow application redeploys and by implementing application profiling, as you code!

Topics:

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}