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过渡进行平滑的弹跳动画？

1 个答案: