Per la transizione su ImageView in JavaFX

Question

Ho già visto How to wait for a transition to end in javafx 2.1? ma non risolve il mio problema.

Ho una lista di oggetti ImageView, e voglio scorrere questa lista e effettuare le seguenti operazioni su ogni 'slide' del listino:

1. fade in
2. soggiorno per alcuni secondi
3. fade out

ho il seguente codice nel posto ma poiché la transizione è asincrona, il ciclo applica la transizione a tutte le diapositive '' allo stesso tempo:

// 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; 

} 

Tutte le idee su come posso animare questi Elenco dei ImageView oggetti uno ad uno (indipendentemente dal numero di ImageViews ci sono sulla lista, in modo da non voglio il codice difficile). Grazie.

Answer 1

Quindi, la correzione obivous a questo sarebbe quella di utilizzare un SequentialTransition circostante per le SequentialTransitions che svolge queste transizioni, beh, in sequenza, invece di tutti in una volta:

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(); 
} 

In secondo luogo, è necessario utilizzare PauseTransition invece di una FadeTransition che interpola da 1.0 a 1.0.

Un'applicazione esempio di questo potrebbe essere la seguente:

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(); 
    } 
}