Qt 中的动画(Animations)_qt animation

Qt 中的动画(Animations)

Qt中的动画包含以下内容

1. States: 状态
2. Transitions: 过渡
3. Animations: 动画

概述

动画用户实现属性值缓慢变化到目标值，可以应用各种类型的缓动曲线。状态时一个对象的各种属性的配置的一个集合。过渡用来定义从一个状态切换到另一个状态时如何过渡，可以在过渡中包含动画来实现过渡。

动画

Animation是一个抽象类，下面定义了一些具体类用于各种情况。
包含以下几个：
4. SequentialAnimation：动画组，里面定义一系列的动画，按定义先后次序执行
5. ParallelAnimation：动画组，里面定义一系列动画，所有动画并行执行
6. AnchorAnimation：针对Anchor属性改变的动画，与State配合时，和AnchorChanges一起配合用
7. ColorAnimation：针对颜色的动画
8. NumberAnimation：针对数值类改变的动画
9. ParentAnimation：针对改变父对象的动画，与State配合时，和ParentChange一起配合用
10. PathAnimation: 创建动画是对象沿着Path对象定义的路径运动
11. PropertyAnimation：通用的属性改变的动画，与State配合时，和PropertyChanges一起配合用，（优先使用针对特定属性的动画）
12. RotationAnimation : 针对旋转的动画
13. Vector3dAnimation：针对 QVector3d数值改变的动画
14. PropertyAction：立即改变属性值到目标值，不应用动画效果
15. PauseAnimation：暂停一段时间
16. SmoothedAnimation：平滑动画，使用ease in/out quad缓动曲线
17. SpringAnimation：弹簧效果的动画
18. ScriptAction：在动画效果中执行脚本

动画的使用方式

19. 在Transition中

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

    states: State {
        name: "moved"
        PropertyChanges { target: rect; x: 50 }
    }

    transitions: Transition {
        PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 在Behavior中

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

    Behavior on x { PropertyAnimation {} }

    MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
}
1
2
3
4
5
6
7
8

3. 作为属性值的source

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

    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation { to: 50 }
        PropertyAnimation { to: 0 }
    }
}
1
2
3
4
5
6
7
8
9
10

4. 在信号处理器中

MouseArea {
    anchors.fill: theObject
    onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
}
1
2
3
4

5. 单独使用

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

    // this is a standalone animation, it's not running by default
    PropertyAnimation { id: animation;
                        target: theRect;
                        property: "width";
                        to: 30;
                        duration: 500 }

    MouseArea { anchors.fill: parent; onClicked: animation.running = true }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

过渡

用来定义过渡动画

状态

属性配置集合：StateGroup可以支持非Item类型，State只能用于Item类型

1. AnchorChanges：锚定方式改变
2. ParentChange：父对象改变
3. PropertyChanges：属性改变
4. StateChangeScript：状态中执行脚本

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"

    states: [
        State {
            name: "NORMAL"
            PropertyChanges { target: signal; color: "green"}
            PropertyChanges { target: flag; state: "FLAG_DOWN"}
        },
        State {
            name: "CRITICAL"
            PropertyChanges { target: signal; color: "red"}
            PropertyChanges { target: flag; state: "FLAG_UP"}
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18