(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,水平运动从头开始。
   注意了,以上运行中,竖直方向的运动一直存在,加上水平运动后,就是合成运动了。