Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

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/

Bitbucket is the Git solution for professional teams who code with a purpose, not just as a hobby. Get started today, it's free.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}