DOC-08-03 动画基础
JavaFX中的动画可以分为时间轴动画和过渡两种。本章将为每种类型提供一些样例。
Timeline和Transition都是javafx.animation.Animation的子类。关于一些详细的类、方法和其它特性的更多信息，请查看API文档。
过渡(Transitions)
JavaFX中的Transition提供了在一条内部时间轴上展现动画的手段。Transition可以被组合用来创建并行或串行的多重动画。请查看“并行过渡(Parallel Transition)”和“串行过渡(Sequential Transition)”章节的详细信息。下面的章节将提供一些Transition动画样例。
褪色过渡(Fade Transition)
Fade Transition在给定的时间内修改节点的不透明度。
例3-1中的代码片段展示了应用在一个矩形上的Fade Transition。首先创建了一个圆角矩形，然后对它应用了一个Fade Transition。
例3-1 褪色过渡
|
1 2 3 4 5 6 7 8 9 10 11 |
final Rectangle rect1 = new Rectangle(10, 10, 100, 100); rect1.setArcHeight(20); rect1.setArcWidth(20); rect1.setFill(Color.RED); ... FadeTransition ft = new FadeTransition(Duration.millis(3000), rect1); ft.setFromValue(1.0); ft.setToValue(0.1); ft.setCycleCount(Timeline.INDEFINITE); ft.setAutoReverse(true); ft.play(); |
路径过渡(Path Transition)
Path Transition在给定的时间内将一个节点沿着一个路径从一端移动到另一端。
图3-1 路径过渡
例3-2中的代码片段展示了应用在一个矩形上的路径过渡。这个动画会在矩形达到路径端点时反转。代码中首先创建了一个圆角矩形，然后创建了一个新的PathTransition并应用到了矩形之上。
例3-2 路径过渡
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
final Rectangle rectPath = new Rectangle (0, 0, 40, 40); rectPath.setArcHeight(10); rectPath.setArcWidth(10); rectPath.setFill(Color.ORANGE); ... Path path = new Path(); path.getElements().add(new MoveTo(20,20)); path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120)); path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240)); PathTransition pathTransition = new PathTransition(); pathTransition.setDuration(Duration.millis(4000)); pathTransition.setPath(path); pathTransition.setNode(rectPath); pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT); pathTransition.setCycleCount(Timeline.INDEFINITE); pathTransition.setAutoReverse(true); pathTransition.play(); |
并行过渡(Parallel Transition)
Parallel Transition是指在同一时间内执行多个过渡效果。
例3-3中的代码片段展示了一个Parallel Transaction，它在一个矩形上应用了淡出淡入、移动、旋转和缩放过渡。
图3-2 并行过渡
例3-3 并行过渡
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
Rectangle rectParallel = new Rectangle(10,200,50, 50); rectParallel.setArcHeight(15); rectParallel.setArcWidth(15); rectParallel.setFill(Color.DARKBLUE); rectParallel.setTranslateX(50); rectParallel.setTranslateY(75); ... FadeTransition fadeTransition = new FadeTransition(Duration.millis(3000), rectParallel); fadeTransition.setFromValue(1.0f); fadeTransition.setToValue(0.3f); fadeTransition.setCycleCount(2); fadeTransition.setAutoReverse(true); TranslateTransition translateTransition = new TranslateTransition(Duration.millis(2000), rectParallel); translateTransition.setFromX(50); translateTransition.setToX(350); translateTransition.setCycleCount(2); translateTransition.setAutoReverse(true); RotateTransition rotateTransition = new RotateTransition(Duration.millis(3000), rectParallel); rotateTransition.setByAngle(180f); rotateTransition.setCycleCount(4); rotateTransition.setAutoReverse(true); ScaleTransition scaleTransition = new ScaleTransition(Duration.millis(2000), rectParallel); scaleTransition.setToX(2f); scaleTransition.setToY(2f); scaleTransition.setCycleCount(2); scaleTransition.setAutoReverse(true); parallelTransition = new ParallelTransition(); parallelTransition.getChildren().addAll( fadeTransition, translateTransition, rotateTransition, scaleTransition ); parallelTransition.setCycleCount(Timeline.INDEFINITE); parallelTransition.play(); |
串行过渡(Sequential Transition)
Sequential Transition指的是一个接一个地执行多个过渡效果。
例3-4中的代码片段展示串行一个接一个地执行过渡的效果。它在一个矩形上应用了淡入淡出、移动、旋转和缩放过渡效果。
例3-4 串行过渡
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
Rectangle rectSeq = new Rectangle(25,25,50,50); rectSeq.setArcHeight(15); rectSeq.setArcWidth(15); rectSeq.setFill(Color.CRIMSON); rectSeq.setTranslateX(50); rectSeq.setTranslateY(50); ... FadeTransition fadeTransition = new FadeTransition(Duration.millis(1000), rectSeq); fadeTransition.setFromValue(1.0f); fadeTransition.setToValue(0.3f); fadeTransition.setCycleCount(1); fadeTransition.setAutoReverse(true); TranslateTransition translateTransition = new TranslateTransition(Duration.millis(2000), rectSeq); translateTransition.setFromX(50); translateTransition.setToX(375); translateTransition.setCycleCount(1); translateTransition.setAutoReverse(true); RotateTransition rotateTransition = new RotateTransition(Duration.millis(2000), rectSeq); rotateTransition.setByAngle(180f); rotateTransition.setCycleCount(4); rotateTransition.setAutoReverse(true); ScaleTransition scaleTransition = new ScaleTransition(Duration.millis(2000), rectSeq); scaleTransition.setFromX(1); scaleTransition.setFromY(1); scaleTransition.setToX(2); scaleTransition.setToY(2); scaleTransition.setCycleCount(1); scaleTransition.setAutoReverse(true); sequentialTransition = new SequentialTransition(); sequentialTransition.getChildren().addAll( fadeTransition, translateTransition, rotateTransition, scaleTransition); sequentialTransition.setCycleCount(Timeline.INDEFINITE); sequentialTransition.setAutoReverse(true); sequentialTransition.play(); |
关于动画和过渡的更多信息，请查看API文档和SDK中Ensemble项目的Animation部分。
时间轴动画
动画是由它的一些相关属性驱动的，例如大小、位置和颜色等。Timeline提供了随着时间进展更新这些属性值的能力。JavaFX支持关键帧动画(Key Frame Animation)。在Key Frame Animation中，绘图场景(Graphical Scene)的动画状态的转换是由特定时间点的Scene状态的起始和结束快照(Key Frames，关键帧)来定义的。系统能够自动执行动画。在需要时它可以停止、暂停、恢复、反转或者重复动作。
基本的时间轴动画(Timeline Animation)
例3-5中的代码为矩形创建了一个水平移动动画，在500毫秒内将它从原始位置x=100移动到了x=300。要对一个对象创建一个水平移动动画，只要修改x坐标值而保留y坐标值不变即可。
图3-3 水平移动
