PropertyAnimation 与 NumberAnimation

Posted 2023-02-16

【中文标题】PropertyAnimation 与 NumberAnimation

【英文标题】：PropertyAnimation vs. NumberAnimation

【发布时间】：2019-04-06 16:49:42

【问题描述】：

下面的 QML 代码为两个矩形设置动画。一个使用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  
    

    // click anywhere to start animation
    MouseArea  anchors.fill: parent; onClicked: r1.x = r2.x = 200 

PropertyAnimation和NumberAnimation有什么区别；什么时候应该使用其中一个？

【问题讨论】：

尝试为color 制作动画，您会看到不同。

【参考方案1】：

tl;博士。

NumberAnimation派生自PropertyAnimation，因此，它们表现出相似的行为是合乎逻辑的。

NumberAnimation 是一个专门的 PropertyAnimation，它定义了数值变化时要应用的动画。 _(Source)

虽然NumberAnimation 特别 动画数值（例如x、y、width、opacity），PropertyAnimation 是通用和可以动画非数字的（例如color，size）。

---

Lé更长的答案：

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

NumericAnimation 可以为 x、y、宽度、高度、不透明度等数字属性设置动画。但它不能为颜色设置动画，size 或 points。

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

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" 

但话又说回来，你可以ColorAnimation 代替...

2。 PropertyAnimation 是通用的。

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

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

以下是动画属性由用户提供的示例：

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" 

使用NumberAnimation 也可以，但将可行属性限制为仅限数字属性...用户无法模拟超新星或彩虹。 :(

3。 NumberAnimation 是严格的。

让我们比较一下from 和to 属性。

NumberAnimation from: real to: real PropertyAnimation from: variant to: variant

这使得NumberAnimation 更加严格。 QML 将防止你犯愚蠢的错误：

NumberAnimation 
    id: animation
    to: "green"    //  Invalid property assignment: number expected   

当您严格限制动画数量时使用它。

这也意味着使用NumberAnimation 可以提高可读性和沟通。它告诉阅读您的代码的人，您只打算为数字添加动画效果，而不是锚点、颜色、独角兽或其他任何东西。

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

– Qt 说：

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

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

我没有尝试对 QML 进行剖析来对差异进行基准测试，但似乎选择动画类型的经验法则是：

如果要为数字设置动画，则应默认为 NumberAnimation。 PropertyAnimation 应该是最后的手段（更喜欢other types）。