Qt Quick特效制作器：Qt 6.8的新增功能

Qt Quick Effect Maker: What's new in Qt 6.8

Qt Quick特效制作器：Qt 6.8的新增功能

August 19, 2024 by Kaj Grönholm | Comments

2024年8月19日  Kaj Grönholm | 评论

As the Qt 6.8 Beta 3 was released last week, it is a good time to start talking about what's new in the Qt 6.8 release. This blog post introduces one of those things, the new effect nodes available in Qt Quick Effect Maker. Also included is an example application using all of these effects.

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

Let's start by going briefly through all the new nodes:

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

Glow

发光

This node creates a Glow effect, similar to the Glow in the Qt Graphical Effects. It uses the same BlurHelper node as other nodes which require blurring. There are different glowing modes and other properties to tweak the glow appearance at runtime.

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

MaskedBlur

蒙版模糊

Another customizable blurring effect that has been requested by users is the new MaskedBlur node. Compared to Qt Graphical Effects MaskedBlur, this one contains also an alternative mode where the blur amount can be adjusted with position and radius values instead of just the blur masking image. This makes it easier and more performant to animate the blurring.

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

SpriteAnimation

精灵动画

Talking about animations, there is also a new node called SpriteAnimation. This node allows effects that use a sprite sheet, similar to the Qt Quick AnimatedSprite element. Frame interpolation property gives smoother animations with some overhead due to the need for two texture lookups instead of just one. Frame calculations are mostly done on the vertex shader side for optimal performance.

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

Bars

条纹

The Bars effect node renders - surprise surprise - animated bars. Bars have customizable colors, widths, angles and animation speed. This effect node is similar to the one that was implemented in the live shader coding tutorial and I recommend checking this video if you are interested in creating your own custom shader effects using QQEM.

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

CircleBend

圆圈弯曲

Last but not least, QQEM now also contains the CircleBend effect node. This node bends the source item into a circle/arc and is useful when implementing circular UI elements. As the bending is done in the vertex shader, altered pixel amounts can be reduced which is of course good for the performance.

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

Example usage

示例用法

So what could be done with all this new effects power? To give some ideas, I decided to implement an example application that would utilize ALL the above effects. It looks like this:

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

https://www.youtube.com/watch?v=MgL0GW248mE

The source code of the example is available at Kaj Grönholm / CircleBarsUI · GitLab. I am not going to go through them here, but will explain the effects usage briefly. The background shows MaskedBlur animating the focused position. The gauge on the left uses the Bars effect to render the bars, which allows it to be fully scalable. The Glow effect is applied to the bars and CircleBend then to bend this bars+glow combination into the circular-shaped gauge. The hearts inside the gauge are animated using SpriteAnimation. Some of the effects are used as-is and some contain customizations and additions to match the UI needs. Simple and smooth as blueberry pie with ice cream. Yummy!

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

To visualize how customizable and performant this component is, the example also contains a view of 50 animating randomly themed circle bars. This view might look for example like this:

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

That's it! Now feel free to install the latest (beta) release of Qt 6.8, please report any issues found and test also these new QQEM effects.

​就是这样！现在，请随时安装Qt 6.8的最新（测试版）版本，请报告发现的任何问题，并测试这些新的QQEM效果。
​