Text Transitions

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.scene.text.Font;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;

def BASE_WIDTH = 800;
def BASE_HEIGHT = 600;
def MARGIN = 20;

var backgroundRect = Rectangle
{
x: 0
y: 0
width: BASE_WIDTH
height: BASE_HEIGHT

onMouseClicked: function(event) { t.playFromStart() }
}

var boundingRect = Rectangle
{
x: MARGIN * 2
y: BASE_HEIGHT * 2 / 3 - MARGIN
width: BASE_WIDTH - MARGIN * 4
height: BASE_HEIGHT - (BASE_HEIGHT * 2 / 3)
fill: Color.rgb(255, 255, 255, 0.2)
stroke: Color.WHITE
strokeWidth: 2
}

var displayedText = Text
{
x: boundingRect.x + MARGIN
y: boundingRect.y + MARGIN
wrappingWidth: boundingRect.width - MARGIN * 2
content: ""
font: Font { size: 36 }
textOrigin: TextOrigin.TOP
//stroke: Color.BLACK
fill: Color.WHITE
effect: DropShadow {}
}

def FINAL_TEXT = "I was trying to get the text to wrap, but the text layout engine would keep putting a character on the previous line until the full word was visible.";
var charCount = 0 on replace
{
var textToDisplay = FINAL_TEXT.substring(0, charCount);
displayedText.content = textToDisplay;
}

Stage
{
title: "Text demo"
visible: true
scene: Scene
{
width: BASE_WIDTH
height: BASE_HEIGHT
fill: Color.BLACK
content:
[
backgroundRect,
boundingRect,
displayedText
]
}
}

var t = Timeline
{
keyFrames:
[
// In reality the speed would be per letter so the times would
// be computed dynamically. I have an idea of how to do that.
// Initial experiments also suggest that the speed of displaying
// each letter should be relative to the width of the letter.
KeyFrame { time: 0s, values: charCount => 0 }
KeyFrame { time: 3s, values: charCount => FINAL_TEXT.length() }
]
};
t.play();