介绍

视差是一种视觉效果,您可以组合以不同速度移动的两个分层图像以获得深度感。

想想一下,当您在道路上行驶时,您会看到附近的树木在快速移动,而距离较远的树木将沿相同的方向移动,但速度较慢,结果是您感觉到树木在快速移动与您和其他人更亲近。

如果您是电子游戏迷,那么您肯定已经看过这种效果:将两张图像放在另一张图像上,背景移动得较慢,而前景(可能是玩家的头像移动得更快)。

这是视频游戏世界中经常使用的技巧。 它开始使用很久以前,例如《超级马里奥》电子游戏系列。



javafx combox设置setOnMouseClicked javafx控件_html

超级马里奥游戏使用视差效果



此效果已在用户界面区域中采用,您可以在网站区域以及某些应用程序中看到该效果。



javafx combox设置setOnMouseClicked javafx控件_深度学习_02

网站上的视差–来源:https://dribbble.com/shots/1378010–GIF-Parallax-Building-animation



我的目标是以控件的形式将其引入JavaFX,您可以在其中通过简单的API添加视差效果。

ListView中的视差

我的主要目标是将其带到ListView,即具有一个类似于ListView的API的控件,您可以在其中设置背景图像和项目列表,就像在JavaFX ListView中一样。

实现ParallaxListView

若要产生视差效果,ListView中的项目(即单元格)需要以比背景图像更快的速率滚动。

这个新控件将使用具有透明背景的JavaFX ListView,该背景位于背景图像的前面。

第一个挑战是JavaFX ListView的滚动是通过跳转完成的,也就是说,当您执行滚动操作时,位置将从原始位置跳转到结束位置,而无需经过中间位置值。 这将破坏效果,因为没有像现实世界中那样的运动,只有一组离散的位置。 在现实世界中,前景中的对象通过翻译动画移动得更快,请记住,这是关于模仿现实世界中的现象(如我之前给出的驾驶示例),以提供深度感。

因此,要实现此目的,我必须实现自己的ListView滚动以及背景滚动,而背景滚动则通过一组位置设置动画。



javafx combox设置setOnMouseClicked javafx控件_java_03

ParallaxListView示例



从哪里获得

现在您可以在这里获取它: https : //github.com/dukke/parallax-list-view

我决定坚持使用JavaFX 8,因为Java 9仍然相对较新,并且有些人可能尚未迁移。 这样,Java 8和Java 9程序就可以使用它。

我使用的是私有API,即VirtualFlow,但是在JavaFX 9中已变成公共API,因此可以轻松迁移ParallaxListView代码。

测试文件夹包含有关如何使用控件的示例。 您必须滚动鼠标滚轮才能看到效果。

结论和进一步发展

ParallaxListView可以给您的应用程序一个很好的联系,增加一些天赋,但是不要过度使用此效果。

在接下来的几天里,我计划添加以下内容:

  • 添加对滚动条滚动的支持。
  • 添加API以更改背景图像相对于前景的高度
  • 添加指定ParallaxListView方向的功能:水平或垂直
  • 添加文档页面
  • 还提供一个通用控件,使您可以指定背景和任意可滚动的前景控件。

翻译自: https://www.javacodegeeks.com/2018/03/new-parallax-control-for-java-javafx.html