Por qué incluir canSkip:true en los timelines

Este video muestra la diferencia en el rendimiento de las animaciones gráficas con y sin canSkip:true. Es recomendable incluir este parametro en los KeyFrame que alteran valores (values:) asociados a animaciones y efectos (cambio de posiciones, variación de sombras, difuminado, etc... cualquier efecto o movimiento gradual).

Una persona del grupo JavafxProgramming creo una aplicación Flex que luego replicó en JavaFX. Su problema era el rendimiento de JavaFX, que hacia su aplicación inutilizable. Pidió consejos al foro, pero nada funcionó... hasta que incluyó el canSkip:true en los timelines... recién ahí la aplicación funcionó como debía.

Quizás sería bueno que Sun incluyera el canSkip con true como valor por defecto. Esto puede terminar desprestigiando la plataforma.

En todo caso, sería bueno que todos comparta este detalle o lo tengan muy presente al momento de usar los timelines o de tener problemas con el rendimiento.

¿Comó aplicar más de un efecto a un nodo?

Si por ejemplo, se desea hacer difusa una imagen y al mismo tiempo reducir su brillo.

El "truco" está en que casi todos los efectos tienen un INPUT. Eso permite anidar los efectos.

var img = ImageView {
    image: Image { url: "{__DIR__}crayons.jpg"},
    effect: 
        GaussianBlur {
            input:
                ColorAdjust{
                    brightness: -0.5
                }
        }
};

JavaFX: Objetos arrastrables con "efectos"

Este ejemplo incluye 3 clases:

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
   ]
}
}