譯自《Shapes and Animation》
形狀和動畫
JavaFX帶有幾乎表示任何幾何形狀的節(jié)點球榆，以及一個Path節(jié)點朽肥，它提供組裝和管理幾何路徑所需的工具（以創(chuàng)建自定義形狀）。 JavaFX還具有動畫支持持钉，逐漸改變Node屬性衡招，創(chuàng)建兩個狀態(tài)之間的視覺轉(zhuǎn)換。 TornadoFX旨在通過構(gòu)建器構(gòu)造來簡化所有這些功能每强。
形狀基礎(chǔ)（Shape Basics）
形狀構(gòu)建器的每個參數(shù)都是可選的始腾，在大多數(shù)情況下，默認值為0.0 空执。 這意味著您只需要提供您關(guān)心的參數(shù)浪箭。 構(gòu)建器具有每個形狀的大多數(shù)屬性的位置參數(shù)，其余的可以設置在隨后的函數(shù)塊中辨绊。 因此奶栖，這些都是創(chuàng)建矩形的有效方式：
rectangle {
width = 100.0
height = 100.0
}
rectangle(width = 100.0, height = 100.0)
rectangle(0.0, 0.0, 100.0, 100.0)
您選擇的形式是偏好的問題，但顯然需要考慮到您編寫的代碼的易讀性。 為了清楚起見宣鄙，本章中的示例指定了代碼塊中的大部分屬性袍镀，除非沒有代碼塊支持或參數(shù)是非常自明的。
在父項內(nèi)定位
大多數(shù)形狀構(gòu)建器可以讓您選擇在父項中指定形狀的位置冻晤。 這是否有任何影響取決于父節(jié)點苇羡。 除非您在形狀上調(diào)用setManaged(false)，否則HBox不會關(guān)心您指定的x和y坐標鼻弧。 但是设江，Group控件將會關(guān)心這一點。 以下示例中的截圖將通過在一個Group周圍包裝一個StackPane攘轩，并最后在該Group內(nèi)創(chuàng)建形狀绣硝，如下所示。
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
}
弧形（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
}
圓圈（Circle）
Circle表示具有指定radius和center的圓。
circle {
centerX = 100.0
centerY = 100.0
radius = 50.0
}
CubicCurve
CubicCurve表示(x,y)坐標空間中的立方貝塞爾參數(shù)曲線段（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表示具有指定大小和位置參數(shù)的橢圓浴韭。
ellipse {
centerX = 50.0
centerY = 50.0
radiusX = 100.0
radiusY = 50.0
fill = Color.CORAL
}
線（Line）
線是相當直接的丘喻。 提供開始和結(jié)束坐標以繪制兩點之間的一條線。
line {
startX = 50.0
startY = 50.0
endX = 150.0
endY = 100.0
}
折線（Polyline）
Polyline由分段點數(shù)組（an array of segment points）定義念颈。 Polyline與Polygon類似泉粉，但不會自動關(guān)閉。
polyline(0.0, 0.0, 80.0, 40.0, 40.0, 80.0)
QuadCurve
Quadcurve表示(x,y)坐標空間中的二次Bézier參數(shù)曲線段（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路徑數(shù)據(jù)（SVG path data）構(gòu)造的形狀窟感。
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代表一個形狀讨彼，并提供基本的構(gòu)造和管理幾何路徑所需的設施。 換句話說柿祈，它可以幫助您創(chuàng)建自定義形狀哈误。 以下幫助函數(shù)可用于構(gòu)建路徑：
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中創(chuàng)建動畫有三個組件。
Timeline - 以指定順序執(zhí)行的一系列KeyFrame項
KeyFrame - 指定在一個或多個節(jié)點上的一個或多個可寫屬性（通過KeyValue）的值改變的（specifying value changes）“快照”
KeyValue - 將Node屬性與將被“轉(zhuǎn)換（transitioned）”到的值配對
KeyValue是JavaFX動畫的基本構(gòu)建塊黑滴。 它指定一個屬性和“新值”憨募，它將逐漸轉(zhuǎn)換到該新值。 所以如果你有一個Rectangle袁辈， 其rotateProperty()為0.0菜谣，并且你指定一個KeyValue，將其改為90.0度晚缩，它會遞增地從0.0改變到90.0度尾膊。 將KeyValue放在KeyFrame，這可以指定這兩個值之間的動畫持續(xù)時間荞彼。 在這種情況下冈敛，我們讓它為5秒。 最后把這個KeyFrame放在一個Timeline 鸣皂。 如果您運行下面的代碼抓谴，您將看到一個rectange在5秒鐘內(nèi)從0.0逐漸旋轉(zhuǎn)到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)
}
}
在給定的KeyFrame寞缝，您可以同時處理該5秒窗口中的其他屬性癌压。 例如，我們可以在Rectangle旋轉(zhuǎn)時轉(zhuǎn)換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)
}
}
插值（Interpolators）
您還可以指定一個可以為動畫添加微妙效果的Interpolator滩届。 例如，您可以指定Interpolator.EASE_BOTH來優(yōu)化動畫開始和結(jié)束時的值更改被啼。
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)
}
}
循環(huán)和自動反轉(zhuǎn)（Cycles and AutoReverse）
您可以修改timeline()其他屬性帜消，如cycleCount和autoReverse。 cycleCount將重復動畫指定次數(shù)浓体，且將isAutoReverse設置為true將導致每個循環(huán)返回泡挺。
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()。 調(diào)用該interoplator的animate()擴展函數(shù)勘伺，并提供endValue跪腹， duration，以及可選的interoplator飞醉。 如果您只是一個屬性動畫冲茸，這會更短屯阀，更干凈。
rectangle.rotateProperty().animate(endValue = 180.0, duration = 5.seconds)
總結(jié)
在本章中轴术，我們介紹了形狀和動畫的構(gòu)造器难衰。 我們沒有覆蓋JavaFX的Canvas因為這超出了TornadoFX框架的范圍。 它可以容易地占用多個章節(jié)逗栽。 但是盖袭，形狀和動畫應該能允許您為大多數(shù)任務執(zhí)行基本的自定義圖形。
現(xiàn)在彼宠，我們對TornadoFX構(gòu)建器的覆蓋范圍到此結(jié)束鳄虱。 接下來，我們將為那些需要使用它的人介紹FXML凭峡。
