JavaFX Script ma pewną fajną właściwość. Pozwala na bardzo szybkie tworzenie animacji, a w zasadzie skryptów animacyjnych (moja nazwa, graficy mnie poprawią).
Generalnie cała zabawa opiera się o belkę czasu znaną z Flasha i składnię prawie „user friendly”.

Akcja animacja – Temat: pływający napis

W pierwszej fabryczce padło polecenie „klient płaci za latającą belkę z informacjami pod nagłówkiem więc ma być jak mówi”. Koniec kropka. Kombinowane to było na kilka sposobów. Generalnie chodziło o uzyskanie efektu <marquee> bez użycia tego niepoprawnego tagu. Zróbmy coś takiego za pomocą JavaFX Script.

Akcja animacja – Podwaliny: Potrzebny mi jest model

Model danych jest tu rzeczą drugorzędną, ale łatwo go zaimplementować na rozgrzewkę. Tworzymy nowy projekt JavaFX w netbeansie i uruchamiamy go. Ok, mamy wielki napis „Application Content” na ekranie. Czyli wszystko co chcemy działa. Jako, że w naszym głównym skrypcie mało nas obchodzi co dokładnie będziemy wyświetlać i przewijać to wyrzućmy sobie nasz napis do oddzielnej klasy:

Listing 1. Zawartość, która będzie przewijana

package pl.koziolekweb.fxmarquee;

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

/**
 * @author koziolek
 */

public class Napis extends CustomNode {

    public var x:Number = 10;
    public var y:Number = 30;
    public var textContent:String = "Application content Application content Application content";

    public override function create(): Node {
        return Group {
            content: [
                Rectangle{
                    stroke: Color.BLUE;
                    fill: Color.RED;
                    width: 250;
                    height: 80;
                }
                Text{
                    font: Font {
                        size: 12
                    }
                    x: bind x,
                    y: bind y
                    content: bind textContent;
                }
            ]
        };
    }

    public function length():Number{
        return text.content.length()*6;
    }
}

Śmiga jak wiewiórka na kawie. Następnie czas wprowadzić tu kilka zmian. Musimy mieć dostęp do właściwości takich jak położenie tekstu. Dodatkowo wrzucimy sobie czerwony prostokąt. Docelowo będzie on reprezentował widoczny obszar na stronie później to usuniemy. Metoda length() posłuży nam do określenia o ile dodatkowo przesunąć napis by cały zniknął z lewej strony. Całość ma działać statycznie. To znaczy podajemy tekst, który będzie się przewijał, aż nie uznamy, że wystarczy i za pomocą oddzielnego instrumentu jakim jest żądanie http nie pobierzemy nowych danych (to później). Odpalamy całość i patrzymy jak śmiga.

Akcja animacja – Animujemy

Czas zatem na wisienkę na naszym Java FXowym torcie. Całość sprowadza się do bardzo, bardzo prostego kodu:

Listing 2. Animacje i klasa głowna

package pl.koziolekweb.fxmarquee;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.lang.Duration;
import javafx.scene.Scene;
import javafx.stage.Stage;
import pl.koziolekweb.fxmarquee.Napis;

/**
 * @author koziolek
 */

var model: Napis = new Napis();

Timeline{
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
       at(0s) {model.x => 250}
       at(30s) {model.x => 0 - model.length()}
    ]
}.play();

Stage {
    title: "Application title"
    width: 300
    height: 80
    scene: Scene {
        content: model
    }
}

Jak widać całość jest banalnie wręcz prosta. Sprowadza się do definiowania kolejnych klatek kluczowych i wartości właściwości kolejnych obiektów. Resztę odwali za nas kompilator i silnik JavaFX. Jestem w raju 🙂
Dobranoc 🙂