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();