Qt 中的动画(Animations)

杨海
2023-12-01

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:在动画效果中执行脚本

动画的使用方式

  1. 在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. 在Behavior中
Rectangle {
    width: 100; height: 100
    color: "red"

    Behavior on x { PropertyAnimation {} }

    MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
}
  1. 作为属性值的source
Rectangle {
    width: 100; height: 100
    color: "red"

    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation { to: 50 }
        PropertyAnimation { to: 0 }
    }
}
  1. 在信号处理器中
MouseArea {
    anchors.fill: theObject
    onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
}
  1. 单独使用
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 }
}

过渡

用来定义过渡动画

状态

属性配置集合: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"}
        }
    ]
}
 类似资料: