Over a million developers have joined DZone.

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

DZone's Guide to

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

· Java Zone ·
Free Resource

Distribute microservices between the private and public clusters, yet maintain bi-directional connectivity. Content provided by IBM Developer.

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/

Use this tool to look at the contents of GitHub and classify code based on the programming language used.  Content provided by IBM Developer.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}