Reply via JavaFX on: Shadow Motion Effect in 5 Lines Of jQuery
Join the DZone community and get the full member experience.
Join For Freei 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:
Opinions expressed by DZone contributors are their own.
Comments