animation - JavaFX Animation 类的 'rate' 属性如何表现？

Question

我有两个处于平移过渡的矩形形状，如下所示

    //First rectangle animation
    TranslateTransition translateTransition1 = new TranslateTransition();
    translateTransition1.setNode(rect1);
    translateTransition1.setFromX(10);
    translateTransition1.setFromY(0);
    translateTransition1.setToX(10);
    translateTransition1.setToY(300);
    translateTransition1.setCycleCount(8);
    //translateTransition.setAutoReverse(true);
    translateTransition1.play();
    translateTransition1.setRate(0.1);

    //Second rectangle animation
    TranslateTransition translateTransition2 = new TranslateTransition();
    translateTransition2.setNode(rect2);
    translateTransition2.setFromX(10);
    translateTransition2.setFromY(-300);  // This is the only difference
    translateTransition2.setToX(10);
    translateTransition2.setToY(300);
    translateTransition2.setCycleCount(8);
    //translateTransition.setAutoReverse(true);
    translateTransition2.play();
    translateTransition2.setRate(0.1);

这里这两个动画的速率为 (0.1)，但当我运行应用程序时它们以不同的速度移动。

• 根据oracle文档，'rate'属性定义了动画的速度/方向，那么为什么即使我将其设置为0.1，两个TranslateTranslations的速度也不相同？
• “rate”属性的实际行为如何？

Answer 1

费率的定义

速率不是转换中转换的对象的速率或速度(以像素每秒为单位)。

考虑这样的速率(由《捉鬼敢死队》中的路易斯·塔利提供):

I see you were exercising. So was I. I taped '20 Minute Workout' and played it back at high speed so it only took ten minutes and I got a really good workout.

速率就像录像机上的快进、慢动作或快退功能。

速度的定义

I don't want to set duration. I just want the two rectangle to move at same speed.

速度是距离随时间的变化。

如果您希望矩形以相同的速度移动，请让它们在相同的时间内移动相同的距离。

示例代码存在问题

如果您未设置持续时间，系统会为您分配一个持续时间。默认持续时间为 400 毫秒，这可能不是您想要的。

您问题中的矩形以不同的速度移动，因为您要求它们在同一时间跨度内移动不同的距离。

示例

好的，您现在可能已经明白了，但这里有一个示例，以防万一。

TranslateTransition translateTransition1 = new TranslateTransition(
  Duration.seconds(1), rect1
);
translateTransition1.setFromX(0);
translateTransition1.setToX(100);
translateTransition1.setInterpolator(Interpolator.LINEAR);
translateTransition1.play();

TranslateTransition translateTransition2 = new TranslateTransition(
  Duration.seconds(2), rect2
);
translateTransition2.setFromX(0);
translateTransition2.setToX(100);
translateTransition2.setInterpolator(Interpolator.LINEAR);
translateTransition2.play();

rect2.setTranslateY(200);

所以有两个矩形:

• rect1 一秒钟移动的总距离为 100 像素，因此其移动速度为每秒 100 像素。
• rect2 在两秒内总共移动了 100 像素的距离，因此其移动速度为每秒 50 像素。

使用线性插值器，以便以恒定速度进行转换(例如，给定的矩形在移动时不会加速或减速)。

如果您希望两个矩形以相同的速度移动，您可以将第二个过渡的持续时间设置为一秒，以便它与第一个过渡的持续时间匹配(它们移动的距离已经匹配)。

或者，如果您调用 translateTransition2.setRate(2)，第二个动画的播放速度将加快一倍，从而在其持续时间的一半内完成。这将使行进速度加倍，从每秒 50 像素增加到每秒 100 像素，与第一个矩形的速度相匹配。