Qt6.4中的新功能：帧动画

August 19, 2022 by Kaj Grönholm | Comments

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

In this blog post we try to solve the classical "Mouse chasing Mouse" -problem. Don&＃39;t know it? No problem, nobody does. But if you are interested in Qt Quick, smooth animations and what&＃39;s new in Qt 6.4 (Beta3 was just released!), please continue reading and you&＃39;ll find out!

在这篇博文中&＃xff0c;我们试图解决经典的“老鼠追老鼠”问题。不知道吗&＃xff1f;没问题&＃xff0c;没人会。但如果您对Qt Quick、平滑的动画以及Qt 6.4&＃xff08;Beta3刚刚发布&＃xff01;&＃xff09;中的新功能感兴趣&＃xff0c;请继续阅读&＃xff0c;你会发现的&＃xff01;

When animating a Qt Quick property from A to B with speed X, you usually use some Animation element like PropertyAnimation, NumberAnimation or ColorAnimation. And for combining multiple animations, you can use ParallelAnimation or SequentialAnimation. These are declarative and work great in most cases. Sometimes in the middle of an animation the target changes to C instead (or back to A) and standard animations can handle also this case smoothly. But if C is a moving target, changing frequently or speed X should be adjustable during the animation (and not just some pre-defined easing curve), then these standard Qt Quick animations are not ideal anymore.

​当以速度X将Qt Quick属性从A设置为B时&＃xff0c;通常使用一些动画元素&＃xff0c;如PropertyAnimation、NumberAnimation或ColorAnimation。对于组合多个动画&＃xff0c;可以使用ParallelAnimation或SequentialAnimation。这些是声明性的&＃xff0c;在大多数情况下都非常有效。有时在动画中间&＃xff0c;目标会改为C&＃xff08;或返回到A&＃xff09;&＃xff0c;标准动画也可以顺利处理这种情况。但是&＃xff0c;如果C是一个移动目标&＃xff0c;在动画期间频繁变化或速度X应该是可调整的&＃xff08;而不仅仅是一些预定义的缓和曲线&＃xff09;&＃xff0c;那么这些标准Qt Quick动画不再理想。

Now let&＃39;s demonstrate this issue with a mouse chasing mouse tester application and present different (more or less optional) ways to solve it.

现在&＃xff0c;让我们用一个鼠标追踪鼠标测试仪应用程序来演示这个问题&＃xff0c;并给出不同的&＃xff08;或多或少是可选的&＃xff09;解决方法。

Solution 1: Behavior

解决方案1&＃xff1a;行为

When I have property changes and need to animate them, first option that comes to my mind usually is adding a Behavior for those properties. So let&＃39;s try that first. Attach the mouse position to mouseX and mouseY properties and whenever they change, instead of changing directly to the new values, use Behavior to animate the changes like this:

​当我有属性更改并需要设置动画时&＃xff0c;我想到的第一个选项通常是为这些属性添加行为。让我们先试试。将鼠标位置附加到mouseX和mouseY属性&＃xff0c;每当它们更改时&＃xff0c;使用行为来动画化更改&＃xff0c;而不是直接更改为新值&＃xff1a;

property real mouseX: 0
property real mouseY: 0Behavior on mouseX {NumberAnimation {duration: 1000}
}
Behavior on mouseY {NumberAnimation {duration: 1000}
}

Here is what this solution looks like:

以下是此解决方案的外观&＃xff1a;

https://youtu.be/3GdIUYVMwN8

There are a few issues with this approach: As the animations are duration-based, mouse moves faster when the distance is longer and slower when it is shorter. Another issue is that animations are recalculated & restarted whenever the mouse pointer moves, which causes extra CPU usage. This is especially notable when we artificially generate high CPU load → the animations become jumpy. Instead of NumberAnimation it would be possible to use SmoothedAnimation or SpringAnimation but the easings of those animation types don&＃39;t really suit for this use case and they don&＃39;t really fix the issues.

​这种方法存在一些问题&＃xff1a;由于动画是基于持续时间的&＃xff0c;所以当距离较长时&＃xff0c;鼠标移动得更快&＃xff0c;而当距离较短时&＃xff0c;鼠标则移动得更慢。另一个问题是&＃xff0c;每当鼠标指针移动时&＃xff0c;动画都会重新计算和重新启动&＃xff0c;这会导致额外的CPU使用。当我们人为地产生高CPU负载时&＃xff0c;这一点尤为明显→ 动画变得跳跃。代替NumberAnimation&＃xff0c;可以使用SmoothedAnimation或SpringAnimation&＃xff0c;但这些动画类型的效果并不适合这个用例&＃xff0c;也不能真正解决问题。

Solution 2: Timer

解决方案2&＃xff1a;定时器

As the property animations seem a bit too restrictive for this use case, someone (not me) could consider using Timer with 16ms interval for 60fps animation action. Code for that would look something like this:

​由于属性动画对于这个用例来说似乎有点过于严格&＃xff0c;所以有人&＃xff08;不是我&＃xff09;可以考虑使用16毫秒间隔的定时器来执行60帧的动画动作。代码如下所示&＃xff1a;

Timer {running: truerepeat: trueinterval: 16onTriggered: {var xDelta &＃61; mouseArea.mouseX - mouseX;var yDelta &＃61; mouseArea.mouseY - mouseY;var length &＃61; Math.sqrt(xDelta * xDelta &＃43; yDelta * yDelta);var speed &＃61; 3.0;if (length > speed) {var xNormalized &＃61; xDelta / length;var yNormalized &＃61; yDelta / length;mouseX &＃43;&＃61; xNormalized * speed;mouseY &＃43;&＃61; yNormalized * speed;}}
}

And the outcome:

结果是&＃xff1a;

https://youtu.be/kDCSs7WQfWY

Initially this Timer approach seems to work pretty well. But it also comes with its own flaws: As we set the interval to 16ms, the timer doesn&＃39;t match well to non-60Hz animation refresh rates. Also, QML Timers are not really meant for animations and internally they have an extra Qt event loop roundtrip, meaning that they are not as tightly integrated with the animation loop. This is clearly visible when loading the event system e.g. by moving the window → the animation becomes jumpy. Lastly, if the target doesn&＃39;t reach the intended fps for any reason, the mouse starts to move slower as the speed doesn&＃39;t have any multiplier taking the animation frame rate into account. We could manually calculate some multiplier e.g. with Javascript Date & getMilliseconds() but that is an extra work we rather avoid if possible.

最初&＃xff0c;这种计时器方法似乎工作得很好。但它也有自己的缺陷&＃xff1a;当我们将时间间隔设置为16ms时&＃xff0c;定时器与非60Hz动画刷新率不匹配。此外&＃xff0c;QML定时器实际上并不适用于动画&＃xff0c;在内部它们有一个额外的Qt事件循环往返&＃xff0c;这意味着它们与动画循环没有紧密集成。这在加载事件系统时&＃xff08;例如通过移动窗口&＃xff09;清晰可见→ 动画变得跳跃。最后&＃xff0c;如果目标由于任何原因没有达到预期的帧速率&＃xff0c;则鼠标开始移动得较慢&＃xff0c;因为速度没有考虑动画帧速率的任何乘数。我们可以手动计算一些乘数&＃xff0c;例如使用Javascript Date&getmillizes&＃xff08;&＃xff09;&＃xff0c;但如果可能的话&＃xff0c;我们宁愿避免额外的工作。

Solution 3: FrameAnimation

解决方案3&＃xff1a;帧化

Next we will switch to the main topic of this blog post, the new FrameAnimation element. FrameAnimation can be considered as a "custom animation" where you control what happens each time it is triggered. Compared to Timer, FrameAnimation doesn&＃39;t have repeat or interval properties, since the intervals are always synchronized with the animations and triggered once per Qt Quick animation frame. Source code of the FrameAnimation version is very similar to previous Timer code, with an addition to also rotate the mouse image:

​接下来&＃xff0c;我们将切换到这篇博客文章的主要主题&＃xff0c;新的FrameAnimation元素。FrameAnimation可以被视为“自定义动画”&＃xff0c;您可以控制每次触发时发生的情况。与计时器相比&＃xff0c;FrameAnimation不具有重复或间隔属性&＃xff0c;因为间隔始终与动画同步&＃xff0c;并且每Qt Quick animation帧触发一次。FrameAnimation版本的源代码与以前的定时器代码非常相似&＃xff0c;除了旋转鼠标图像之外&＃xff1a;

FrameAnimation {running: trueonTriggered: {var xDelta &＃61; mouseArea.mouseX - mouseX;var yDelta &＃61; mouseArea.mouseY - mouseY;var length &＃61; Math.sqrt(xDelta * xDelta &＃43; yDelta * yDelta);var speed &＃61; 3.0 * 60 * frameTime;if (length > speed) {var xNormalized &＃61; xDelta / length;var yNormalized &＃61; yDelta / length;mouseX &＃43;&＃61; xNormalized * speed;mouseY &＃43;&＃61; yNormalized * speed;var rot &＃61; Math.atan2(yDelta, xDelta) - (Math.PI / 2);mouseImage.rotation &＃61; rot * (180 / Math.PI);}}
}

And the outcome:

结果是&＃xff1a;

https://youtu.be/paClowU51qw

This version is the one to use because FrameAnimation is better synchronized with the animation loop, getting triggered for every animation frame. This way it will adjust to different target screen refresh rates when using the threaded render loop with vsync-based throttling. You can also use frameTime (or smoothFrameTime) property as a multiplier and your animation speed will then adjust to different target fps, taking into account possible missed frames. Actually, FrameAnimation with smoothFrameTime property is used in this example also for the simple frame time & rate information, which is good enough for our needs to show when the animation speed drops:

​使用此版本是因为FrameAnimation与动画循环更好地同步&＃xff0c;每个动画帧都会触发。这样&＃xff0c;当使用基于vsync的线程渲染循环时&＃xff0c;它将调整到不同的目标屏幕刷新率。您还可以使用frameTime&＃xff08;或smoothFrameTime&＃xff09;属性作为乘数&＃xff0c;然后将动画速度调整到不同的目标fps&＃xff0c;同时考虑可能丢失的帧。实际上&＃xff0c;本示例中还使用了具有smoothFrameTime属性的FrameAnimation&＃xff0c;用于简单的帧时间和速率信息&＃xff0c;这足以满足我们在动画速度下降时显示的需要&＃xff1a;

Text {text: fpsHelper.ft &＃43; " ms, " &＃43; fpsHelper.fps &＃43; " fps"FrameAnimation {id: fpsHelperreadonly property int fps: smoothFrameTime > 0 ? Math.round(1.0 / smoothFrameTime) : 0readonly property string ft: (1000 * smoothFrameTime).toFixed(1)running: true}
}

Performance considerations

性能考虑

Now you might think "OK, this FrameAnimation can do stuff but shouldn&＃39;t we avoid QML Javascript code for optimal performance?". This was true in the past but not as much anymore. With Qt 6, a lot of work has been done to optimize the QML engine and the new Qt Quick Compiler even compiles QML Javascript to native C&＃43;&＃43; code. For more details, see the Qt Quick Compiler performance blog post and the related optimization series posts. So while you should still keep the frontend UI layer (QML) and the backend logic (C&＃43;&＃43;) separate and have most of the imperative code in C&＃43;&＃43; side, don&＃39;t be afraid of using QML scripts a bit more for UI related things.

​现在您可能会想“好吧&＃xff0c;这个框架动画可以做一些事情&＃xff0c;但我们不应该避免QML Javascript代码以获得最佳性能吗&＃xff1f;”。这在过去是真实的&＃xff0c;但现在不再如此。在Qt6中&＃xff0c;已经做了大量工作来优化QML引擎&＃xff0c;新的QtQuick编译器甚至将QML Javascript编译为本地C&＃43;&＃43;代码。有关详细信息&＃xff0c;请参阅Qt Quick编译器性能博客和相关优化系列文章。因此&＃xff0c;虽然您仍然应该将前端UI层&＃xff08;QML&＃xff09;和后端逻辑&＃xff08;C&＃43;&＃43;&＃xff09;分开&＃xff0c;并将大部分命令代码放在C&＃43;&＃43;端&＃xff0c;但不要害怕将QML脚本更多地用于与UI相关的事情。

The example used in this blog post was just a quick tester app, but FrameAnimation can of course also be used to do much nicer things (which I will blog about soonish!). But in conclusion for this post: If you are using Qt 6.4 (or newer) and have a need for fully custom Qt Quick animations, consider using the new FrameAnimation element.

​这篇博文中使用的示例只是一个快速测试应用程序&＃xff0c;但FrameAnimation当然也可以用来做更好的事情&＃xff08;我将在soonish的博客上讨论&＃xff09;。但在这篇文章的最后&＃xff1a;如果您使用的是Qt 6.4&＃xff08;或更高版本&＃xff09;&＃xff0c;并且需要完全自定义的Qt Quick动画&＃xff0c;请考虑使用新的FrameAnimation元素。