JavaFX GUI------1动画效果

     之前翻译了JavaFX Script，后来一段时间就再没碰JavaFX，本想等Sun出Linux版的时候再看，但是Sun老不出，郁闷，还是回到了win下来看JavaFX了。自己对Swing还算比较了解，所以JavaFX GUI，难度也不大，不过还是有一些不同点的，总结一下。
     顺便说下NetBeans6.5 for JavaFX1.1还不错，在项目的属性里面，run选项中，application,webstart,web,mobile四种运行方式都提供了，想以哪种方式运行就以哪种方式运行，还是很方便的，不过底层就了解得少了。没什么关系，先学会了，在深究也不迟。      



     下面入正题。
     对Swing比较熟悉的人，学习JavaFX的GUI会发现，基本只是换了个写法罢了，很容易明白。但是JavaFX里面还有有一些独有的东西，像动画效果。做过Swing的都知道，动画不过就是不停的擦除和重画而已，所以在Swing里面做动画的做法是不停的改变图形的位置，然后调用界面的paint或者paintComponent方法重新画，就形成了动画。
      而JavaFX则借鉴了Flash关键帧的做法，来实现了动画效果。相关教程可以观看Sun的官方文档，《使用 JavaFX 构建 GUI 应用程序－教程概述》第 7 课：创建动画对象。
      做过Flash肯定对关键帧再熟悉不过了，Flash里面有个时间轴，当Flash开始运行的时候，一条时间线会向前走，当时间线走到关键帧的时候，图形会是预先定义的样子，而在两个关键帧之间，Flash会自动的调整图形，以形成动画。JavaFX也是这个原理。JavaFX的Timeline 和 keyFrame就很直观的说明了时间轴和关键帧了。借用教程代码。

Timeline {
  keyFrames: [
         KeyFrame{
         time: 0s
         values: x => 0.0
         },

         KeyFrame{
         time: 7s
         values: x => 387.0 tween Interpolator.LINEAR
         } 
  ]
}.play();

Timeline就是上面说的时间轴了，时间轴上有keyFrames，这里是定义了两个关键帧，一个关键帧在时间为0秒处，一个为时间7s处。这里的意思就是，x在2秒时为0.0,到7秒时变为387.0，之间JavaFX会自动做补间动画(又是Flash术语)。如下图示意(好久不玩Flash了，没装Flash，就手动画了个示意图)。



JavaFX还提供了简写。

Timeline {
  keyFrames: [
         at (0s) {x => 0.0},
         at (7s) {x => 387.0 tween Interpolator.LINEAR}
  ]
}.play();

意思还是很明了的，在(at)0秒的时候x为0.0，在(at)7秒的时候x变为387

问题：教程里提到tween 运算符是插值的字面值构造函数，这个没有更深入的介绍了，看tween Interpolator.LINEAR的字面意思是线性插入，但是我去掉后好像没什么影响，不知有人知道具体用法没有？

JavaFX动画效果，相对Swing来说可是简单了很多

评论

2 楼 liuxuan620 2009-04-23  

看tween Interpolator.LINEAR的字面意思是线性插入，但是我去掉后好像没什么影响，不知有人知道具体用法没有？

因为Interpolator.LINEAR就是默认的值，加不加无所谓

1 楼 vissul 2009-03-19  

谢谢您的分享，您能在发表一片在jsp中使用javafx的文章么？