Question

我正在开发一个JavaFX应用程序，它包含很少的html，css，JS文件，这些文件由内部webkit浏览器呈现。现在，问题是我们在JavaFX提供的webkit浏览器中没有得到平滑渲染的CSS动画，但Firefox或chrome中的相同代码相当平滑。

此外，没有持久性可用（目前在Java中使用变量，并通过JS进行持久性通信）。

我正在寻找的是有任何方法来集成一些无头浏览器，或一些设置，使CSS动画更顺畅。我遇到的只有JxBrowser，但它的 toooooo 对个人使用来说代价高昂。

代码：

public class Main extends Application {

    private Scene scene;
    MyBrowser myBrowser;

    String completeText = "";

    @Override
    public void start(Stage primaryStage) throws Exception{
        primaryStage.setTitle("Frontend");
        java.net.CookieManager manager = new java.net.CookieManager();
        java.net.CookieHandler.setDefault(manager);

        myBrowser = new MyBrowser();
        scene = new Scene(myBrowser, 1080, 1920);

        primaryStage.setScene(scene);
        primaryStage.setFullScreen(true);
        primaryStage.show();

        // @ being the escape character
        scene.setOnKeyTyped(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {
                String text = event.getCharacter();
                if (text.equals("0")) {
                    String tempText = completeText;
                    completeText = "";
                    processText(tempText);
                }else {
                    completeText = completeText+text;
                }
            }
        });
    }
}

MyBrowser：

public class MyBrowser extends Region {

public MyBrowser() {
        webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue == Worker.State.SUCCEEDED) {
                JSObject window = (JSObject) webEngine.executeScript("window");
                window.setMember("app", this);
            }
        });




        URL urlHello = getClass().getResource(hellohtml);

        webEngine.load(urlHello.toExternalForm());
        webView.setPrefSize(1080, 1920);
        webView.setContextMenuEnabled(false);
        getChildren().add(webView);
    }

包含动画的CSS代码：

#ball-container.go #ball{
-webkit-animation: rotating-inverse 2s ease-out 0s 1 normal;
animation: rotating-inverse 2s ease-out 0s 1 normal;
}


#ball-container {
height: 102px;
width: 102px;
position: absolute;
top: -95px;
left: 480px;
-webkit-transition: all 0.9s ease-in-out 0s;
transition: all 0.9s ease-in-out 0s;
}



#ball-container.shake .ball-wrapper{
-webkit-animation: yAxis 0.9s ease-in-out;
animation: yAxis 0.9s ease-in-out;
}

谢谢。

Answer 1

尝试使用Java 8u112，根据您的代码我创建了一个工作示例（使用Java JDK 8u112 64位测试）：

import javafx.application.Application;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class Example extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }

    class MyBrowser extends Parent
    {
        private WebEngine   webEngine;
        private WebView webView;

        public MyBrowser()
        {
            webView = new WebView();
            webEngine = webView.getEngine();

            // Ugly (but easy to share) HTML content 
            String pageContents = 
                    "<html>"
                        + "<head>"
                            + "<style>"
                                + "@-webkit-keyframes mymove {"
                                    + "from {top: 0px;}"
                                    + "to {top: 50px;}"
                                + "}"
                                + ".box { "
                                    + "width: 150px; "
                                    + "position: relative; "
                                    + "height: 150px; "
                                    + "background: red; "
                                    + "margin-top: 35px; "
                                    + "margin-left: auto; "
                                    + "margin-right: auto; "
                                    + "-webkit-transition: background-color 2s ease-out;  "
                                    + "-webkit-transition: all 1s ease-in-out; "
                                + "}"
                                +".box:hover {"
                                    +" background-color: green;"
                                    + "width:350px;"
                                    + "-webkit-animation: mymove 1s infinite;"
                                +"}"        
                            + "</style>"
                        + "</head>"
                        + "<body>"
                            + "<div class='box'></div>"
                        + "</body>"
                    + "</html>";

            webEngine.loadContent(pageContents);
            webView.setContextMenuEnabled(false);
            getChildren().add(webView);
        }
    }

    private Scene   scene;
    MyBrowser       myBrowser;

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        primaryStage.setTitle("Frontend");
        myBrowser = new MyBrowser();
        scene = new Scene(myBrowser);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

我怀疑这是因为他们现在正在使用更新的webkit JDK-8156698，但它之前可能是一个bug（您可以查看8u112 bug fixes列表。

Answer 2

我有同样的问题使用webview渲染基于角度的Web应用程序。并通过将Java版本升级到1.8.0_121来修复它。

JavaFX：使用JavaFX嵌入除可用webview之外的浏览器

2 个答案: