动画属性与多个动画的属性绑定

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'
    }
}

我有两个 Rectangles 具有相同的可观察行为：单击时，它们的不透明度和大小都会消失。

在内部，Animations 的数量不同，它们同时运行 - 1 或 3：

到目前为止，我主要使用rect1 的模式形式，并且仅在绑定变得不必要的复杂rect2 的情况下使用。但是我想知道，如果动画系统有一些魔法，可以优化单个属性的动画，而绑定可能会降低性能。

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

EDIT 还有第三个选项，可以通过OpacityAnimator 移动到渲染线程。现在我不能再绑定不透明度了，因为它会在动画结束时跳转到 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 的动画期间，既没有绑定也没有运行 JavaScript，这与 height 和 width 被（有效地）绑定到 opacity 的时候不同rect1 或 width （有效地）绑定到 rect3 中的 height。

此外，动画源几乎没有JS 的踪迹。我无法深入研究它，但似乎只有ScriptAction 得到QQMLScriptString，其余的只有将输入从var 转换为正确类型的成本（如果类型是使用具体动画指定，例如NumberAnimation)。
此外，据我所见，每个动画都没有循环，但所有动画都具有某种update()-function 左右，由单个循环调用（在运行/注册时）（AnimationTimer ）。但这是我已经不确定的地方。

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

Answer 1

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

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

编辑

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

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

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

所以，在rect1 中，您设置了duration: 1000 并将height 与opacity (height: 300 * opacity) 类似地width 与opacity 绑定，所以绑定应该被调用大约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 个绑定和 JavaScript 调用，而在 rect2 中没有绑定和 JavaScript 调用，所以 rect2 的动画应该更快，但问题是，会有有什么重大改进吗？因为，QtCreator 的免费版本不附带 CPU 分析器，所以我无法研究这部分问题 (CPU Usage Qt)。如果有人有 Qt 的商业版本，请告诉我我的假设。我真的认为rect2 是最好的用法，因为调用次数减少了。