JavaFXでCSSを使ってアニメーションを作成する方法は？

Question

スタイルクラスを変更してNodeのスタイルを変更したいと思います。

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

トランジションのように徐々にスタイルを変更できますか？

Answer 1

徐々にスタイルを変えることができますか？

はい。

クラスはCSSで定義された静的なものになるため、スタイルクラスではなくsetStyleを使用する必要があります。アニメーションのためのJavaFX CSSでは直接のサポートはありません。 CSSスタイルを変更するには、Javaコードのアニメーションステップを実行する必要があります。

簡単に利用できるJava APIがないため、このアプローチは、cssを使用して移行を実行する場合にのみ、実際にこの方法をお勧めします。

アニメーションを処理するには、標準のjavafxアニメーションTimelineを使用して、cssスタイルプロパティが依存するプロパティを操作できます。

たとえば、styleプロパティをstringにバインドします。その後、変更したいコンポーネント（この場合はcolorStringProperty）をタイムラインで変更します。ここ

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

が押されたときに灰色から赤へ、それの基本色の段階的な色遷移にCSSを使用して、ボタンを点滅サンプルです。

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は、トランジションをサポートしています。アニメーションを段階的に作成する必要はありません。 http://docs.oracle.com/javafx/2/animations/basics.htm#CJAJJAGI