QML Behavior动画元素详解

QML Behavior 用法解析

Behavior 是 QML 中用于为属性变化添加动画效果的元素。三种不同的 Behavior 用法：

基本语法

Behavior on <property> {
    <AnimationType> {
        // 动画配置
    }
}

示例解析

1. 数值属性动画：

Behavior on percent { 
    NumberAnimation { duration: 300 } 
}

• 当 percent 属性值改变时，会以数值动画形式在300毫秒内过渡到新值

2. 宽度属性动画：

Behavior on width { 
    NumberAnimation { duration: 300 } 
}

• 当 width 改变时，宽度会在300毫秒内平滑过渡到新值

3. 颜色属性动画：

Behavior on color { 
    ColorAnimation { duration: 300 } 
}

• 当 color 改变时，颜色会在300毫秒内渐变到新颜色

使用要点

1. 应用场景：通常用于用户界面元素的平滑过渡效果
2. 性能考虑：短时间的动画(如300ms)通常不会影响性能
3. 组合使用：可以同时为多个属性添加不同的动画效果
4. 覆盖规则：后定义的 Behavior 会覆盖同属性的先前定义

完整示例

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"
    
    Behavior on width { NumberAnimation { duration: 300 } }
    Behavior on color { ColorAnimation { duration: 300 } }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            rect.width = 200
            rect.color = "blue"
        }
    }
}

点击矩形时，宽度和颜色都会在300毫秒内平滑过渡。