Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

FXParallax: Parallax In Java Version 2

DZone's Guide to

FXParallax: Parallax In Java Version 2

Want to jazz up your images or videos? See a couple of new additions to ParallaxFX that add enhanced animation to your projects.

· Java Zone ·
Free Resource

Download Microservices for Java Developers: A hands-on introduction to frameworks and containers. Brought to you in partnership with Red Hat.

I’ve added two new controls to the FXParallax library. The first and most important one, ParallaxPane, creates the possibility of adding a parallax effect to any Node subclass. The second, AnimatedScrollPane, extends ScrollPane by making the scroll animated.

In the FXParallax category, you can check out my previous blog posts about this library.

In this post, I’m going to describe the mentioned additions to FXParallax.

New Version Details

ParallaxPane


ParallaxPane is a new control that creates the ability to add a parallax effect to any Node subclass. The API is pretty simple — all you have to do is set the Node you’d want to have a parallax effect added to by calling setContent(Node).

ParallaxPane automatically takes care of what “position” of the clipped content to show depending on the ParallaxPane’s screen position.

The video above shows a demo of the ParallaxPane. Two ParallaxPanes exist in this scene, both containing an ImageView object. As you can see, those two ImageView’s have a parallax effect.

These are the images that have been used:

Image title

Image title

The following code snippet shows an example of how you can define a ParallaxPane. In this case, we’re setting an image (through the use of ImageView) as the ParallaxPane’s content:

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 also has a convenience method that you can use when you simply want to set an Image as its content. That method is conveniently called setImage and receives an Image object. You can also use the constructor that receives a Node or the constructor that receives an Image object.

If we wanted to have it defined declaratively, in FXML, it could look like this (using the ParallaxPane convenience constructor with a @NamedArg Image parameter):

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


AnimatedScrollPane

Another detail about the previous demo is that it’s using the new AnimatedScrollPane. A regular ScrollPane could also be used, but AnimatedScrollPane adds an extra interesting effect by having the scroll be animated. You’ll also notice that modern applications, like Google Chrome, usually scroll their contents through a subtle animation.

AnimatedScrollPane has the same API as ScrollPane. In fact, it extends from ScrollPane. The current limitation is that, for now, it’s implemented with only vertical scrolling in mind.

In the future, there might be a ScrollPane skin that you can use, so you can add animated scrolling to a regular ScrollPane.

Setting a Different Node as Content of ParallaxPane

As I said above, any Node can be set as the content of a ParallaxPane. The following demo shows a video with a parallax effect (the second ParallaxPane contains a video). This is achieved by setting a MediaView as the content of the ParallaxPane.


And the FXML code snippet that declares the ParallaxPane with the video:

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


These demos are all present in the repository, in the test folder.

Conclusion

ParallaxPane and AnimatedScrollPane have been added to the FXParallax library. The former adds the ability to add a parallax effect to any Node, and the other control adds a nice scrolling animation to a ScrollPane like control.

As usual, the JAR is available for download and through Maven. For details, check the FXParallax documentation page, which has been updated.

Download Building Reactive Microservices in Java: Asynchronous and Event-Based Application Design. Brought to you in partnership with Red Hat

Topics:
java ,parallax ,animation ,parallaxfx ,javafx ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}