Статьи

JavaFX 2 Animation: переходы пути

Одним из самых ярких аспектов JavaFX 2 является поддержка анимации . Проницательное создание переходов и анимации временной шкалы в JavaFX охватывает использование как переходов, так и временных шкал в JavaFX 2. В этом сообщении в блоге я приведу пример, приведенный в этом руководстве, для конкретной демонстрации переходов путей.

Пример 2 («Переход пути»), показанный в разделе « Создание переходов и анимации временной шкалы в JavaFX», демонстрирует создание пути с классами из пакета «фигур» JavaFX 2: javafx.scene.shape.Path , javafx.scene.shape.MoveTo и javafx. .scene.shape.CubicCurve . Затем в этом примере демонстрируется создание экземпляра javafx.animation.PathTransition и применение созданного экземпляра javafx.scene.shape.Rectangle для перемещения по созданному пути.

В приведенном ниже листинге кода я внес небольшие изменения в пример 2 в разделе «Создание переходов и анимация временной шкалы в JavaFX» . Я специально изменил движущуюся фигуру с прямоугольника на Круг , добавил две «концевые ручки» к траектории в виде двух отдельных кругов и добавил возможность изменять непрозрачность пути вместе с движениями анимированного круга. Приятным побочным эффектом использования нулевой непрозрачности является то, что сам путь не появляется, а выглядит так, будто круг движется свободно. Я попытался разбить каждый основной фрагмент этого на свой собственный частный метод, чтобы было легче увидеть «куски» функциональности.

JavaFxAnimations.java

package dustin.examples;

import java.util.List;
import javafx.animation.PathTransition;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 * Simple example demonstrating JavaFX animations.
 * 
 * Slightly adapted from Example 2 ("Path Transition") which is provided in
 * "Creating Transitions and Timeline Animation in JavaFX"
 * (http://docs.oracle.com/javafx/2.0/animations/jfxpub-animations.htm).
 * 
 * @author Dustin
 */
public class JavaFxAnimations extends Application
{
   /**
    * Generate Path upon which animation will occur.
    * 
    * @param pathOpacity The opacity of the path representation.
    * @return Generated path.
    */
   private Path generateCurvyPath(final double pathOpacity)
   {
      final Path path = new Path();
      path.getElements().add(new MoveTo(20,20));
      path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120));
      path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240));
      path.setOpacity(pathOpacity);
      return path;
   }

   /**
    * Generate the path transition.
    * 
    * @param shape Shape to travel along path.
    * @param path Path to be traveled upon.
    * @return PathTransition.
    */
   private PathTransition generatePathTransition(final Shape shape, final Path path)
   {
      final PathTransition pathTransition = new PathTransition();
      pathTransition.setDuration(Duration.seconds(8.0));
      pathTransition.setDelay(Duration.seconds(2.0));
      pathTransition.setPath(path);
      pathTransition.setNode(shape);
      pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
      pathTransition.setCycleCount(Timeline.INDEFINITE);
      pathTransition.setAutoReverse(true);
      return pathTransition;
   }

   /**
    * Determine the path's opacity based on command-line argument if supplied
    * or zero by default if no numeric value provided.
    * 
    * @return Opacity to use for path.
    */
   private double determinePathOpacity()
   {
      final Parameters params = getParameters();
      final List<String> parameters = params.getRaw();
      double pathOpacity = 0.0;
      if (!parameters.isEmpty())
      {
         try
         {
            pathOpacity = Double.valueOf(parameters.get(0));
         }
         catch (NumberFormatException nfe)
         {
            pathOpacity = 0.0;
         }
      }
      return pathOpacity;
   }

   /**
    * Apply animation, the subject of this class.
    * 
    * @param group Group to which animation is applied.
    */
   private void applyAnimation(final Group group)
   {
      final Circle circle = new Circle(20, 20, 15);
      circle.setFill(Color.DARKRED);
      final Path path = generateCurvyPath(determinePathOpacity());
      group.getChildren().add(path);
      group.getChildren().add(circle);
      group.getChildren().add(new Circle(20, 20, 5));
      group.getChildren().add(new Circle(380, 240, 5));
      final PathTransition transition = generatePathTransition(circle, path);
      transition.play(); 
   }

   /**
    * Start the JavaFX application
    * 
    * @param stage Primary stage.
    * @throws Exception Exception thrown during application.
    */
   @Override
   public void start(final Stage stage) throws Exception
   {
      final Group rootGroup = new Group();
      final Scene scene = new Scene(rootGroup, 600, 400, Color.GHOSTWHITE);
      stage.setScene(scene);
      stage.setTitle("JavaFX 2 Animations");
      stage.show();
      applyAnimation(rootGroup);
   }

   /**
    * Main function for running JavaFX application.
    * 
    * @param arguments Command-line arguments; optional first argument is the
    *    opacity of the path to be displayed (0 effectively renders path
    *    invisible).
    */
   public static void main(final String[] arguments)
   {
      Application.launch(arguments);
   }
}

В следующей серии снимков экрана показан этот простой пример анимации JavaFX в действии. Они перечислены в порядке убывания непрозрачности (от 1,0 до 0,0).

Демонстрация примера адаптированного PathTransition (Opacity 1.0)

Демонстрация примера адаптированного PathTransition (непрозрачность 0,2)

Демонстрация примера адаптированного PathTransition (непрозрачность 0,05)

Демонстрация Адаптированного Примера PathTransition (Непрозрачность 0.0)

Каждый из приведенных выше снимков экрана был сделан после запуска приложения с указанным аргументом командной строки (1, 0,2, 0,05 и 0).

Этот адаптированный пример продемонстрировал использование PathTransition для анимации движения узла по заданному пути (я уже писал в блоге об использовании Path и некоторых его альтернатив ). Разработчики могут реализовать свои собственные производные от Transition, а также поддерживаются другие поставляемые переходы (такие как FadeTransition , ParallelTransition и SequentialTransition ).

Это простой процесс, чтобы быстро начать применять анимацию JavaFX 2, используя предоставленные классы Transition.

 

От http://marxsoftware.blogspot.com/2012/02/javafx-2-animation-path-transitions.html