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 褪色过渡

路径过渡(Path Transition)

Path Transition在给定的时间内将一个节点沿着一个路径从一端移动到另一端。

图3-1 路径过渡

08_03_01 path

例3-2中的代码片段展示了应用在一个矩形上的路径过渡。这个动画会在矩形达到路径端点时反转。代码中首先创建了一个圆角矩形,然后创建了一个新的PathTransition并应用到了矩形之上。

例3-2 路径过渡

并行过渡(Parallel Transition)

Parallel Transition是指在同一时间内执行多个过渡效果。

例3-3中的代码片段展示了一个Parallel Transaction,它在一个矩形上应用了淡出淡入、移动、旋转和缩放过渡。

图3-2 并行过渡

08_03_02 parallel

例3-3 并行过渡

串行过渡(Sequential Transition)

Sequential Transition指的是一个接一个地执行多个过渡效果。

例3-4中的代码片段展示串行一个接一个地执行过渡的效果。它在一个矩形上应用了淡入淡出、移动、旋转和缩放过渡效果。

例3-4 串行过渡

关于动画和过渡的更多信息,请查看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 水平移动