Schöner als Super Mario!

FXParallax 2.0: Neue Version der Bibliothek für Parallax-Effekte in JavaFX

Pedro Duque Vieira
 © Shutterstock / Morozov Alexey

Bilder oder Videos in JavaFX aufpeppen? Kein Problem, mit FXParallax 2.0! Die neue Version bringt eine Reihe von Erweiterungen für FXParallax, mit denen sich eigene Projekte durch verbesserte Animationen erweitern lassen.
 

Ich habe der FXParallax-Bibliothek zwei neue Steuerelemente hinzugefügt. Das erste und wichtigste ist ParallaxPane. Es bietet die Möglichkeit, einen Parallax-Effekt zu jeder beliebigen Node-Unterklasse hinzuzufügen. Das zweite, AnimatedScrollPane, erweitert ScrollPane durch eine Funktion, mit der sich das Scrollen animieren lässt.

In der Kategorie FXParallax auf meinem Blog können Sie sich meine bisherigen Blog-Einträge zu dieser Bibliothek ansehen. Ein grundlegender Artikel zu FXParallax erschien auch auf JAXenter.

Details zur neuen Version von FXParallax

In diesem Beitrag werde ich die bereits erwähnten Neuerungen des FXParallax erläutern.

ParallaxPane

ParallaxPane ist ein neues Steuerelement, das es ermöglicht, einen Parallax-Effekt zu jeder beliebigen Node-Unterklasse hinzuzufügen. Das API dafür ist recht simpel – alles was man tun muss, ist, den Node auszuwählen, zu dem man einen Parallax-Effekt hinzufügen möchte. Dies wird durch das Aufrufen von seContent(Node) durchgeführt. ParallaxPane bestimmt automatisch, an welcher „Position“ der Teil des Inhalts angezeigt werden soll, indem es ihn in Bezug zur Bildschirmposition von ParallaxPane setzt.

Das obige Video zeigt die beispielhafte Nutzung von ParallaxPane, in deren Szene es zwei ParallaxPanes gibt, die beide ein ImageView-Objekt enthalten. Wie man sehen kann, haben beide ImageViews einen Parallax-Effekt. Das sind die Bilder, die verwendet wurden:

Das folgende Code Snippet zeigt ein Beispiel, wie man ein ParallaxPane definieren kann. In diesem Fall bestimmen wir ein Bild als Inhalt des ParallaxPane (indem wir ImageView verwenden):

VBox vBox = new VBox();
ParallaxPane parallaxPane = new ParallaxPane();
String url = ParallaxPaneWithImageTest.class.getResource("small-business.jpg").toExternalForm();
parallaxPane.setContent(new ImageView(url));
vBox.getChildren().add(parallaxPane);

ParallaxPane verfügt auch über eine praktische Methode, die man für das Festlegen eines Bildes als Inhalt recht einfach verwenden kann. Diese Methode heißt SetImage und empfängt ein Image-Objekt. Man kann alternativ auch den jeweiligen Konstruktor verwenden, der entweder einen Node oder ein Image-Objekt erhält.

Wenn wir es deklarativ definieren wollten, könnte es in FXML wie folgt aussehen (in dem Fall unter Verwendung des ParallaxPane Convenience-Konstruktors mit einem @NamedArg Bild-Parameter):

<VBox styleClass="main-container">
    <ParallaxPane styleClass="first-image">
        <image>
            <Image url="@small-business.jpg" />
        </image>
    </ParallaxPane>
</VBox>

AnimatedScrollPane

Eine weitere Neuerung, die iim vorherigen Beispiel gezeigt wurde, ist das neue AnimatedScrollPane. Zwar könnte hier auch ein normales ScrollPane genutzt werden, allerdings fügt das AnimatedScrollPane einen zusätzlichen Effekt hinzu, indem das Scrollen animiert wird. Man wird feststellen, dass beim Scrollen durch den Inhalt in modernen Anwendungen wie Google Chrome in der regel eine subtile Animation dem Auge schmeichelt.

AnimatedScrollPane hat das gleiche API wie ScrollPane, tatsächlich erweitert es das ScrollPane. Die derzeitige Einschränkung besteht darin, dass es vorerst nur für das vertikale Scrollen genutzt werden kann.

In Zukunft könnte es einen ScrollPane-Skin geben, den man für das Hinzufügen von animiertem Scrollen zum normalen ScrollPane nutzen kann.

Andere Nodes als Inhalt von ParallaxPane

Wie bereits erwähnt wurde, kann jeder Node als Inhalt von ParallaxPane festgelegt werden. Im folgedenen Beispiel wird ein Video mit einem Parallax-Effekt (das zweite ParallaxPane enthält ein Video). Dies wird erreicht, indem eine MediaView als Inhalt von ParallaxPane festgelegt wird.

Und hier ist das FXML Code Snippet, dass das ParallaxPane mit Video deklariert:

<ParallaxPane styleClass="video">
    <MediaView>
        <mediaPlayer>
            <MediaPlayer autoPlay="true" mute="true">
                <media>
                    <Media source="@Swimming_10835.mp4" />
                </media>
                <cycleCount>
                    <MediaPlayer fx:constant="INDEFINITE" />
                </cycleCount>
            </MediaPlayer>
        </mediaPlayer>
    </MediaView>
</ParallaxPane>

All diese Beispiele befinden sich im Testordner des Respositorys.

Fazit

ParallaxPane und AnimatedScrollPane wurden der FXParallax-Bibliothek hinzugefügt. Ersteres ermöglicht es, jedem Node ein Parallax-Effekt hinzuzufügen. Das andere Steuerelement fügt einem ScrollPane eine nette Scroll-Animation zur Steuerung hinzu.

Die JAR-Datei steht wie gewohnt zum Download und über Maven zur Verfügung. Details zu FXParallax 2.0 finden sich in der aktualisierten Dokumentation von FXParallax und auf meinem Blog.

Verwandte Themen:

Geschrieben von
Pedro Duque Vieira
Pedro Duque Vieira
JavaFX and Swing, Freelancer and Consultant – http://www.pixelduke.com - specialized in creating User Interfaces. Has been working as a front end consultant and has been developing web, native and cross platform since 2006. Holder of a master degree in Computer Science, he's permanently studying and taking courses in User Interface Design and User Experience. Owner of the software company Pixel Duke. Twitter: @P_Duke"
Kommentare

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu: