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

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/