Animation 如何使用JavaFX转换平滑反弹动画？

我想做一个扩展圆动画。我将半径从17.5改为25，希望它的边在过渡结束前反弹一点。到目前为止，我只知道如何制作简单的线性动画：

class CircleTranslation extends Transition {

    protected Circle circle;
    protected double startRadius;
    protected double radiusDiff;

    public CircleTranslation(Circle circle, double newRadius, Duration duration) {
        setCycleDuration(duration);
        this.circle = circle;
        this.startRadius = circle.getRadius();
        this.radiusDiff = newRadius - startRadius;
    }

    @Override
    protected void interpolate(double fraction) {
        circle.setRadius( startRadius + ( radiusDiff * fraction ) );
    }
}

---

如何使用JavaFX制作反弹动画？我正在寻找一种类似弹性或反弹效果的东西。

你可以使用一个插值器，它使用几个二次函数来插值：

CircleTranslation transition = ...
Interpolator interpolator = new Interpolator() {

    /**
     * Calculate value of quadratic function with roots sx, ex and
     * maximum of maxVal at x=t.
     */
    private double val(double t, double sx, double ex, double maxVal) {
        double v = (t - sx) * (ex - t);
        double max = (ex - sx) / 2;
        return maxVal * v / (max * max);
    }

    @Override
    protected double curve(double t) {
        double x;
        if (t <= 0.37) {
            x = val(t, -0.37, 0.37, 1);
        } else if (t <= 0.73) {
            x = val(t, 0.37, 0.73, 0.25);
        } else if (t <= 0.91) {
            x = val(t, 0.73, 0.91, 0.08);
        } else {
            x = val(t, 0.91, 1, 0.03);
        }
        return 1 - x;
    }

};
transition.setInterpolator(interpolator);
...

CircletTranslation转换=。。。
插值器插值器=新插值器（）{
/**
*用根sx、ex和
*x=t时的最大值。
*/
专用双val（双t、双sx、双ex、双maxVal）{
双v=（t-sx）*（ex-t）；
双最大值=（ex-sx）/2；
返回maxVal*v/（max*max）；
}
@凌驾
保护双曲线（双t）{
双x；
如果（t，可以使用使用多个二次函数插值的插值器：

CircleTranslation transition = ...
Interpolator interpolator = new Interpolator() {

    /**
     * Calculate value of quadratic function with roots sx, ex and
     * maximum of maxVal at x=t.
     */
    private double val(double t, double sx, double ex, double maxVal) {
        double v = (t - sx) * (ex - t);
        double max = (ex - sx) / 2;
        return maxVal * v / (max * max);
    }

    @Override
    protected double curve(double t) {
        double x;
        if (t <= 0.37) {
            x = val(t, -0.37, 0.37, 1);
        } else if (t <= 0.73) {
            x = val(t, 0.37, 0.73, 0.25);
        } else if (t <= 0.91) {
            x = val(t, 0.73, 0.91, 0.08);
        } else {
            x = val(t, 0.91, 1, 0.03);
        }
        return 1 - x;
    }

};
transition.setInterpolator(interpolator);
...

CircletTranslation转换=。。。
插值器插值器=新插值器（）{
/**
*用根sx、ex和
*x=t时的最大值。
*/
专用双val（双t、双sx、双ex、双maxVal）{
双v=（t-sx）*（ex-t）；
双最大值=（ex-sx）/2；
返回maxVal*v/（max*max）；
}
@凌驾
保护双曲线（双t）{
双x；
如果（t）有什么地方我可以读到关于如何计算它的内容吗？它是有效的，但我只是想了解你是如何做到的，看起来非常复杂和复杂interesting@Alyona
f（x）=a*（x-r1）*（x-r2）
是假设有根的二次多项式的公式。由于曲线是对称的，因此
x=（r1+r2）/2
。利用这些事实，您可以提出
val
方法。
曲线
方法只是“将多条抛物线彼此相邻”实现与链接中的曲线相似的曲线。是否有任何地方我可以阅读关于如何计算它的内容？它是有效的，但我只是想了解你是如何做到的，看起来相当复杂和复杂interesting@Alyona
f（x）=a*（x-r1）*（x-r2）
是假定有根的二次多项式的公式。由于曲线是对称的，因此对于
x=（r1+r2）/2
，可以达到极值。利用这些事实，您可以提出
val
方法。
曲线
方法只是“将多条抛物线彼此相邻”以实现与链接中的曲线相似的曲线。