qt - 动画属性上的属性绑定(bind)与多个动画

Question

考虑这个例子:

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    id: appWindow
    width: 1024
    height: 800
    visible: true

    Rectangle {
        id: rect1
        property bool active: true
        opacity: active ? 1 : 0
        height: 300 * opacity
        width: 300 * opacity
        Behavior on opacity { NumberAnimation { duration: 1000 } }
        MouseArea { anchors.fill: parent; onClicked: parent.active = false }
        color: 'cornflowerblue'
    }

    Rectangle {
        id: rect2
        property bool active: true
        x: 305
        opacity: active ? 1 : 0
        height: active ? 300 : 0
        width: active ? 300 : 0
        Behavior on opacity { NumberAnimation { duration: 1000 } }
        Behavior on height { NumberAnimation { duration: 1000 } }
        Behavior on width { NumberAnimation { duration: 1000 } }
        MouseArea { anchors.fill: parent; onClicked: parent.active = false }
        color: 'steelblue'
    }
}

我有两个具有相同可观察行为的 Rectangle:单击时，它们的不透明度和大小都会变淡。

在内部，它在同时运行的 Animation 数量上有所不同 - 1 或 3:

截至目前，我主要使用模式形式 rect1 并且仅在绑定(bind)变得不必要地复杂的情况下使用 rect2。但是我想知道，如果动画系统有某种魔力，可以优化单个属性的动画，而绑定(bind)的性能可能会降低。

在哪些用例中使用模式 rect1 是有益的，什么时候使用 rect2 的方法更明智？

编辑 还有第三个选项，它尽可能通过OpacityAnimator 移动到渲染线程。现在我不能再绑定(bind)不透明度了，因为它会在动画结束时跳到 0。

Rectangle {
        id: rect3
        property bool active: true
        opacity: active ? 1 : 0
        height: active ? 300 : 0
        x: 610
        width: height
        Behavior on opacity { OpacityAnimator { duration: 1000 } }
        Behavior on height { NumberAnimation { duration: 1000 } }
        MouseArea { anchors.fill: parent; onClicked: parent.active = false }
        color: 'dodgerblue'
    }

EDIT 2 解决 Ansh Kumar 的答案: 这是 QML Profiler 的摘录。您可以看到，在 rect2 的动画期间，既没有绑定(bind)也没有运行 JavaScript，这与 height 和 width 为 (有效地) 绑定(bind)到 rect1 中的 opacity 或 width 被(有效地) 绑定(bind)到 rect3 中的 height。

此外，动画源几乎没有显示 JS 痕迹。我无法深入研究它，但似乎只有 ScriptAction 获得 QQMLScriptString ，其余的只有转换输入的成本 var 到正确的类型(如果类型是通过使用具体的动画指定的，例如 NumberAnimation)。
此外，据我所知，每个动画都没有循环，但是所有动画都具有某种 update() 功能，它被调用(在运行/注册时)单个循环 (AnimationTimer)。但这是我已经不确定的地方。

现在的问题仍然存在:动画的实现是否比优化的 JS 环境更有效，尤其是在创建多个对象时。

Answer 1

QML 中有两种类型的绑定(bind):优化绑定(bind)和非优化绑定(bind)。保持绑定(bind)表达式尽可能简单是个好主意，因为 QML 引擎使用优化的绑定(bind)表达式评估器，它可以评估简单的绑定(bind)表达式，而无需切换到完整的 JavaScript 执行环境。与更复杂(未优化)的绑定(bind)相比，这些优化绑定(bind)的评估效率要高得多。绑定(bind)优化的基本要求是在编译时必须知道访问的每个符号的类型信息。

当绑定(bind)知道他们正在使用的对象和属性的类型时，绑定(bind)是最快的。动画化属性将导致重新评估引用该属性的任何绑定(bind)。通常，这是需要的。 rect2 中的 opacity、height 和 width 被重新评估为完整的 JavaScript 执行环境，而在 rect1; width 和 height 通过一个优化的绑定(bind)表达式求值器并优化以提供更有效的绑定(bind)，因为它们的对象类型在编译时是已知的。检查binding还有animations了解更多详情。

编辑

您关于在 C++ 环境中进行评估的说法是正确的。我找到了以下信息。

渲染引擎应该达到一致的每秒 60 帧的刷新率。 60 FPS 意味着每帧之间大约有 16 毫秒(正好是 16.6667 毫秒)可以进行处理，其中包括将绘图图元上传到图形硬件所需的处理。 This显示动画与垂直刷新同步，因此每 16.66 毫秒一次，并且恰好一次 pr 帧。

while (animationIsRunning) {
    processEvents();
    advanceAnimations();
    paintQMLScene();
    swapAndBlockForNextVSync();
}

因此，在 rect1 中，您设置了 duration: 1000 并将 height 与 opacity 绑定(bind)( height: 300 * opacity) width 和 opacity 类似，所以绑定(bind)应该调用 60 次左右？如果您看到 statistics 的 QML profiler 输出，您会发现以下内容

正如预期的那样，调用次数约为 60(正好是 63)。现在，如果将持续时间更改为 2000，调用次数将增加一倍。

因为必须计算300 * opacity，所以QML应该调用JavaScript环境大约60次(当duration: 1000)

正如预期的那样，它被调用了大约 60 次。

NumberAnimation 是用 JavaScript 还是 C++ 实现的？当然，你说的是用 C++ 实现的，Here是其声明的链接。因此，在 rect1 中我们使用了 NumberAnimation 一次，在 rect2 中我们使用了 3 次。因此，总共应创建 4 个 NumberAnimation 实例。

因此，rect1 总共有大约 120 个绑定(bind)和 JavaScript 调用，而在 rect2 中没有绑定(bind)和 JavaScript 调用，所以 rect2< 的动画 应该会更快，但问题是，会有什么显着的改进吗？因为 QtCreator 的免费版本没有附带 CPU 分析器，所以我无法研究问题的那一部分(CPU Usage Qt)。如果有人有 Qt 的商业版本，请告诉我我的假设。我真的认为 rect2 最适合使用，因为调用次数减少了。