译自《Shapes and Animation》

形状和动画

JavaFX带有几乎表示任何几何形状的节点，以及一个Path节点，它提供组装和管理几何路径所需的工具（以创建自定义形状）。 JavaFX还具有动画支持，逐渐改变Node属性，创建两个状态之间的视觉转换。 TornadoFX旨在通过构建器构造来简化所有这些功能。

形状基础（Shape Basics）

形状构建器的每个参数都是可选的，在大多数情况下，默认值为0.0 。这意味着您只需要提供您关心的参数。构建器具有每个形状的大多数属性的位置参数，其余的可以设置在随后的函数块中。因此，这些都是创建矩形的有效方式：

rectangle {
    width = 100.0
    height = 100.0
}

rectangle(width = 100.0, height = 100.0)

rectangle(0.0, 0.0, 100.0, 100.0)

您选择的形式是偏好的问题，但显然需要考虑到您编写的代码的易读性。为了清楚起见，本章中的示例指定了代码块中的大部分属性，除非没有代码块支持或参数是非常自明的。

在父项内定位

大多数形状构建器可以让您选择在父项中指定形状的位置。这是否有任何影响取决于父节点。除非您在形状上调用setManaged(false)，否则HBox不会关心您指定的x和y坐标。但是，Group控件将会关心这一点。以下示例中的截图将通过在一个Group周围包装一个StackPane，并最后在该Group内创建形状，如下所示。

class MyView: View() {

    override val root =  stackpane {
       group {
            //shapes will go here
       }
    }
}

长方形（Rectangle）

Rectangle定义了一个矩形，其中可选的大小和位置在父项中。可以使用arcWidth和arcHeight属性指定圆角（图9.1）。

rectangle {
    fill = Color.BLUE
    width = 300.0
    height = 150.0
    arcWidth = 20.0
    arcHeight = 20.0
}

图9.1

弧形（Arc）

Arc表示由中心（center），起始角度（start angle），角度范围（angular extent，以度计的弧度）和圆弧类型（arc type， OPEN， CHORD或ROUND ）定义的弧形对象（图9.2）

arc {
    centerX = 200.0
    centerY = 200.0
    radiusX = 50.0
    radiusY = 50.0
    startAngle = 45.0
    length = 250.0
    type = ArcType.ROUND
}

图9.2

圆圈（Circle）

Circle表示具有指定radius和center的圆。

circle {
    centerX = 100.0
    centerY = 100.0
    radius = 50.0
}

CubicCurve

CubicCurve表示(x,y)坐标空间中的立方贝塞尔参数曲线段（cubic Bézier parametric curve segment）。使用指定点(controlX1, controlY1) 和(controlX2, controlY2) 作为Bézier控制点，绘制与指定的坐标(startX, startY)和(endX, enfY)相交的曲线。

cubiccurve {
    startX = 0.0
    startY = 50.0
    controlX1 = 25.0
    controlY1 = 0.0
    controlX2 = 75.0
    controlY2 = 100.0
    endX = 150.0
    endY = 50.0
    fill = Color.GREEN
}

椭圆（Ellipse）

Ellipse表示具有指定大小和位置参数的椭圆。

ellipse {
    centerX = 50.0
    centerY = 50.0
    radiusX = 100.0
    radiusY = 50.0
    fill = Color.CORAL
}

线（Line）

线是相当直接的。提供开始和结束坐标以绘制两点之间的一条线。

line {
    startX = 50.0
    startY = 50.0
    endX = 150.0
    endY = 100.0
}

折线（Polyline）

Polyline由分段点数组（an array of segment points）定义。 Polyline与Polygon类似，但不会自动关闭。

polyline(0.0, 0.0, 80.0, 40.0, 40.0, 80.0)

QuadCurve

Quadcurve表示(x,y)坐标空间中的二次Bézier参数曲线段（quadratic Bézier parametric curve segment）。使用指定点(controlX, controlY) 作为Bézier控制点，绘制与指定坐标(startX, startY)和 (endX, endY)相交的曲线。

quadcurve {
    startX = 0.0
    startY = 150.0
    endX = 150.0
    endY = 150.0
    controlX = 75.0
    controlY = 0.0
    fill = Color.BURLYWOOD
}

SVGPath

SVGPath表示通过从String解析SVG路径数据（SVG path data）构造的形状。

svgpath("M70,50 L90,50 L120,90 L150,50 L170,50 L210,90 L180,120 L170,110 L170,200 L70,200 L70,110 L60,120 L30,90 L70,50") {
    stroke = Color.DARKGREY
    strokeWidth = 2.0
    effect = DropShadow()
}

路径（Path）

Path代表一个形状，并提供基本的构造和管理几何路径所需的设施。换句话说，它可以帮助您创建自定义形状。以下帮助函数可用于构建路径：

moveTo(x, y)
hlineTo(x)
vlineTo(y)
quadqurveTo(controlX, controlY, x, y)
lineTo(x, y)
arcTo(radiusX, radiusY, xAxisRotation, x, y, largeArcFlag, sweepFlag)
closepath()

path {
    moveTo(0.0, 0.0)
    hlineTo(70.0)
    quadqurveTo {
        x = 120.0
        y = 60.0
        controlX = 100.0
        controlY = 0.0
    }
    lineTo(175.0, 55.0)
    arcTo {
        x = 50.0
        y = 50.0
        radiusX = 50.0
        radiusY = 50.0
    }
}

动画

JavaFX具有通过逐渐更改其一个或多个属性来动画化任何Node的工具。在JavaFX中创建动画有三个组件。

Timeline - 以指定顺序执行的一系列KeyFrame项

KeyFrame - 指定在一个或多个节点上的一个或多个可写属性（通过KeyValue）的值改变的（specifying value changes）“快照”

KeyValue - 将Node属性与将被“转换（transitioned）”到的值配对

KeyValue是JavaFX动画的基本构建块。它指定一个属性和“新值”，它将逐渐转换到该新值。所以如果你有一个Rectangle，其rotateProperty()为0.0，并且你指定一个KeyValue，将其改为90.0度，它会递增地从0.0改变到90.0度。将KeyValue放在KeyFrame，这可以指定这两个值之间的动画持续时间。在这种情况下，我们让它为5秒。最后把这个KeyFrame放在一个Timeline 。如果您运行下面的代码，您将看到一个rectange在5秒钟内从0.0逐渐旋转到90.0度（图9.1）。

val rectangle = rectangle(width = 60.0,height = 40.0) {
    padding = Insets(20.0)
}
timeline {
    keyframe(Duration.seconds(5.0)) {
        keyvalue(rectangle.rotateProperty(),90.0)
    }
}

图9.1

在给定的KeyFrame，您可以同时处理该5秒窗口中的其他属性。例如，我们可以在Rectangle旋转时转换arcWidthProperty()和arcHeightProperty() （图9.2）。

timeline {
        keyframe(Duration.seconds(5.0)) {
            keyvalue(rectangle.rotateProperty(),90.0)
            keyvalue(rectangle.arcWidthProperty(),60.0)
            keyvalue(rectangle.arcHeightProperty(),60.0)
        }
}

图9.2

插值（Interpolators）

您还可以指定一个可以为动画添加微妙效果的Interpolator。例如，您可以指定Interpolator.EASE_BOTH来优化动画开始和结束时的值更改。

val rectangle = rectangle(width = 60.0, height = 40.0) {
    padding = Insets(20.0)
}

timeline {
    keyframe(5.seconds) {
        keyvalue(rectangle.rotateProperty(), 180.0, interpolator = Interpolator.EASE_BOTH)
    }
}

循环和自动反转（Cycles and AutoReverse）

您可以修改timeline()其他属性，如cycleCount和autoReverse。 cycleCount将重复动画指定次数，且将isAutoReverse设置为true将导致每个循环返回。

timeline {
    keyframe(5.seconds) {
        keyvalue(rectangle.rotateProperty(), 180.0, interpolator = Interpolator.EASE_BOTH)
    }
    isAutoReverse = true
    cycleCount = 3
}

要无限期重复动画，请将cycleCount设置为Timeline.INDEFINITE。

速记动画（Shorthand Animation）

如果要为单个属性设置动画，您可以快速地将其动画化，而无需声明timeline()， keyframe()和keyset()。调用该interoplator的animate()扩展函数，并提供endValue， duration，以及可选的interoplator。如果您只是一个属性动画，这会更短，更干净。

rectangle.rotateProperty().animate(endValue = 180.0, duration = 5.seconds)

总结

在本章中，我们介绍了形状和动画的构造器。我们没有覆盖JavaFX的Canvas因为这超出了TornadoFX框架的范围。它可以容易地占用多个章节。但是，形状和动画应该能允许您为大多数任务执行基本的自定义图形。

现在，我们对TornadoFX构建器的覆盖范围到此结束。接下来，我们将为那些需要使用它的人介绍FXML。

TornadoFX编程指南，第9章，形状和动画