компонент пользовательского интерфейса javafx FadeTransition не работает правильно - PullRequest
0 голосов
/ 17 февраля 2019

Переход Fade не работает правильно

Я создал новый компонент пользовательского интерфейса javafx и добавил FadeTransition, но, к сожалению, переход Fade не работает.Когда я вошел, цвет фона JFXButton изменился, но переход затухания не работает.Как я могу это исправить?

Вот мой код

Класс запуска

public class Main extends Application {

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

@Override
public void start(Stage primaryStage) throws Exception {
    AnimationButton animationButton = new AnimationButton();
    Scene scene = new Scene(animationButton);
    scene.getStylesheets().add(getClass().getResource("btn.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.setTitle("Custom Control");
    primaryStage.setWidth(300);
    primaryStage.setHeight(200);
    primaryStage.show();
}

AnimationButton.java

public class AnimationButton extends AnchorPane{

    private Duration fadeDuration = Duration.millis(1000);
    private FadeTransition fadeTransition;

    @FXML
    private JFXButton animationButton;

    public AnimationButton() {


        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("AnimationButton.fxml"));
        fxmlLoader.setRoot(new AnchorPane());
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }

        animationButton.getStyleClass().add("animation-button");
        fadeDuration = new Duration(3000);
        fadeTransition = new FadeTransition(fadeDuration, animationButton);
        fadeTransition.setAutoReverse(true);
        fadeTransition.setFromValue(0);
        fadeTransition.setToValue(1);

    }

    @FXML
    public void mouseEntered(MouseEvent event) {
        fadeTransition.setCycleCount(1); // this way autoreverse wouldn't kick
        fadeTransition.playFromStart();
    }

    @FXML
    public void mouseExited(MouseEvent event) {

        fadeTransition.setCycleCount(2); // starting from autoreverse
        fadeTransition.playFrom(fadeDuration);
    }
    ...
}

Здесь мой fxml файл

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import javafx.scene.layout.*?>
<fx:root type="AnchorPane" xmlns="http://javafx.com/javafx/8.0.112" 
    xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <JFXButton text="Enjoy it!" id="animationButton" onMouseEntered="#mouseEntered" onMouseExited="#mouseExited"/>
    </children>
</fx:root>

1 Ответ

0 голосов
/ 17 февраля 2019

Не совсем понятно, что из-за того, что ваш текущий код не работает, но я предполагаю следующее:

  1. Вы хотите, чтобы ваша кнопка появлялась, когда мышь входила и исчезалакогда мышь выходит из режима.
  2. Функция затухания работает не так, как вам хочется
    • Пробуя что-то похожее на ваши настройки, я заметил, что узел не исчезнет, ​​если мышь завершит работу до завершения анимации.

Проблема

При попытке изменить анимацию вы изменяете свойство cycleCount.Это свойство не влияет на направление воспроизведения, а скорее на то, сколько циклов воспроизводит анимация перед остановкой:

Определяет количество циклов в этой анимации.cycleCount может быть INDEFINITE для анимаций, которые повторяются бесконечно, но в противном случае должно быть > 0.

Невозможно изменить cycleCount работающего Animation.Если значение cycleCount изменяется для работающего Animation, анимация должна быть остановлена ​​и запущена снова, чтобы подобрать новое значение.

Вы комбинируете настройку cycleCount с настройкой autoReverse до true в надежде на то, что анимация перевернется, когда вы установите cycleCount в 2.Свойство autoReverse:

Определяет, меняет ли это Animation направление на чередующиеся циклы.Если true, Animation будет продолжаться вперед в первом цикле, затем переворачивается во втором цикле и так далее.В противном случае анимация будет повторяться так, что каждый цикл будет продолжаться с самого начала.Невозможно изменить флаг autoReverse работающего Animation.Если значение autoReverse изменяется для работающего Animation, анимация должна быть остановлена ​​и запущена снова, чтобы подобрать новое значение.

Эта установка может работать несколько, особенно сиспользование playFromStart() и playFrom(fadeDuration), но это неправильный способ сделать то, что вы хотите.


Решение

То, что вы хотите, это изменить rate свойство в зависимости от того, вошла или нет мышь.Свойство rate:

Определяет направление / скорость, с которой ожидается воспроизведение Animation.

Абсолютное значение rate указывает скорость, с которойAnimation должен быть воспроизведен, а знак rate указывает направление.Положительное значение rate указывает на воспроизведение в прямом направлении, отрицательное значение указывает на воспроизведение в обратном направлении и 0.0 для остановки воспроизведения Animation.

Rate 1.0 - нормальное воспроизведение, 2.0 is 2 time normal,-1.0` назад и т. Д.

Обращение rate бега Animation заставит Animation изменить направление на место и воспроизвести часть уже Animation, которая ужепрошло.

Вот небольшой пример.Он использует Button вместо JFXButton, потому что мне не хотелось тянуть зависимость.Кроме того, он использует свойство hover, но функционально эквивалентен использованию обработчиков, введенных мышью / обработчиком мыши.

import javafx.animation.FadeTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click me!");
        button.setOnAction(event -> {
            event.consume();
            System.out.println("Button clicked!");
        });

        installAnimation(button);

        primaryStage.setScene(new Scene(new StackPane(button), 300.0, 150.0));
        primaryStage.setTitle("Animation Example");
        primaryStage.show();
    }

    private void installAnimation(Button button) {
        FadeTransition transition = new FadeTransition(Duration.millis(250.0), button);
        transition.setFromValue(0.2);
        transition.setToValue(1.0);

        button.hoverProperty().addListener((obs, wasHover, isHover) -> {
            transition.setRate(isHover ? 1.0 : -1.0);
            transition.play();
        });
        button.setOpacity(transition.getFromValue());
    }

}

Обратите внимание на следующее:

  • * rateустанавливается на 1.0, когда мышь находится на зависании (введено), и -1.0, когда мышь не наведена (отсутствует).
  • autoReverseфлаг остается false.
  • cycleCount сохраняется на 1.
  • Я звоню play(), а не playFromStart() или playFrom(Duration).Это важно, потому что play:

    Воспроизведение Animation из текущей позиции в направлении, указанном rate.Если Animation работает, это не имеет никакого эффекта.

    Когда ставка > 0 (прямое воспроизведение), если Animation уже находится в конце, первый цикл не будет воспроизведен, онсчитается уже законченным.Это также относится к обратному (rate < 0) циклу, если Animation расположен в начале.Однако, если Animation имеет cycleCount > 1, следующие циклы будут воспроизводиться как обычно.

    Когда Animation достигает конца, Animation останавливается, и игровая головка остается наконец.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...