javafx-2 - JavaFX中的水2D波浪效果

Question

我如何在 JavaFX 中实现水 2D 波浪效果，我有图像并且想要当单击图像时，波浪(或更多)从那一点开始扩展，就像当我们将一块石头放入平静的水中时我们看到波浪一样扩大。

Answer 1

这是旧 Sun JavaFX 1 波纹发生器的部分转换为 JavaFX 2。



这不是最真实的水波纹效果，但也许足以让您开始创建自己的水波纹效果。您可以添加 DisplacementMap由于“波浪”而扭曲图像的效果。

该代码使用 JavaFX 动画时间线生成逐渐消失的扩大同心圆。

import javafx.animation.*;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.collections.*;
import javafx.event.*;
import javafx.scene.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.*;
import javafx.scene.shape.Circle;
import javafx.stage.*;
import javafx.util.Duration;

public class FishSim extends Application {
  private static final Paint SCENE_FILL = new RadialGradient(
    0, 0, 300, 300, 500, false, CycleMethod.NO_CYCLE, 
    FXCollections.observableArrayList(new Stop(0, Color.BLACK), new Stop(1, Color.BLUE))
  );

  @Override public void start(Stage stage) {
    final RippleGenerator rippler = new RippleGenerator();

    final Scene scene = new Scene(rippler, 600, 400, SCENE_FILL);

    scene.setOnMousePressed(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        rippler.setGeneratorCenterX(event.getSceneX());
        rippler.setGeneratorCenterY(event.getSceneY());
        rippler.createRipple();
        rippler.startGenerating();
      }
    });

    scene.setOnMouseDragged(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        rippler.setGeneratorCenterX(event.getSceneX());
        rippler.setGeneratorCenterY(event.getSceneY());
      }
    });

    scene.setOnMouseReleased(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        rippler.stopGenerating();
      }
    });

    stage.setTitle("Click, hold mouse button down and move around to create ripples");
    stage.setScene(scene);
    stage.setResizable(false);

    stage.show();
  }

  public static void main(String[] args) { launch(args); }
}

/**
 * Generates ripples on the screen every 0.5 seconds or whenever
 * the createRipple method is called. Ripples grow and fade out
 * over 3 seconds
 */
class RippleGenerator extends Group {
  private class Ripple extends Circle {
    Timeline animation = new Timeline(
      new KeyFrame(Duration.ZERO,       new KeyValue(radiusProperty(),  0)),
      new KeyFrame(Duration.seconds(1), new KeyValue(opacityProperty(), 1)),
      new KeyFrame(Duration.seconds(3), new KeyValue(radiusProperty(),  100)),
      new KeyFrame(Duration.seconds(3), new KeyValue(opacityProperty(), 0))
    );

    private Ripple(double centerX, double centerY) {
      super(centerX, centerY, 0, null);
      setStroke(Color.rgb(200, 200, 255));
    }
  }

  private double generatorCenterX = 100.0;
  private double generatorCenterY = 100.0;

  private Timeline generate = new Timeline(
      new KeyFrame(Duration.seconds(0.5), new EventHandler<ActionEvent>() {
        @Override public void handle(ActionEvent event) {
          createRipple();
        }
      }
    )
  );

  public RippleGenerator() {
    generate.setCycleCount(Timeline.INDEFINITE);
  }

  public void createRipple() {
    final Ripple ripple = new Ripple(generatorCenterX, generatorCenterY);
    getChildren().add(ripple);
    ripple.animation.play();

    Timeline remover = new Timeline(
      new KeyFrame(Duration.seconds(3), new EventHandler<ActionEvent>() {
        @Override public void handle(ActionEvent event) {
          getChildren().remove(ripple);
          ripple.animation.stop(); 
        }
      })  
    );
    remover.play();
  }

  public void startGenerating() {
    generate.play();
  }

  public void stopGenerating() {
    generate.stop();
  }

  public void setGeneratorCenterX(double generatorCenterX) {
    this.generatorCenterX = generatorCenterX;
  }

  public void setGeneratorCenterY(double generatorCenterY) {
    this.generatorCenterY = generatorCenterY;
  }
}

转换所基于的原始 JavaFX 1 鱼模拟器代码来自 a jfrog repository (如果您单击它，它可能不再存在)。

Robert Ladstätter 创建了一个 2D water effect sample animation用于 JavaFX 2(使用 Scala)。罗伯茨动画就像从侧面而不是从上面看水一样，但也许其中的一些概念可能对您有所帮助。