1) Una clase (SpringInterpolator) que define un nuevo tipo de "interpolador" que genera un movimiento "elástico" (de resorte)
2) Una clase (DraggableObj) que permite que los elementos asignados sean "arrastrables" (drag and drop).
3) La clase principal (Main) que implementa la aplicación y que agrega 4 elementos para arrastrar por la ventana.
archivo SpringInterpolator.fx
package DraggableClass;
import javafx.animation.SimpleInterpolator;
import java.lang.Math;
public class SpringInterpolator extends SimpleInterpolator {
// amplitud de la onda
// controla que tan lejos puede llegar el objeto desde su punto final
public-init var amplitude:Number = 1.0;
// determina el peso del objeto
// hace el movimiento de la onda mas grande y llega mas lejos
public-init var mass:Number = 0.058;
// rigidez del movimiento de la onda o resolte
// hace la onda mas corta o ceñida
public-init var stiffness:Number = 12.0;
// hace la onda de fase, de modo que el objeto
// no acabe en el lugar de descanso.
// esta variable generalmente no cambia
public-init var phase:Number = 0.0;
// si actua como un resorte normal o rebota
public-init var bounce:Boolean = false;
// usado para calculos internos
var pulsation:Number;
init {
this.pulsation = Math.sqrt(stiffness / mass);
}
// ecuacion del resorte
override public function curve(t: Number) : Number {
var t2 = -Math .cos(pulsation * t + phase + Math.PI) * (1 - t) * amplitude ;
// usa el valor absoluto de la distancia si rebota
if(bounce) {
return 1 - Math.abs(t2);
} else {
return 1 - t2;
}
}
}
archivo DraggableObj.fx
package DraggableClass;
import javafx.scene.Group;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.animation.Timeline;
import javafx.animation.Timeline.*;
import javafx.animation.Interpolator;
import javafx.animation.Interpolator.*;
public class DraggableObj extends CustomNode {
public var content: Node[];
var endX = 0.0;
var endY = 0.0;
var startX = 0.0;
var startY = 0.0;
var op:Number=100;
var scale:Number=100;
// produce un parpadeo rapido al
// al soltar los objetos arrastrados
var t = Timeline {
repeatCount: 3
keyFrames: [
at (0s) { op => 100.0 },
at (0.05s) { op => 0.0 }
]
}
// instancia el interpolador de resorte
def spring = SpringInterpolator { bounce: true};
// escala objetos con efecto de resorte
var s = Timeline {
keyFrames: [
at (1.5s) { scale => 100.0 tween spring},
]
};
// escala objectos de tamano original
// a tamano 50% mas grande al hacer
// click sobre ellos
var i = Timeline {
keyFrames: [
at (0s) { scale => 100.0 },
at (0.3s) { scale => 150.0},
]
};
override function create() : Node {
// produce una variacion constante en la
// opacidad de los elementos arrastrables
Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
at (0s) { op => 70.0 },
at (0.3s) { op => 100.0 tween Interpolator.EASEBOTH}
]
}.play();
Group {
translateX: bind endX
translateY: bind endY
content: bind content
opacity: bind op/100.0
scaleX: bind scale/100.0
scaleY: bind scale/100.0
onMouseDragged: function(e) {
endX = e.dragX-startX;
endY = e.dragY-startY;
}
onMousePressed: function(e) {
startX = e.dragX-endX;
startY = e.dragY-endY;
s.stop();
i.playFromStart();
}
onMouseReleased: function(e) {
t.playFromStart();
s.time=0s;
s.play();
}
};
}
}
archivo Main.fx
package DraggableClass;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.input.MouseEvent;
var newCircle=DraggableObj{
translateX:700
translateY:200
content: Circle {
radius: 100
fill: Color.RED
opacity:0.75
}
};
// este objeto incluye un ARRAY (arreglo) de figuras
var newCircle2=DraggableObj{
translateX:200
translateY:200
content: [
Circle {
opacity:0.5
fill:Color.BLUE
radius:70
},
Rectangle {
translateX:-50
translateY:-50
width:100
height:100
rotate:45
fill:Color.GREEN
opacity:0.5
}
]
};
var newImage=DraggableObj{
translateX:200
translateY:500
content: ImageView {
opacity:0.8
preserveRatio:true
fitWidth:200
image: Image {
// url: "file:/C:/Users/myuser/Pictures/2008a.png"
url: "http://www.google.com/intl/en_ALL/images/logo.gif"
}
}
}
var newRect=DraggableObj{
translateX:700
translateY:500
content: Rectangle {
width:100
height:100
rotate:45
fill:Color.PURPLE
opacity:0.5
}
};
Stage {
title: "Application title"
width: 1200
height: 750
scene: Scene {
// Incluye un ARRAY de objetos
content: [
newCircle,
newCircle2,
newImage,
newRect
]
}
}
