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 水平移动

08_03_03 basic-timeline

例3-5展示了基本的时间轴动画的代码片段。

例3-5 时间轴动画

时间轴事件(Timeline Event)

JavaFX提供了处理事件的能力,事件可以在时间轴动画播放过程中被触发。例3-6中的代码在一个指定范围内修改圆的半径,同时KeyFrame随机设置圆在scene中的x坐标值。

例3-6 时间轴事件

插值器(Interpolator)

插值(Interpolation)定义了对象在动作起始和结束点之间的位置。你可以使用Interpolator类的各种内置实现,或者你也可以自行实现Interpolator来自定义Interpolation行为。

内置 Interpolator

JavaFX提供了多种内置Interpolator,可以用于在你的动画中创建不同的特效。一般情况下,JavaFX使用线性Interpolator来计算坐标值。

例3-7展示了一个代码片段,其中内置Interpolator实例EASE_BOTH被添加到基本时间轴动画的KeyValue中。当对象达到起始点和结束点时这个Interpolator会创建了一个弹跳特效。

例3-7 内置interpolator

自定义插值器

除了内置Interpolators,你还可以实现你自己的Intepolator来自定义插值行为。一个自定义Interpolator样例包含两个java文件。例3-8展示了用于为动画计算y轴坐标值的自定义Interpolator。例3-9展示了使用AnimationBooleanInterpolator的代码片段。

例3-8 自定义Interpolator

3-9 使用自定义Interpolator的动画

应用程序文件

NetBeans工程文件

animation.zip

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/08/animation-transition/
百度已收录