随着Qt 6.8 Beta 3上周发布,现在是开始讨论Qt 6.8版本中的新功能的好时机。这篇博客文章介绍了其中一件事,Qt Quick effect Maker中提供的新效果节点。还包括一个使用所有这些效果的示例应用程序。

 

让我们先简要浏览一下所有新节点:

 

发光

 

 

 

此节点创建光晕效果,类似于Qt图形效果中的光晕。它使用与其他需要模糊的节点相同的BlurHelper节点。有不同的发光模式和其他属性可以在运行时调整发光外观。

 

蒙面模糊

 

 


用户要求的另一个可定制的模糊效果是新的MaskedBlur节点。与Qt Graphical Effects MaskedBlur相比,此模式还包含一个替代模式,可以使用位置和半径值调整模糊量,而不仅仅是模糊遮罩图像。这使得为模糊设置动画更容易、更高效。

 

精灵动画

 

 

 

说到动画,还有一个名为SpriteAnimation的新节点。此节点允许使用精灵表的效果,类似于Qt Quick AnimatedSprite元素。帧插值属性提供了更平滑的动画,但由于需要两次纹理查找而不是一次,因此需要一些开销。帧计算主要在顶点着色器侧进行,以获得最佳性能。

 

Bars

 

 


Bars效果节点渲染-惊喜-动画条形图。条形图具有可自定义的颜色、宽度、角度和动画速度。此效果节点类似于实时着色器编码教程中实现的效果节点,如果您有兴趣使用QQEM创建自己的自定义着色器效果,我建议您查看此视频。

 

圆圈结束

 

 

 

最后但并非最不重要的一点是,QQEM现在还包含CircleBend效果节点。此节点将源项弯曲成圆/弧,在实现圆形UI元素时非常有用。由于弯曲是在顶点着色器中完成的,因此可以减少更改的像素量,这当然对性能有好处。

 

示例用法

 

那么,这些新的特效能做什么呢?为了给出一些想法,我决定实现一个利用上述所有效果的示例应用程序。它看起来像这样:

 

该示例的源代码可在https://git.qt.io/kagronho/circlebarsui.我不打算在这里详细介绍它们,但会简要解释一下效果用法。背景显示MaskedBlur为聚焦位置设置动画。左侧的仪表使用条形图效果来渲染条形图,这使其可以完全扩展。辉光效果应用于条形图和CircleBand,然后将此条形图+辉光组合弯曲成圆形仪表。使用SpriteAnimation为仪表内的心脏设置动画。其中一些效果按原样使用,另一些则包含自定义和添加,以满足UI需求。像蓝莓派配冰淇淋一样简单顺滑。好吃!


为了直观地展示此组件的可定制性和性能,该示例还包含一个50个随机主题圆条的动画视图。此视图可能看起来像这样:

 

 

就是这样!现在,请随时安装Qt 6.8的最新(测试版)版本,请报告发现的任何问题,并测试这些新的QQEM效果。