如何用JavaFX过渡实现平滑弹跳动画（含圆形扩展案例）

嘿，这个需求我太熟了！要实现你说的类似Greensock的Elastic或Bounce效果，JavaFX本身就提供了现成的工具，也可以自定义更贴合你需求的动画曲线。咱们一步步来解决：

方法一：用JavaFX内置的插值器（最快最方便） #

JavaFX的Interpolator类已经内置了专门的弹跳和弹性插值器，直接用就行，不用自己写复杂的数学公式。

步骤1：修改你的自定义Transition #

你原来的自定义CircleTranslation只需要做一点小改动：在interpolate方法里，用设置好的插值器处理fraction值，而不是直接用线性的fraction。修改后的代码如下：

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;
        // 默认可以先设置一个插值器，或者在外部设置
        setInterpolator(new BounceInterpolator());
    }

    @Override
    protected void interpolate(double fraction) {
        // 用插值器处理fraction，得到带有弹跳/弹性效果的进度值
        double interpolatedFraction = getInterpolator().interpolate(fraction);
        circle.setRadius(startRadius + radiusDiff * interpolatedFraction);
    }
}

步骤2：选择合适的内置插值器 #

JavaFX提供了两种核心的插值器满足你的需求：

• BounceInterpolator：模拟物体落地后的弹跳效果，会在接近目标值时多次小幅反弹。你可以直接用默认的，也可以通过构造函数自定义弹跳的衰减系数（比如new BounceInterpolator(0.3)，值越小弹跳衰减越快）。
• ElasticInterpolator：模拟弹性拉伸的效果，动画会先超过目标半径，再回弹到最终值。常用的预设是ElasticInterpolator.EASE_OUT，也可以自定义振荡次数和弹性系数，比如ElasticInterpolator.create(3, 0.5)（第一个参数是振荡次数，第二个是弹性强度）。

步骤3：启动动画 #

创建并启动动画的代码示例：

Circle circle = new Circle(17.5);
// 弹跳效果
CircleTranslation bounceAnim = new CircleTranslation(circle, 25, Duration.seconds(1.2));
bounceAnim.setInterpolator(new BounceInterpolator());
bounceAnim.play();

// 或者弹性效果
// CircleTranslation elasticAnim = new CircleTranslation(circle, 25, Duration.seconds(1.2));
// elasticAnim.setInterpolator(ElasticInterpolator.EASE_OUT);
// elasticAnim.play();

方法二：更简单的替代方案——用ScaleTransition #

如果你不需要直接修改radius属性，而是只需要视觉上的缩放效果，JavaFX的ScaleTransition可以更快捷地实现同样的动画：

Circle circle = new Circle(17.5);
ScaleTransition scaleAnim = new ScaleTransition(Duration.seconds(1.2), circle);
// 计算缩放比例：目标半径/初始半径
double scaleRatio = 25 / 17.5;
scaleAnim.setToX(scaleRatio);
scaleAnim.setToY(scaleRatio);
scaleAnim.setInterpolator(new BounceInterpolator());
scaleAnim.play();

方法三：自定义插值器（追求极致个性化） #

如果内置的插值器不符合你的预期，你可以自己实现Interpolator接口，定义完全自定义的动画曲线。比如模拟GSAP的Elastic效果的自定义插值器：

public class CustomElasticInterpolator extends Interpolator {
    // 振荡次数
    private final double oscillations;
    // 弹性强度（值越小弹性越明显）
    private final double springiness;

    public CustomElasticInterpolator(double oscillations, double springiness) {
        this.oscillations = oscillations;
        this.springiness = springiness;
    }

    @Override
    protected double curve(double t) {
        // t是0到1的线性进度，这里反转后计算弹性曲线
        t = 1 - t;
        return 1 - Math.pow(springiness, t) * Math.cos(2 * Math.PI * oscillations * t);
    }
}

使用这个自定义插值器的方式和内置的一样：

bounceAnim.setInterpolator(new CustomElasticInterpolator(3, 0.4));

这样就能得到完全符合你预期的弹性动画效果啦！

内容的提问来源于stack exchange，提问作者Alyona