JavaFX之3 动画与事件处理

(1)JavaFx动画制作类似与FLASH，学过的都知道FLASH里是用帧来制作动画，JavaFx里也是根据帧来的。

首先动画制作要用到Timeline，也就是 javafx.animation.Timeline;
定义一个Timeline：
Timeline { keyFrames:[ at (0s) {x=>0.0} at (5s) {x=>200.0 tween Interpolator.LINEAR} }.play();

上面一例的完全形式也可以是：
Timeline { keyFrames:[ KeyFrame{ time: 0s values: x => 0.0 }, KeyFrame{ time:7s values:x =>200.0 tween Interpolator.LINEAR } }.play();

1.两个x,分别表示该动画的运动方式，从x=0到x=200.

2.Interpolator.LINEAR表示线性插值（汗。学过线性代数的都知道。。偶线性代数只是刚好过了。分不高。），当然也可以用其他插值形式，详情请自己查询API,javafx.animation.Interpolator里。。

3.最后的.play()方法，是指动画开始，也可以调用stop(),pause()，playFromStart()等方法.

4.注意上面例子里x是变量，需要定义。

 

下面我们就根据上面的动画知识，来做个简单的JavaFX动画吧。
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Color; import javafx.scene.paint.Stop; import javafx.animation.Timeline; import javafx.animation.Interpolator; var x:Number=20; var y:Number=20; def linear=LinearGradient { startX:0 startY:0 endX:1 endY:0 proportional:true stops:[ Stop{offset:0.0 color:Color.WHITE} Stop{offset:1.0 color:Color.GREEN} ] }; Timeline { autoReverse: true repeatCount: Timeline.INDEFINITE keyFrames:[ at (0s) {x=>0} at (6s) {x=>240 tween Interpolator.LINEAR} ] }.play(); Timeline { autoReverse: true repeatCount: Timeline.INDEFINITE keyFrames:[ at (0s) {y=>0} at (8s) {y=>290 tween Interpolator.LINEAR} ] }.play(); Stage { title:"JavaFx动画的小例子" width:300 height:400 visible:true scene:Scene{ fill:linear content:[ Rectangle{ x:bind x y:bind y width:50 height:80 fill:linear } ] } }

注意:
1.autoReverse: true是设置动画物体到末帧时会反弹回来~。这个挺方便的。repeatCount: Timeline.INDEFINITE，设置动画重复播放的。

2.上面用到的渐进色，在前一篇文章中讲过的。

3.关于定义，用var定义的话，以后变量可以改变。用def定义将不能改变~

 

由于是动画，请大家自己运行~效果图看不出来什么。

 

（2）事件处理
      这里只讲一点键盘事件处理，上面做了个动画的小例子，但是运行过的人都发现，这个动画是无法控制的。也就是说，它是自动运行，然后不会停止。下面我们就来添加键盘事件，来控制它的播放，暂停，停止和从头开始吧。
      键盘事件需要用到javafx.scene.input.KeyCode和javafx.scene.input.KeyEvent.
      只是几个方法，我就不多说了。直接给出源码~
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Color; import javafx.scene.paint.Stop; import javafx.animation.Timeline; import javafx.animation.Interpolator; import javafx.scene.input.KeyCode; import javafx.scene.input.KeyEvent; import javafx.scene.Group; var x:Number=20; var y:Number=20; def linear=LinearGradient { startX:0 startY:0 endX:1 endY:0 proportional:true stops:[ Stop{offset:0.0 color:Color.WHITE} Stop{offset:1.0 color:Color.GREEN} ] }; def timeline=Timeline { autoReverse: true repeatCount: Timeline.INDEFINITE keyFrames:[ at (0s) {x=>0} at (6s) {x=>240 tween Interpolator.LINEAR} ] }; Timeline { autoReverse: true repeatCount: Timeline.INDEFINITE keyFrames:[ at (0s) {y=>0} at (8s) {y=>290 tween Interpolator.LINEAR} ] }.play(); Stage { title:"JavaFx动画的小例子" width:300 height:400 visible:true scene:Scene{ fill:linear content:[ Group{ content:[ Rectangle{ x:bind x y:bind y width:50 height:80 fill:linear } ] onKeyPressed:function(evt:KeyEvent):Void { if(evt.code==KeyCode.VK_Z) { timeline.play(); } else if(evt.code==KeyCode.VK_X) { timeline.pause(); } else if(evt.code==KeyCode.VK_C) { timeline.stop(); } else if(evt.code==KeyCode.VK_V) { timeline.playFromStart(); } } } ] } }

1.Group就不多说了，就是一个组，可以把许多图形组成一个图形，事件处理可以只处理那组合后的图形~

2.上述事件处理，只监听了水平方向的运动。

程序运行效果是：
   一开始它是竖直运行的，按Z键，开始水平运动，按X，暂停水平运动，按C，停止水平运动，按V，水平运动从头开始。
   注意了，以上运行中，竖直方向的运动一直存在，加上水平运动后，就是合成运动了。