Come creare un'animazione con i CSS in JavaFX?

Question

Voglio cambiare lo stile di Node cambiando la sua classe di stile.

Button button = new Button(); 
button.getStyleClass().add("class1") 
button.setOnMouseClicked(new EventHandler<MouseEvent>() { 
     @Override 
     public void handle(MouseEvent mouseEvent) { 
      button.getStyleClass().add("class2"); 
     } 
    }); 

È possibile modificare lo stile gradualmente, per fare qualcosa come una transizione?

Answer 1

È possibile modificare gradualmente lo stile, ad esempio effettuare una transizione?

Sì.

Sarà necessario utilizzare setStyle anziché le classi di stile perché le classi diventeranno oggetti statici definiti in un css. Non esiste un supporto diretto in css JavaFX per l'animazione. È necessario eseguire i passaggi dell'animazione nel codice Java per modificare lo stile css.

Consiglio davvero questo approccio quando si desidera utilizzare css per eseguire la transizione poiché non sono disponibili API Java corrispondenti.

Per gestire l'animazione, è possibile utilizzare l'animazione javafx standard Timeline per modificare le proprietà da cui dipende la proprietà di stile css.

Ad esempio, associare la proprietà dello stile alla stringa. Quindi modificare il componente che si desidera modificare (in questo caso colorStringProperty) in una timeline.

warningButton.styleProperty().bind(
    new SimpleStringProperty("-fx-base: ") 
     .concat(colorStringProperty) 
     .concat(";") 
     .concat("-fx-font-size: 20px;") 
); 

Ecco un esempio che lampeggia un pulsante usando css con una transizione graduale colore di esso è colore di base dal grigio al rosso quando viene premuto.

import javafx.animation.*; 
import javafx.application.Application; 
import javafx.beans.property.*; 
import javafx.beans.value.*; 
import javafx.event.*; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.image.*; 
import javafx.scene.layout.StackPane; 
import javafx.scene.paint.Color; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

/** Shows how you can modify css styles dynamically using a timeline. */ 
public class Warning extends Application { 

    private static final String BACKGROUND = "http://bobgreiner.tripod.com/1cc2ce10.jpg"; 

    @Override 
    public void start(Stage stage) throws Exception{ 
     final ObjectProperty<Color> warningColor = new SimpleObjectProperty<>(Color.GRAY); 
     final StringProperty colorStringProperty = createWarningColorStringProperty(warningColor); 

     StackPane layout = new StackPane(); 
     layout.getChildren().addAll(
       new ImageView(new Image(BACKGROUND)), 
       createWarningButton(
         warningColor, 
         colorStringProperty 
       ) 
     ); 
     stage.setScene(new Scene(layout)); 
     stage.show(); 
    } 

    private StringProperty createWarningColorStringProperty(final ObjectProperty<Color> warningColor) { 
     final StringProperty colorStringProperty = new SimpleStringProperty(); 
     setColorStringFromColor(colorStringProperty, warningColor); 
     warningColor.addListener(new ChangeListener<Color>() { 
      @Override 
      public void changed(ObservableValue<? extends Color> observableValue, Color oldColor, Color newColor) { 
       setColorStringFromColor(colorStringProperty, warningColor); 
      } 
     }); 

     return colorStringProperty; 
    } 

    private Button createWarningButton(final ObjectProperty<Color> warningColor, StringProperty colorStringProperty) { 
     final Button warningButton = new Button("Warning! Warning!"); 
     warningButton.styleProperty().bind(
       new SimpleStringProperty("-fx-base: ") 
         .concat(colorStringProperty) 
         .concat(";") 
         .concat("-fx-font-size: 20px;") 
     ); 

     warningButton.setOnAction(new EventHandler<ActionEvent>() { 
      @Override 
      public void handle(ActionEvent actionEvent) { 
       Timeline flash = new Timeline(
        new KeyFrame(Duration.seconds(0), new KeyValue(warningColor, Color.GRAY, Interpolator.LINEAR)), 
        new KeyFrame(Duration.seconds(0.25), new KeyValue(warningColor, Color.GRAY, Interpolator.LINEAR)), 
        new KeyFrame(Duration.seconds(1), new KeyValue(warningColor, Color.RED, Interpolator.LINEAR)), 
        new KeyFrame(Duration.seconds(1.25), new KeyValue(warningColor, Color.RED, Interpolator.LINEAR)) 
       ); 
       flash.setCycleCount(6); 
       flash.setAutoReverse(true); 
       flash.play(); 
      } 
     }); 

     return warningButton; 
    } 

    private void setColorStringFromColor(StringProperty colorStringProperty, ObjectProperty<Color> color) { 
     colorStringProperty.set(
       "rgba(" 
         + ((int) (color.get().getRed() * 255)) + "," 
         + ((int) (color.get().getGreen() * 255)) + "," 
         + ((int) (color.get().getBlue() * 255)) + "," 
         + color.get().getOpacity() + 
       ")" 
     ); 
    } 

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

Answer 2

JavaFX2 supporta transizioni. Quindi non hai bisogno di fare la tua animazione passo dopo passo.

Date un'occhiata a questo: http://docs.oracle.com/javafx/2/animations/basics.htm#CJAJJAGI