动画“重影"在xxhdpi Android javafxports应用程序上 [英] Animation "ghosting" on xxhdpi Android javafxports application

查看:86
本文介绍了动画“重影"在xxhdpi Android javafxports应用程序上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我编写了一个小型javafx应用程序,该应用程序为从左上角到右下角移动的正方形设置了动画.然后,它将反转动画并连续运行它.在我的像素4(xxhdpi)上,正方形在返回行程中留在边缘边缘的后面.在Nexus 7 2013(xhdpi)或台式机上不会发生这种情况.

I've written a small javafx app that animates a square moving from the top-left corner to bottom-right. It then reverses the animation and runs it continuously. On my pixel 4 (xxhdpi) the square leaves behind a trail of edges on the return trip. This does not happen on on my Nexus 7 2013 (xhdpi) or on my desktop.

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

Tried both the gluon plugin and also the gluon-vm plugin.

似乎与屏幕像素密度有关...如何防止在密集屏幕上出现鬼影痕迹?图片和代码如下.

Seems related to screen pixel density . . . how do you prevent the ghosting artifacts on dense screens? Image and code below.

像素4屏幕截图:

Nexus 2013截图:

Nexus 2013 Screenshot:

和应用:

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();
    }
}

推荐答案

old Gluon jfxmobile 插件或多或少地处于停产状态,并且已被新的Gluon取代客户端插件.可以在此处此处找到详细的文档.

The old Gluon jfxmobile plugin is more or less EOL, and it's being replaced by the new Gluon Client plugin. More details can be found here and here. Detailed documentation can be found here.

这是您尝试创建可解决重影"问题的Android应用程序的方法,它具有一些额外的小"好处,例如使用Java和JavaFX 11 +,GraalVM,以及获得性能更高的应用程序.请注意,Android客户端插件仍在大量开发中,尚未准备好投入生产.

This is how you can try creating an Android app that will solve the "ghosting" issue, with some extra "small" benefits, like using Java and JavaFX 11+, GraalVM, and getting a much more performant app. Note that the client plugin for Android is still under heavy development and it's not ready for production yet.

在开始之前,请检查是否已满足前提条件此处:

Before you get started, please check that you follow the prerequisites here:

  • 使用Linux计算机
  • 下载并提取此版本 GraalVM.
  • GRAALVM_HOME 环境变量设置为GraalVM安装目录,例如:

  • Use a Linux machine
  • Download and extract this version of GraalVM.
  • Set GRAALVM_HOME environment variable to the GraalVM installation directory, like:

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

  • 使用Java 11,或设置 export JAVA_HOME = $ GRAALVM_HOME
  • 您可以修改现有示例之一,例如 HelloGluon .

    You can modify one of the existing samples, like HelloGluon.

    您可以将pom修改为使用最新版本,例如:

    You can modify the pom to use the latest versions like:

    <?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>
    

    现在,您可以修改主视图以添加过渡:

    Now you can modify the main view to add your transition:

    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:

    You can now run with your regular JDK on your machine:

    mvn clean javafx:run
    

    并确认它可以正常工作.

    and verify that works fine.

    在这种情况下,您现在还可以在计算机上使用GraalVM创建本机映像:

    If that is the case, you can now create a native image with GraalVM, also on your machine:

    mvn clean client:build
    

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

    This is a lengthy process, that requires usually 16 GB RAM, and a few minutes.

    成功完成后,您可以运行它:

    Once finished successfully, you can run it:

    mvn client:run
    

    它应能按预期工作:

    最后,您可以尝试构建Android本机映像:

    Finally, you can try to build an Android native image:

    mvn -Pandroid client:build
    

    完成后,创建apk:

    mvn -Pandroid client:package
    

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

    It will create an apk under target/client/aarch64-android/gvm/apk/bin/hellogluon.apk.

    插入设备以安装并运行:

    Plug a device, to install and run:

    mvn -Pandroid client:install client:run
    

    注意:默认情况下,图标资产和AndroidManifest是在 target/client/aarch64-android/gensrc/android 生成的.如果要修改其中任何一个,则必须将此文件夹的内容复制到 src/android .

    Note: by default, icon assets and AndroidManifest are generated at target/client/aarch64-android/gensrc/android. If you want to modify either of them, you have to copy the content of this folder to src/android.

    这篇关于动画“重影"在xxhdpi Android javafxports应用程序上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆