Чтение между строк — упрощенный синтаксис анимации сценариев JavaFX

Как упоминалось в первом посте Tetris , синтаксис анимации JavaFX Script подвергается упрощению. Сегодня я хотел бы показать вам очень простой пример этого упрощенного синтаксиса. Как показано на скриншоте ниже, этот пример состоит из линии, которая движется вперед и назад, как метроном:

Когда вы нажмете кнопку « Пуск» , верхняя часть линии переместится с одной стороны на другую за одну секунду, а затем вернется на свое начальное место за одну секунду, повторяя это бесконечно. При нажатии кнопки « Пауза» анимация приостанавливается, а при нажатии кнопки « Возобновить» возобновляется приостановленная анимация. Нажатие кнопки « Стоп» останавливает анимацию, требуя ее повторного запуска. Взгляните на код для этого примера, чтобы увидеть синтаксис и функции, связанные с анимацией:

/*
 *  AnimationExample.fx
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */

import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.animation.*;

class MetronomeModel {
  public attribute x2Val = 100;
  public attribute anim =
    Timeline {
      autoReverse: true
      keyFrames: [
        KeyFrame {
          time: 0s
          values: x2Val => 100
        },
        KeyFrame {
          time: 1s
          values: x2Val => 300 tween Interpolator.LINEAR 
        }
      ]
      repeatCount: Timeline.INDEFINITE
    };
}

Frame {
  var metroModel = 
    MetronomeModel {}
  title: "Animation Example"
  width: 400
  height: 500
  visible: true
  content:
    BorderPanel {
      center:
        Canvas {
          content:
            Line {
              x1: 200
              y1: 400
              x2: bind metroModel.x2Val
              y2: 100
              strokeWidth: 5
              stroke: Color.BLUE
            }
        }
      bottom:
        FlowPanel {
          content: [
            Button {
              text: "Start"
              action:
                function():Void {
                  metroModel.anim.start();
                }
            },
            Button {
              text: "Pause"
              action:
                function():Void {
                  metroModel.anim.pause();
                }
            },
            Button {
              text: "Resume"
              action:
                function():Void {
                  metroModel.anim.resume();
                }
            },
            Button {
              text: "Stop"
              action:
                function():Void {
                  metroModel.anim.stop();
                }
            }
          ]
        }
    }
}

Понятия, связанные с анимацией в этом примере

Класс Timeline позволяет вам сформулировать «ключевые кадры», которые будут в анимации. Вы можете иметь столько, сколько вам нужно, но в этом простом случае у нас их два:

• Один ключевой кадр, который появляется в начале анимации. Обратите внимание на использование нового литерального синтаксиса для длительностей, в данном случае 0 с , что означает 0 секунд.  100 мс будет 100 миллисекунд, а 3 м будет 3 минуты.
• Один ключевой кадр, который появляется через 1 секунду после запуска анимации.

AutoReverse атрибут позволяет указать , что анимация должна выполняться в обратном , когда он достигает последний ключевой кадр . RepeatCount атрибут позволяет контролировать , сколько раз анимация будет работать, в этом случае, на неопределенный срок.