时间线 JavaFX

Question

如何在关键帧之间添加延迟？如果卡片不匹配，我希望用户在卡片关闭前能看到卡片正面 0.6 秒。这是代码 我试过底部的那个，但它不起作用。

KeyFrame start = new KeyFrame(
            Duration.ZERO,
            new KeyValue(imageView.scaleXProperty(), 1.0));
    KeyFrame middle = new KeyFrame(
            Duration.millis(150),
            e -> imageView.setImage(image),
            new KeyValue(imageView.scaleXProperty(), 0.0)
    );
    KeyFrame end = new KeyFrame(
            Duration.millis(300),
            new KeyValue(imageView.scaleXProperty(), 1.0));
    new Timeline(start, middle, end).play();



KeyFrame start = new KeyFrame(
            Duration.ZERO,
            new KeyValue(imageView.scaleXProperty(), 1.0));
    KeyFrame middle = new KeyFrame(
            Duration.millis(150),
            e -> imageView.setImage(image),
            new KeyValue(imageView.scaleXProperty(), 0.0)
    );
    KeyFrame delay = new KeyFrame(
            Duration.millis(600)
    );
    KeyFrame end = new KeyFrame(
            Duration.millis(300),
            new KeyValue(imageView.scaleXProperty(), 1.0));
    new Timeline(start, middle,delay, end).play();

Answer 1

注意：以下假设卡片“缩小”和“缩小”。考虑到您在问题中使用Duration.ZERO，我不确定这实际上是您想要的。如果您希望卡片立即弹出，请删除缩小动画；只需显示卡片然后开始动画（PauseTransition 是顺序设置中的第一个）。

---

使用SequentialTranition、PauseTransition 和ScaleTransition 对您有利。例如：

ScaleTransition start = new ScaleTransition(Duration.millis(150));
start.setToX(1.0);

// plays after 'start' finishes
PauseTransition middle = new PauseTransition(Duration.millis(600));

// plays after 'middle' finishes
ScaleTransition end = new ScaleTransition(Duration.millis(300));
end.setToX(0.0);

// only set the node on the SequentialTransition
SequentialTransition animation = new SequentialTransition(imageView, start, middle, end);

如果您希望比例转换具有相同的持续时间，则可以将上述简化为：

ScaleTransition scale = new ScaleTransition(Duration.millis(150));
scale.setFromX(0.0);
scale.setToX(1.0);

// Set to half the desired time because of the auto-reverse configured below
PauseTransition pause = new PauseTransition(Duration.millis(300));

// Plays 'scale' forwards, followed by 'pause', then plays 'pause' backwards
// followed by `scale`. That's why 'pause' has its duration set to half the full
// desired duration (it's played forwards then immediately backwards for a total
// of 600 ms).
SequentialTransition animation = new SequentialAnimation(imageView, scale, pause);
animation.setAutoReverse(true);
animation.setCycleCount(2);