xxhdpi Android javafxports 应用程序上的动画“重影”

Question

我编写了一个小型 javafx 应用程序，该应用程序使一个正方形从左上角移动到右下角。然后它反转动画并连续运行。在我的像素 4 (xxhdpi) 上，正方形在回程中留下了一条边线。这不会发生在我的 Nexus 7 2013 (xhdpi) 或我的桌面上。

尝试了 gluon 插件和 gluon-vm 插件。

似乎与屏幕像素密度有关。 . .您如何防止密集屏幕上的重影伪影？图片和代码如下。

Pixel 4 截图：

Nexus 2013 屏幕截图：

应用程序：

public class StockJavaFx extends Application {
    @Override
    public void start(Stage primaryStage) {
        Dimension2D dimension = Services.get(DisplayService.class)
                .map(DisplayService::getDefaultDimensions)
                .orElseThrow(() -> new NullPointerException("DisplayService"));

        Rectangle rectangle = new Rectangle(75, 75);

        Pane container = new Pane();
        container.getChildren().add(new Rectangle(dimension.getWidth(), dimension.getHeight(), Color.DARKSLATEGRAY));
        container.getChildren().add(rectangle);

        Scene scene = new Scene(container);

        primaryStage.setScene(scene);

        TranslateTransition tt = new TranslateTransition(Duration.millis(750), rectangle);
        tt.setFromX(0);
        tt.setToX(dimension.getWidth() - 75);
        tt.setFromY(0);
        tt.setToY(dimension.getHeight() - 75);
        tt.setCycleCount(Animation.INDEFINITE);
        tt.setAutoReverse(true);

        FillTransition ft = new FillTransition(Duration.millis(750), rectangle);
        ft.setFromValue(Color.ORANGERED);
        ft.setToValue(Color.CADETBLUE);
        ft.setCycleCount(Animation.INDEFINITE);
        ft.setAutoReverse(true);

        tt.play();
        ft.play();

        primaryStage.show();
    }
}

Answer 1

旧 Gluon jfxmobile 插件或多或少是 EOL，它正在被新的 Gluon 客户端插件所取代。更多详情请见here 和here。详细文档可以查看here。

您可以通过这种方式尝试创建一个能够解决“重影”问题的 Android 应用，并带来一些额外的“小”好处，例如使用 Java 和 JavaFX 11+、GraalVM，并获得性能更高的应用。 请注意，Android 客户端插件仍在大量开发中，尚未准备好投入生产。

在开始之前，请检查您是否遵循先决条件here：

• 使用 Linux 机器
• 下载并提取 GraalVM 的 this version。

• 将GRAALVM_HOME环境变量设置为GraalVM安装目录，如：

  export GRAALVM_HOME=/opt/graalvm-svm-linux-20.1.0-ea+28
  

• 使用Java 11，或设置export JAVA_HOME=$GRAALVM_HOME

您可以修改现有示例之一，例如HelloGluon。

您可以修改 pom 以使用最新版本，例如：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.gluonhq.hello</groupId>
    <artifactId>hellogluon</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>hellogluon</name>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.release>11</maven.compiler.release>
        <javafx.version>14.0.1</javafx.version>
        <attach.version>4.0.7</attach.version>
        <client.plugin.version>0.1.22</client.plugin.version>
        <mainClassName>com.gluonhq.hello.HelloGluon</mainClassName>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-controls</artifactId>
            <version>${javafx.version}</version>
        </dependency>
        <dependency>
            <groupId>com.gluonhq</groupId>
            <artifactId>charm-glisten</artifactId>
            <version>6.0.4</version>
        </dependency>
        <dependency>
            <groupId>com.gluonhq.attach</groupId>
            <artifactId>display</artifactId>
            <version>${attach.version}</version>
        </dependency>
        <dependency>
            <groupId>com.gluonhq.attach</groupId>
            <artifactId>lifecycle</artifactId>
            <version>${attach.version}</version>
        </dependency>
        <dependency>
            <groupId>com.gluonhq.attach</groupId>
            <artifactId>statusbar</artifactId>
            <version>${attach.version}</version>
        </dependency>
        <dependency>
            <groupId>com.gluonhq.attach</groupId>
            <artifactId>storage</artifactId>
            <version>${attach.version}</version>
        </dependency>
        <dependency>
            <groupId>com.gluonhq.attach</groupId>
            <artifactId>util</artifactId>
            <version>${attach.version}</version>
        </dependency>
    </dependencies>

    <repositories>
        <repository>
            <id>Gluon</id>
            <url>https://nexus.gluonhq.com/nexus/content/repositories/releases</url>
        </repository>
    </repositories>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <release>${maven.compiler.release}</release>
                </configuration>
            </plugin>

            <plugin>
                <groupId>org.openjfx</groupId>
                <artifactId>javafx-maven-plugin</artifactId>
                <version>0.0.4</version>
                <configuration>
                    <mainClass>${mainClassName}</mainClass>
                </configuration>
            </plugin>

            <plugin>
                <groupId>com.gluonhq</groupId>
                <artifactId>client-maven-plugin</artifactId>
                <version>${client.plugin.version}</version>
                <configuration>
                    <target>${client.target}</target>
                    <attachList>
                        <list>display</list>
                        <list>lifecycle</list>
                        <list>statusbar</list>
                        <list>storage</list>
                    </attachList>
                    <mainClass>${mainClassName}</mainClass>
                </configuration>
            </plugin>
        </plugins>

    <profiles>
        <profile>
            <id>desktop</id>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
            <properties>
                <client.target>host</client.target>
            </properties>
            <dependencies>
                <dependency>
                    <groupId>com.gluonhq.attach</groupId>
                    <artifactId>display</artifactId>
                    <version>${attach.version}</version>
                    <classifier>desktop</classifier>
                    <scope>runtime</scope>
                </dependency>
                <dependency>
                    <groupId>com.gluonhq.attach</groupId>
                    <artifactId>lifecycle</artifactId>
                    <version>${attach.version}</version>
                    <classifier>desktop</classifier>
                    <scope>runtime</scope>
                </dependency>
                <dependency>
                    <groupId>com.gluonhq.attach</groupId>
                    <artifactId>storage</artifactId>
                    <version>${attach.version}</version>
                    <classifier>desktop</classifier>
                    <scope>runtime</scope>
                </dependency>
            </dependencies>
        </profile>
        <profile>
            <id>ios</id>
            <properties>
                <client.target>ios</client.target>
            </properties>
        </profile>
        <profile>
            <id>android</id>
            <properties>
                <client.target>android</client.target>
            </properties>
        </profile>
    </profiles>
    </build>
</project>

现在您可以修改主视图以添加您的过渡：

public class HelloGluon extends MobileApplication {

    @Override
    public void init() {
        addViewFactory(HOME_VIEW, () -> {
            Rectangle rectangle = new Rectangle(75, 75, Color.DARKSLATEGRAY);
            Pane container = new Pane(rectangle);
            container.setStyle("-fx-background-color: darkslategray");

            return new View(container) {
                @Override
                protected void updateAppBar(AppBar appBar) {
                    appBar.setNavIcon(MaterialDesignIcon.MENU.button(e -> System.out.println("Menu")));
                    appBar.setTitleText("Gluon Mobile");
                    appBar.getActionItems().add(MaterialDesignIcon.PLAY_ARROW.button(e -> {
                        TranslateTransition tt = new TranslateTransition(Duration.millis(750), rectangle);
                        tt.setFromX(0);
                        tt.setToX(getWidth() - 75);
                        tt.setFromY(0);
                        tt.setToY(getHeight() - 75);
                        tt.setCycleCount(Animation.INDEFINITE);
                        tt.setAutoReverse(true);

                        FillTransition ft = new FillTransition(Duration.millis(750), rectangle);
                        ft.setFromValue(Color.ORANGERED);
                        ft.setToValue(Color.CADETBLUE);
                        ft.setCycleCount(Animation.INDEFINITE);
                        ft.setAutoReverse(true);
                        tt.play();
                        ft.play();
                    }));
                }
            };
        });
    }

    @Override
    public void postInit(Scene scene) {
        Swatch.TEAL.assignTo(scene);
        scene.getStylesheets().add(HelloGluon.class.getResource("styles.css").toExternalForm());

        if (Platform.isDesktop()) {
            Dimension2D dimension2D = DisplayService.create()
                    .map(DisplayService::getDefaultDimensions)
                    .orElse(new Dimension2D(640, 480));
            scene.getWindow().setWidth(dimension2D.getWidth());
            scene.getWindow().setHeight(dimension2D.getHeight());
        }
    }

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

}

您现在可以在您的机器上使用常规 JDK​​ 运行：

mvn clean javafx:run

并验证它工作正常。

如果是这种情况，您现在可以使用 GraalVM 创建本机映像，也在您的机器上：

mvn clean client:build

这是一个漫长的过程，通常需要 16 GB RAM 和几分钟。

成功完成后，就可以运行了：

mvn client:run

它应该按预期工作：

最后，你可以尝试构建一个Android原生镜像：

mvn -Pandroid client:build

完成后，创建 apk：

mvn -Pandroid client:package

它将在target/client/aarch64-android/gvm/apk/bin/hellogluon.apk下创建一个apk。

插入设备，安装并运行：

mvn -Pandroid client:install client:run

注意：默认情况下，图标资源和 AndroidManifest 生成在target/client/aarch64-android/gensrc/android。如果你想修改其中任何一个，你必须把这个文件夹的内容复制到src/android。