如何使用 JavaFX 过渡制作平滑的弹跳动画？

Question

我想做一个展开的圆形动画。我将半径从 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 制作弹跳动画？我正在寻找类似于 Greensock Visualizer.

的弹性或弹跳效果的东西

Answer 1

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

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);
...

如何使用 JavaFX 过渡制作平滑的弹跳动画？

How to do smooth bouncing animation using JavaFX transitions?

animation

transition

javafx