如何执行顺序动画

huangapple go评论155阅读模式
英文:

How to perform sequential animation

问题

I'll provide translations for the code and some context:

  1. 我正在使用JavaFX创建一个基本的动画我有5个矩形排成一行还有两个圆圈一个是红色的一个是蓝色的红色圆圈位于第一个矩形上蓝色圆圈位于第五个矩形上
  1. 我想要实现的想法是如果我点击第一个矩形我希望红色圆圈通过平移移动到第五个矩形通过翻译),一旦到达那里位于第五个矩形上的蓝色圆圈将移动到第一个矩形上换句话说它们交换位置
  1. 我在我的逻辑中使用了AnimationTimer但问题是当按下鼠标事件发生时两个圆圈的动画是同步的这不是我想要的我希望蓝色圆圈的动画在红色圆圈的动画完成后开始我想了解为什么会发生这种情况是否涉及多个线程如果是这样当我运行程序时红色圆圈会在中间卡住而蓝色圆圈会移出边界并隐藏但是如果我注释掉一个圆圈的位置更新代码update方法),应用程序将以正确的方式运行希望能得到解答非常感谢
  1. **另一个问题是**如何使我的动画看起来更流畅因为它会停顿一小会然后再继续移动

If you have specific questions about parts of the code or need further explanations, feel free to ask.

英文:

I'm creating a basic animation with javaFX, I have 5 rectangles in a row, I have two cirlces, red and blue. The red cricle is set on the first rectangle and the blue one is set on the fifth rectangle.
The idea is: If I click the first rectangle I want the red circle to travel to the fifth rectangle (by a translation) and once it gets there the blue rectangle (which is on the fifth rectangle) travels to the first one, in another word they exchange positions. I used the AnimationTimer class in my logic but the porblem is that the animation of both cirlces is synchronized when the pressedMouse event happens and that's not what I want, what I want is that the animation of the blue circle starts once the red circle's one is finished. I want to understand why is that happening? Is it kinda multiple thread? In case it is, when I run the program the red circle gets stuck in the middle however the blue one travels out of the bounds and hides, however if I comment one of the cirlce's position code for update (the update method) the app runs correctly, I hope I get an answer and I'm so thankful.

Another question is: How to make my animation looks smoother because it stops for a fraction of a second and moves again.

here is my code:

  1. import javafx.animation.AnimationTimer;
  2. import javafx.application.Application;
  3. import javafx.event.EventHandler;
  4. import javafx.scene.Scene;
  5. import javafx.scene.input.MouseEvent;
  6. import javafx.scene.layout.AnchorPane;
  7. import javafx.scene.paint.Color;
  8. import javafx.scene.paint.Paint;
  9. import javafx.scene.shape.Circle;
  10. import javafx.stage.Stage;
  11. public class animation extends Application {
  12. AnchorPane root = new AnchorPane();
  13. //create a matrix from rectangle class to stock 5 rectangle objects
  14. rectangle rect [] = new rectangle [5];
  15. //isMoving gets the true value when the animation starts
  16. private boolean isMoving = false;
  17. private int traveledDistance = 30;
  18. @Override
  19. public void start(Stage primaryStage) {
  20. //add 5 rectangles on the anchorpane
  21. //rect[0], rect[2] and rect[4] have BURLYWOOD color
  22. //rect[1], rect[3] have DARKBLUE color
  23. for(int i = 0; i<5; i++)
  24. {
  25. if(i%2 == 0)
  26. {
  27. rect[i] = new rectangle();
  28. rect[i].setFill(Color.BURLYWOOD);
  29. }
  30. else
  31. {
  32. rect[i] = new rectangle();
  33. rect[i].setFill(Color.DARKBLUE);
  34. }
  35. //set all 5 rectangles as empty
  36. rect[i].setRectEmpty(true);
  37. //set all the 5 rectangles one after the other along the x axis
  38. rect[i].setTranslateX(i*60);
  39. //add the 5 rectangles to the parent
  40. root.getChildren().add(rect[i]);
  41. }
  42. //instantiation of two circles (c and d) from cirlce class
  43. circle c = new circle(Color.RED);
  44. c.setName("redCircle");
  45. circle d = new circle(Color.BLUE);
  46. d.setName("blueCircle");
  47. //set the position of the red circle centered relatively to rect[0]
  48. //rect[0] is no longer empty as it contains the red circle
  49. c.setTranslateX(30);
  50. c.setTranslateY(30);
  51. rect[0].setCircle(c);
  52. rect[0].setCircleName(c.getName());
  53. rect[0].setRectEmpty(false);
  54. root.getChildren().add(c);
  55. //set the position of the blue circle centered relatively to rect[4]
  56. d.setTranslateX(4*60 +30);
  57. d.setTranslateY(30);
  58. rect[4].setCircle(d);
  59. rect[4].setCircleName(d.getName());
  60. root.getChildren().add(d);
  61. displayedScene(primaryStage);
  62. //when the parent is clicked
  63. root.setOnMousePressed(new EventHandler<MouseEvent>(){
  64. @Override
  65. public void handle(MouseEvent event) {
  66. //get the index of the clicked rectangle
  67. int index = (int) event.getX()/60;
  68. //if the clicked rectangle contains the red circle inside
  69. if(!rect[index].isRectEmpty() && rect[index].getCircleName().equals("redCircle"))
  70. {
  71. Circle circle = rect[index].getCircle();
  72. //update the postion of the red circle so that it occupies the last rectangle (rect[4])
  73. update(index,5, circle);
  74. //update the position of the blue circle so that it occupies the first rectangle(rect[0])
  75. update(5,0, rect[4].getCircle());
  76. }
  77. }
  78. });
  79. }
  80. //update method uses the AnimationTimer class
  81. public void update(int initialPos, int lastPos, Circle circle)
  82. {
  83. AnimationTimer timer = new AnimationTimer() {
  84. @Override
  85. public void handle(long now) {
  86. updateCirclePosition(initialPos, lastPos, circle);
  87. if(!isMoving)
  88. {
  89. this.stop();
  90. }
  91. }
  92. };
  93. timer.start();
  94. }
  95. public void updateCirclePosition(int initialPos, int lastPos, Circle circle)
  96. {
  97. int dx = 2;
  98. if(initialPos>lastPos)
  99. {
  100. dx = -1*dx;
  101. }
  102. isMoving = true;
  103. int distance = Math.abs((lastPos - initialPos)*60);
  104. if(traveledDistance<distance-30)
  105. {
  106. circle.setTranslateX(circle.getTranslateX() + dx);
  107. traveledDistance +=Math.abs(dx);
  108. }
  109. else{
  110. isMoving = false;
  111. traveledDistance = 30;
  112. }
  113. }
  114. //load the Stage
  115. public void displayedScene(Stage primaryStage)
  116. {
  117. Scene scene = new Scene(root, 300, 60);
  118. primaryStage.setScene(scene);
  119. primaryStage.show();
  120. }
  121. public static void main(String[] args) {
  122. launch(args);
  123. }
  124. // circle class extends Circle
  125. public class circle extends Circle
  126. {
  127. private String name;
  128. public circle(Paint color) {
  129. super(30, color);
  130. }
  131. public String getName() {
  132. return name;
  133. }
  134. public void setName(String name) {
  135. this.name = name;
  136. }
  137. }
  138. }

And here is rectangle class:

  1. import javafx.scene.shape.Circle;
  2. import javafx.scene.shape.Rectangle;
  3. //rectangle class extends Rectangle
  4. public class rectangle extends Rectangle {
  5. private Circle circle;
  6. private String circleName;
  7. private boolean rectEmpty;
  8. public rectangle() {
  9. super(60, 60);
  10. }
  11. public Circle getCircle() {
  12. return circle;
  13. }
  14. public void setCircle(Circle circle) {
  15. this.circle = circle;
  16. }
  17. public boolean isRectEmpty() {
  18. return rectEmpty;
  19. }
  20. public void setRectEmpty(boolean rectEmpty) {
  21. this.rectEmpty = rectEmpty;
  22. }
  23. public String getCircleName() {
  24. return circleName;
  25. }
  26. public void setCircleName(String circleName) {
  27. this.circleName = circleName;
  28. }
  29. }

如何执行顺序动画

答案1

得分: 1

以下是演示所请求功能的MRE(最小可重现示例):

  1. 以下是通过`animateCircles()`执行的圆圈动画它使用`TranslateTransition`来将一个圆从一个位置平移到另一个位置
  2. [setOnFinished](https://docs.oracle.com/javase/8/javafx/api/javafx/animation/Animation.html#setOnFinished-javafx.event.EventHandler-) 用于启动下一个动画。
  3. import javafx.animation.TranslateTransition;
  4. import javafx.application.Application;
  5. import javafx.geometry.Bounds;
  6. import javafx.geometry.Point2D;
  7. import javafx.scene.Scene;
  8. import javafx.scene.layout.Pane;
  9. import javafx.scene.paint.Color;
  10. import javafx.scene.shape.Circle;
  11. import javafx.scene.shape.Rectangle;
  12. import javafx.stage.Stage;
  13. import javafx.util.Duration;
  14. public class Animation extends Application {
  15. private static final double SQUARE_SIZE = 60, RADIUS = SQUARE_SIZE /2, ANIMATION_TIME = 1;
  16. private final Pane root = new Pane();
  17. private final Rectangle rect [] = new Rectangle [5];
  18. private final Circle circles [] = new Circle[2];
  19. private boolean isMoving = false, isSwapped = false;
  20. @Override
  21. public void start(Stage primaryStage) {
  22. for(int i = 0; i<rect.length; i++) {
  23. rect[i] = new Rectangle(SQUARE_SIZE, SQUARE_SIZE, i%2 == 0 ? Color.BURLYWOOD : Color.DARKBLUE);
  24. //将5个矩形依次设置在x轴上
  25. rect[i].setTranslateX(i*SQUARE_SIZE);
  26. root.getChildren().add(rect[i]);
  27. }
  28. circles[0] = new Circle(RADIUS,Color.RED);
  29. circles[1] = new Circle(RADIUS,Color.BLUE);
  30. //将红色圆圈的位置设置为位于rect[0]的中心
  31. Point2D center = centerOf(rect[0]);
  32. circles[0].setTranslateX(center.getX());
  33. circles[0].setTranslateY(center.getY());
  34. //将蓝色圆圈的位置设置为位于rect[4]的中心
  35. center = centerOf(rect[4]);
  36. circles[1].setTranslateX(center.getX());
  37. circles[1].setTranslateY(center.getY());
  38. root.getChildren().add(circles[0]);
  39. root.getChildren().add( circles[1]);
  40. Scene scene = new Scene(root, SQUARE_SIZE*rect.length, SQUARE_SIZE);
  41. primaryStage.setScene(scene);
  42. primaryStage.show();
  43. root.setOnMousePressed(event -> animateCircles());
  44. }
  45. //返回矩形的中心点
  46. private Point2D centerOf(Rectangle rect) {
  47. Bounds bounds = rect.getBoundsInParent();
  48. double x = bounds.getMinX() + 0.5 * bounds.getWidth();
  49. double y = bounds.getMinY() + 0.5 * bounds.getHeight();
  50. return new Point2D(x, y);
  51. }
  52. private void animateCircles() {
  53. if(isMoving) return;
  54. TranslateTransition translateCircle0 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[0]);
  55. translateCircle0.setToX( isSwapped ? centerOf(rect[0]).getX() : centerOf(rect[4]).getX());
  56. TranslateTransition translateCircle1 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[1]);
  57. translateCircle1.setToX( isSwapped ? centerOf(rect[4]).getX() : centerOf(rect[0]).getX());
  58. translateCircle0.setOnFinished(e -> {
  59. translateCircle1.play();
  60. });
  61. translateCircle1.setOnFinished(e -> {
  62. isMoving = false;
  63. isSwapped = ! isSwapped;
  64. });
  65. isMoving = true;
  66. translateCircle0.play();
  67. }
  68. public static void main(String[] args) {
  69. launch(args);
  70. }
  71. }

或者,您可以使用SequentialTransition实现animateCircles()

  1. private void animateCircles() {
  2. if(isMoving) return;
  3. TranslateTransition translateCircle0 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[0]);
  4. translateCircle0.setToX( isSwapped ? centerOf(rect[0]).getX() : centerOf(rect[4]).getX());
  5. TranslateTransition translateCircle1 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[1]);
  6. translateCircle1.setToX( isSwapped ? centerOf(rect[4]).getX() : centerOf(rect[0]).getX());
  7. SequentialTransition sequentialTransition = new SequentialTransition(translateCircle0, translateCircle1);
  8. isMoving = true;
  9. sequentialTransition.play();
  10. sequentialTransition.setOnFinished(e -> {
  11. isMoving = false;
  12. isSwapped = ! isSwapped;
  13. });
  14. }
英文:

The following is an mre demonstrating the requested functionality.<br/>
Circles animation is done by animateCircles(). It uses TranslateTransition to translate a circle from one position to the other.<br/>
setOnFinished is used to start the next animation.<br/>

  1. import javafx.animation.TranslateTransition;
  2. import javafx.application.Application;
  3. import javafx.geometry.Bounds;
  4. import javafx.geometry.Point2D;
  5. import javafx.scene.Scene;
  6. import javafx.scene.layout.Pane;
  7. import javafx.scene.paint.Color;
  8. import javafx.scene.shape.Circle;
  9. import javafx.scene.shape.Rectangle;
  10. import javafx.stage.Stage;
  11. import javafx.util.Duration;
  12. public class Animation extends Application {
  13. private static final double SQUARE_SIZE = 60, RADIUS = SQUARE_SIZE /2, ANIMATION_TIME = 1;
  14. private final Pane root = new Pane();
  15. private final Rectangle rect [] = new Rectangle [5];
  16. private final Circle circles [] = new Circle[2];
  17. private boolean isMoving = false, isSwapped = false;
  18. @Override
  19. public void start(Stage primaryStage) {
  20. for(int i = 0; i&lt;rect.length; i++) {
  21. rect[i] = new Rectangle(SQUARE_SIZE, SQUARE_SIZE, i%2 == 0 ? Color.BURLYWOOD : Color.DARKBLUE);
  22. //set all the 5 rectangles one after the other along the x axis
  23. rect[i].setTranslateX(i*SQUARE_SIZE);
  24. root.getChildren().add(rect[i]);
  25. }
  26. circles[0] = new Circle(RADIUS,Color.RED);
  27. circles[1] = new Circle(RADIUS,Color.BLUE);
  28. //set the position of the red circle centered to rect[0]
  29. Point2D center = centerOf(rect[0]);
  30. circles[0].setTranslateX(center.getX());
  31. circles[0].setTranslateY(center.getY());
  32. //set the position of the blue circle centered to rect[4]
  33. center = centerOf(rect[4]);
  34. circles[1].setTranslateX(center.getX());
  35. circles[1].setTranslateY(center.getY());
  36. root.getChildren().add(circles[0]);
  37. root.getChildren().add( circles[1]);
  38. Scene scene = new Scene(root, SQUARE_SIZE*rect.length, SQUARE_SIZE);
  39. primaryStage.setScene(scene);
  40. primaryStage.show();
  41. root.setOnMousePressed(event -&gt; animateCircles());
  42. }
  43. //return the center point
  44. private Point2D centerOf(Rectangle rect) {
  45. Bounds bounds = rect.getBoundsInParent();
  46. double x = bounds.getMinX() + 0.5 * bounds.getWidth();
  47. double y = bounds.getMinY() + 0.5 * bounds.getHeight();
  48. return new Point2D(x, y);
  49. }
  50. private void animateCircles() {
  51. if(isMoving) return;
  52. TranslateTransition translateCircle0 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[0]);
  53. translateCircle0.setToX( isSwapped ? centerOf(rect[0]).getX() : centerOf(rect[4]).getX());
  54. TranslateTransition translateCircle1 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[1]);
  55. translateCircle1.setToX( isSwapped ? centerOf(rect[4]).getX() : centerOf(rect[0]).getX());
  56. translateCircle0.setOnFinished(e-&gt; {
  57. translateCircle1.play();
  58. });
  59. translateCircle1.setOnFinished(e-&gt; {
  60. isMoving = false;
  61. isSwapped = ! isSwapped;
  62. });
  63. isMoving = true;
  64. translateCircle0.play();
  65. }
  66. public static void main(String[] args) {
  67. launch(args);
  68. }
  69. }

Alternatively you could implement animateCircles() using SequentialTransition:

  1. private void animateCircles() {
  2. if(isMoving) return;
  3. TranslateTransition translateCircle0 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[0]);
  4. translateCircle0.setToX( isSwapped ? centerOf(rect[0]).getX() : centerOf(rect[4]).getX());
  5. TranslateTransition translateCircle1 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[1]);
  6. translateCircle1.setToX( isSwapped ? centerOf(rect[4]).getX() : centerOf(rect[0]).getX());
  7. SequentialTransition sequentialTransition = new SequentialTransition(translateCircle0, translateCircle1);
  8. isMoving = true;
  9. sequentialTransition.play();
  10. sequentialTransition.setOnFinished(e-&gt; {
  11. isMoving = false;
  12. isSwapped = ! isSwapped;
  13. });
  14. }

huangapple
  • 本文由 发表于 2020年7月22日 22:44:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/63036971.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定