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

费率的定义

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

想想这样的速度(由Ghostbusters的Louis Tully提供):

我看到你在锻炼身体.我也是.我录了"20分钟锻炼"并高速播放,所以只用了十分钟就得到了很好的锻炼.

速率就像录像机上的快进,慢动作或倒带功能.

速度的定义

我不想设定持续时间.我只想让两个矩形以相同的速度移动.

速度是一段时间的距离.

如果您希望矩形以相同的速度移动,请使它们在相同的持续时间内移动相同的距离.

您的示例代码存在问题

如果您没有设置持续时间,将为您分配一个.默认持续时间为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像素,与第一个矩形的速度相匹配.