javaFX的Timeline学习

javafx.animation.Timeline是javaFX中用来实现动画的基本手段；
Timerline不同于javafx.async.Task, 后者是使用独立线程来支持的, 而前者是执行在EDT(事件派发线程/主线程)中的;
javafx中, 所谓动画, 其基本思路是就是一组基于时间的变量, 而这些变量又与程序中的其他部分(如UI中的属性等)相绑定(bind),
如此, 当变化开始或曰时间启动时(Timeline.play()), 动画就形成了. 整个概念简洁而富于抽象, 本人十分欣赏.

以下总结了Timeline的主要用法:

var slider1: Number;
Timeline {
    repeatCount: 1
    keyFrames: [
        KeyFrame {  //start point
            time: 0s
            canSkip: true
            values: [
                slider1 => 20.0
            ] 
        } 
        KeyFrame {  //end point
            time: 5s
            canSkip: true
            values: [
                slider1 => 100.0 tween Interpolator.LINEAR
            ] 
        } 
    ] //close keyFrames
}.play();  

Stage {...}

省略掉第一个keyFrame后的写法:

var slider1: Number  = 20;
Timeline {
    repeatCount: 1
    keyFrames: [
        /* end position of red rectangle and type of movement */
        KeyFrame {
            time: 5s
            canSkip: true
            values: [
                slider1 => 100.0 tween Interpolator.LINEAR
            ] //close values

        } // close KeyFrame

    ] //close keyFrames

}.play();

使用at表达式:

var slider1: Number  = 20;
Timeline {
  repeatCount: 1  
  keyFrames: [
  at (5s) {slider1 => 100.0 tween Interpolator.LINEAR} //end point only
  ]; 
}.play();

使用action域:

var t = Timeline {
    repeatCount: 1
    keyFrames: [
         KeyFrame { time:0s action: function(){ t1.t.playFromStart(); } },
         KeyFrame { time:1s action: function(){ t2.t.playFromStart(); } },
    ]
}

以下是自己做的一个基于Timeline的Timer部件

class myTimer {
...
    public-read var stCur : Integer = 0;
    var stActive : Boolean = false;
    var stHandler : function();
    def stageTimer = Timeline {
        repeatCount: Timeline.INDEFINITE
        autoReverse: false
        keyFrames: [
            KeyFrame {
                time: 1s
                action: stCallback
                }
            ]
        };

    //开始计时器
    //span: 计时器时间跨度(秒)
    public function stBegin(span:Integer) : Void {
        if(not stActive) {
            stCur = span;
            stActive = true;
            stageTimer.play();
        }
    }
    public function stStop() : Void {
        if(stActive) {
            stageTimer.stop();
            stActive = false;
            }
    }
    public function stSetHandler(f:function()) : Void {
        stHandler = f;
    }
    protected function stCallback() : Void {
        stCur--;
        if(stHandler!=null) {
            stHandler();
            }
    }
...
}

可以这样来使用

def _tm = myTimer {};
_tm.stSetHandler(function() {
    if(_tm.stCur<=0) {
        _tm.stStop();
        }
    });

此Timer的缺点是, 需要由调用者从外部停止！不知道那位大侠有兴趣帮助优化一下，改为可以自己终止最好。