обновление фигуры в сцене с помощью цикла for с помощью javafx

Question

Ниже приведен фрагмент кода. Я обновляю прямоугольник, используя цикл for при нажатии кнопки. Это модель для моего конечного намерения показать визуализацию модели данных, поскольку она изменяется большое количество раз внутри цикла for. Это работает, но я вижу только одно изменение. Теперь, поскольку я изменяю ширину случайно, я должен увидеть большое количество изменений. Кажется, я делаю неправильное предположение в отношении чего-то простого.

Код идет ниже:

 7 var rec: Rectangle = Rectangle {

 8             x: 10, y: 10
 9             width: 140, height: 90
10             fill: Color.BLACK
11         }
12 
13 Stage {

14     title: "MyApp"
15     scene: Scene {
16         width: 200
17         height: 200
18         content: [

19             rec,
20             Button {
21                 text: "Button"
22                 action: function () {

23                     for (i in [1..999]) {
24                         rec.width = 25 + java.lang.Math.random()*50;
25                     }
26                 }

27             }
28         ]
29     }
30 }

Answer 1

Похоже, что изменения происходят так быстро, что обновления графика сцены не могут идти в ногу, и вы просто не видите их до последнего обновления.

Я бы предложил рефакторинг следующим образом, который дает вам немного больше контроля (вы можете обновлять частоту обновления по своему усмотрению, а также запускать и останавливать анимацию по своему усмотрению).

var rec: Rectangle = Rectangle {
             x: 10, y: 10
             width: 140, height: 90
             fill: Color.BLACK
         }


var timeline = Timeline {
    repeatCount: 20
    keyFrames : [
        KeyFrame {
            time : 100ms
            canSkip : true
            action: function(): Void {
                rec.width = 25 + java.lang.Math.random()*50;
            }
        }
    ]
}

Stage {
     title: "MyApp"
     scene: Scene {
         width: 200
         height: 200
         content: [
             rec,
             Button {
                 text: "Button"
                 action: function () {
                    timeline.playFromStart();
                 }
             }
         ]
     }
}