PropertyAnimation与NumberAnimation

Question

以下代码在QML中的x上对两个矩形进行了动画处理。一个使用PropertyAnimation，另一个使用NumberAnimation。两个矩形都显示相似的运动。我似乎看不到两种动画类型之间有什么不同。

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480

    Rectangle {
        id: r1
        width: 100; height: 100
        color: "red"

        Behavior on x { PropertyAnimation {} }
    }

    Rectangle {
        id: r2
        y: 150
        width: 100; height: 100
        color: "blue"

        Behavior on x { NumberAnimation {} }
    }

    MouseArea { anchors.fill: parent; onClicked: r1.x = r2.x = 200 }
}

PropertyAnimation和NumberAnimation有什么区别？我什么时候应该使用另一个？

Answer 1

tl; dr。

NumberAnimation是源自PropertyAnimation的 ，因此，让他们表现出相似的行为在逻辑上是合理的。

  

NumberAnimation是一种特殊的PropertyAnimation，它定义在数值更改时要应用的动画。    _(Source)

NumberAnimation 专门为数字值设置动画（例如x，y，width，opacity），{{1 }}是通用的，可以为非数字动画（例如PropertyAnimation，color）制作动画。

---

再回答一次

1。 size可以为非数字类型设置动画。 PropertyAnimation仅对数字进行动画处理。

NumberAnimation可以为x，y，宽度，高度，不透明度之类的数字属性设置动画。但它无法为颜色size或points设置动画。

在此示例中，动画类型在为NumericAnimation属性设置动画方面有所不同。第一个矩形从红色过渡到绿色，而第二个矩形保持蓝色。在这种情况下，应在color上使用PropertyAnimation。

NumberAnimation

但是再说一次，您可以改为ColorAnimation ...

2。 Rectangle { id: r1 width: 100; height: 100 color: "red" Behavior on color { PropertyAnimation {} } // works } Rectangle { id: r2 y: 150 width: 100; height: 100 color: "blue" Behavior on color { NumberAnimation {} } // fails } MouseArea { anchors.fill: parent; onClicked: r1.color = r2.color = "green" } 是通用的。

这是对＃1 的补充。但这本身就是另一个优势。

由于PropertyAnimation更通用，如果您决定使用动态PropertyAnimation::property，则可以使用它。

下面是一个动画属性由用户提供的示例：

PropertyAnimation

也可以使用Rectangle { id: rect width: 100; height: 100 color: "red" PropertyAnimation { id: animation; target: rect } } MouseArea { anchors.fill: parent onClicked: { animation.property = t1.text; animation.to = t2.text; animation.start(); } } Row { width: parent.width; height: 50 anchors.bottom: parent.bottom TextField { id: t1; width: parent.width/2; height: 50; placeholderText: "property" } TextField { id: t2; width: parent.width/2; height: 50; placeholderText: "to" } } ，但将可行的属性限制为仅数字属性...用户无法模拟超新星或彩虹。 ：（

3。 NumberAnimation是严格的。

让我们比较NumberAnimation和from属性。

• NumberAnimation
  • to：from
  • real：to
• PropertyAnimation
  • real：from
  • variant：to

这使variant更严格。 QML可以防止您犯傻的错误：

NumberAnimation

在严格限制动画数量时使用。

这也意味着使用NumberAnimation { id: animation to: "green" // Invalid property assignment: number expected } 可以提高可读性和通信。它告诉阅读您的代码的人您只打算为数字设置动画，而不是锚点，颜色，独角兽之类的东西。

4。 NumberAnimation在数字动画方面更有效。

–说Qt：

  

专用的属性动画类型比PropertyAnimation类型具有更有效的实现。    _(Source)

在这里，“ 特殊类型”是指NumberAnimation，以及other types，例如NumberAnimation和AnchorAnimation。

我还没有尝试对QML进行性能分析以对这些差异进行基准测试，但是选择动画类型的经验法则似乎是：

• 如果要设置数字动画，则应默认为ColorAnimation。
• NumberAnimation应该是最后的选择（最好使用other types）。