为了在JavaFX中的ImageView上进行过渡 [英] In order transition on ImageView in JavaFX

问题描述

我已经看过 但是如何等待过渡到Javafx 2.1中结束?但这并不能完全解决我的问题.

I have already looked at How to wait for a transition to end in javafx 2.1? but it doesn't quite solve my problem.

我有一个ImageView对象列表，我想遍历此列表，并对列表的每个幻灯片"执行以下操作:

I have a List of ImageView objects, and I want to iterate through this List and perform the following actions on each 'slide' of the List:

1. 淡入
2. 停留几秒钟
3. 淡出

我有以下代码，但是由于过渡是异步的，因此循环同时将过渡应用于所有幻灯片":

I have the following code in place but since the transition is asynchronous, the loop applies the transition to all the 'slides' at the same time:

// The method I am running in my class

public void start() {

    for (ImageView slide : slides) {

        SequentialTransition sequentialTransition = new SequentialTransition();

        FadeTransition fadeIn = Transition.getFadeTransition(slide, 0.0, 1.0, 2000);
        FadeTransition stayOn = Transition.getFadeTransition(slide, 1.0, 1.0, 2000);
        FadeTransition fadeOut = Transition.getFadeTransition(slide, 1.0, 0.0, 2000);

        sequentialTransition.getChildren().addAll(fadeIn, stayOn, fadeOut);               
        this.root.getChildren().add(slide);            
        sequentialTransition.play();

    }
}

// the method in the Transition helper class:

public static FadeTransition getFadeTransition(ImageView imageView, double fromValue, double toValue, int durationInMilliseconds) {

    FadeTransition ft = new FadeTransition(Duration.millis(durationInMilliseconds), imageView);
    ft.setFromValue(fromValue);
    ft.setToValue(toValue);

    return ft;

}

关于如何如何对这些ImageView对象列表进行动画制作的任何想法(无论List上有多少ImageView，所以我都不想对其进行硬编码).谢谢.

Any ideas on how I can animate these List of ImageView objects one by one (irrespective of the number of ImageViews there are on the List, so I do not want to hard code it). Thanks.

推荐答案

因此，显而易见的解决方案是为您的SequentialTransitions使用周围的SequentialTransition，以便顺序播放这些过渡，而不是一次全部播放:

So, the obivous fix to this would be to use a surrounding SequentialTransition for your SequentialTransitions that plays those Transitions, well, sequentially instead of all at once:

public void start() {

    SequentialTransition slideshow = new SequentialTransition();

    for (ImageView slide : slides) {

        SequentialTransition sequentialTransition = new SequentialTransition();

        FadeTransition fadeIn = Transition.getFadeTransition(slide, 0.0, 1.0, 2000);
        FadeTransition stayOn = Transition.getFadeTransition(slide, 1.0, 1.0, 2000);
        FadeTransition fadeOut = Transition.getFadeTransition(slide, 1.0, 0.0, 2000);

        sequentialTransition.getChildren().addAll(fadeIn, stayOn, fadeOut);               
        this.root.getChildren().add(slide);            
        slideshow.getChildren().add(sequentialTransition);

    }
    slideshow.play();
}

第二，您应该使用PauseTransition而不是从1.0插入到1.0的FadeTransition.

Second, you should use PauseTransition instead of a FadeTransition that interpolates from 1.0 to 1.0.

完整的示例应用程序如下所示:

A full example application of this could look like this:

package slideshow;

import javafx.animation.FadeTransition;
import javafx.animation.PauseTransition;
import javafx.animation.SequentialTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class SimpleSlideShowTest extends Application{

  class SimpleSlideShow {

    StackPane root = new StackPane();
    ImageView[] slides;

    public SimpleSlideShow() {
      this.slides = new ImageView[4];
      Image image1 = new Image(SlideShowTest.class.getResource("pic1").toExternalForm());
      Image image2 = new Image(SlideShowTest.class.getResource("pic2").toExternalForm());
      Image image3 = new Image(SlideShowTest.class.getResource("pic3").toExternalForm());
      Image image4 = new Image(SlideShowTest.class.getResource("pic4").toExternalForm());
      slides[0] = new ImageView(image1);
      slides[1] = new ImageView(image2);
      slides[2] = new ImageView(image3);
      slides[3] = new ImageView(image4);

    }

    public StackPane getRoot() {
      return root;
    }

    // The method I am running in my class

    public void start() {

      SequentialTransition slideshow = new SequentialTransition();

      for (ImageView slide : slides) {

        SequentialTransition sequentialTransition = new SequentialTransition();

        FadeTransition fadeIn = getFadeTransition(slide, 0.0, 1.0, 2000);
        PauseTransition stayOn = new PauseTransition(Duration.millis(2000));
        FadeTransition fadeOut = getFadeTransition(slide, 1.0, 0.0, 2000);

        sequentialTransition.getChildren().addAll(fadeIn, stayOn, fadeOut);
        slide.setOpacity(0);
        this.root.getChildren().add(slide);
        slideshow.getChildren().add(sequentialTransition);

      }
      slideshow.play();
    }

// the method in the Transition helper class:

    public FadeTransition getFadeTransition(ImageView imageView, double fromValue, double toValue, int durationInMilliseconds) {

      FadeTransition ft = new FadeTransition(Duration.millis(durationInMilliseconds), imageView);
      ft.setFromValue(fromValue);
      ft.setToValue(toValue);

      return ft;

    }
  }

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

  @Override
  public void start(Stage primaryStage) throws Exception {
    SimpleSlideShow simpleSlideShow = new SimpleSlideShow();
    Scene scene = new Scene(simpleSlideShow.getRoot());
    primaryStage.setScene(scene);
    primaryStage.show();
    simpleSlideShow.start();
  }
}

这篇关于为了在JavaFX中的ImageView上进行过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！