在JavaFX中将圆形更改为正方形以填充正方形
在JavaFX中将圆形更改为正方形以填充正方形
提问于 2020-03-30 23:50:14
我发现了一个令人惊叹的动画，其中有一个从圆形/椭圆过渡到正方形的动画，就在动画结束之前，正方形稍微突出了一点，然后将自己调整回正确的大小。
来源：https://clementmihailescu.github.io/Pathfinding-Visualizer/#
我试图重新创建它，但我无法获得从一滴墨水到正方形的过渡效果。
package sample;
import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.Lighting;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Text;
import javafx.util.Duration;
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
Pane root = new Pane();
Rectangle originalRectangle = new Rectangle(100,100);
originalRectangle.setFill(Color.WHITE);
originalRectangle.setStroke(Color.BLUE);
Rectangle substituteRectangle = new Rectangle(25,25,50,50);
substituteRectangle.setOpacity(0.0);
substituteRectangle.setFill(Color.TURQUOISE);
substituteRectangle.setStroke(Color.TURQUOISE);
Rectangle yellowRectangle = new Rectangle(100,100);
yellowRectangle.setFill(Color.YELLOW);
root.getChildren().addAll(originalRectangle,substituteRectangle,yellowRectangle);
FadeTransition fadeOutTransition = new FadeTransition(Duration.millis(3000),yellowRectangle); //Make the duration as 1ms to get the instant
fadeOutTransition.setFromValue(1.0);
fadeOutTransition.setToValue(0.0);
FadeTransition fadeInTransition = new FadeTransition(Duration.millis(1),substituteRectangle);
fadeInTransition.setFromValue(0.0);
fadeInTransition.setToValue(0.8);
//To make the square protrute out a bit
ScaleTransition scaleTransition = new ScaleTransition(Duration.seconds(4),substituteRectangle);
scaleTransition.setToX(2.1);
scaleTransition.setToY(2.1);
ParallelTransition parallelTransition = new ParallelTransition(scaleTransition,fadeInTransition);
fadeOutTransition.play();
fadeOutTransition.setOnFinished(e -> {
parallelTransition.setOnFinished(event -> {
root.getChildren().removeAll(substituteRectangle,yellowRectangle);
originalRectangle.setOpacity(1.0);
originalRectangle.setFill(Color.RED);
});
parallelTransition.play();
});
Scene scene = new Scene(root,800,600);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-31 00:18:48
实现这种动画的最简单方法可能是简单地设置圆的半径动画，并使用Rectangle作为剪辑来约束它的大小。此外，Timeline通常会提供非常适合替换多个过渡的动画。在这种情况下，它允许颜色之间的动画以及DoubleProperty的动画，这使得它成为简化动画的一个很好的选择：
@Override
public void start(Stage primaryStage) throws Exception {
Pane root = new Pane();
Rectangle bounds = new Rectangle(50, 50, 100, 100);
Circle circle = new Circle(bounds.getX() + 0.5 * bounds.getWidth(), bounds.getY() + 0.5 * bounds.getHeight(),
0);
circle.setClip(bounds);
root.getChildren().add(circle);
Timeline animation = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(circle.fillProperty(), Color.BLUE),
new KeyValue(circle.radiusProperty(), 0d)),
new KeyFrame(Duration.seconds(5), new KeyValue(circle.fillProperty(), Color.RED), new KeyValue(
circle.radiusProperty(), 0.5 * Math.hypot(bounds.getWidth(), bounds.getHeight())))); // at the end of the animation the circle should reach the corners -> diameter = diagonale of rect
root.setOnMouseClicked(evt -> animation.playFromStart());
Scene scene = new Scene(root, 800, 600);
primaryStage.setScene(scene);
primaryStage.show();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60934346
复制相关文章
相似问题
腾讯云开发者
