中的动画与过渡效果Qt Quick

动画与过渡类型

Transition - 在状态变化时执行过渡动画
SequentialAnimation - 按顺序运行动画
ParallelAnimation - 并行运行动画
Behavior - 为属性变化指定默认动画
PropertyAction - 在动画过程中设置属性立即更改
PauseAnimation - 在动画中引入暂停
SmoothedAnimation - 允许属性平滑地追踪某个值
SpringAnimation - 允许属性以弹簧般的运动方式跟踪值
ScriptAction - 在动画过程中运行脚本

根据数据类型对属性进行动画处理的类型

AnchorAnimation	对锚点值的变化进行动画处理
ColorAnimation	对颜色值的变化进行动画处理
NumberAnimation	对 qreal 类型值的变化进行动画处理
ParentAnimation	对父级值的变更进行动画效果
PathAnimation	沿路径对项目进行动画效果
PropertyAnimation	对属性值的变化进行动画处理
RotationAnimation	对旋转值的变化进行动画处理
Vector3dAnimation	对 QVector3d 值的变化进行动画处理

通过将动画类型应用于属性值来创建动画。动画类型会对属性值进行插值，从而实现平滑过渡。此外，状态转换也可将动画分配给状态变化。

要创建动画，请根据待动画化的属性的类型选择合适的动画类型，并根据所需的行为类型应用该动画。

触发动画

有多种方法可以为对象设置动画。

直接属性动画

通过将动画对象应用于属性值，可以创建动画，使属性随时间逐渐变化。这些属性动画通过在属性值变化之间进行插值，实现平滑的运动效果。属性动画提供了时间控制功能，并可通过缓动曲线实现不同的插值效果。

Rectangle {
    id: flashingblob
    width: 75; height: 75
    color: "blue"
    opacity: 1.0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            animateColor.start()
            animateOpacity.start()
        }
    }

    PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}

    NumberAnimation {
        id: animateOpacity
        target: flashingblob
        properties: "opacity"
        from: 0.99
        to: 1.0
        loops: Animation.Infinite
        easing {type: Easing.OutBack; overshoot: 500}
   }
}

专用属性动画类型的实现比PropertyAnimation 类型更高效。它们用于为不同的QML类型（如int 、color 和旋转）设置动画。同样，ParentAnimation 可以对父级变化进行动画处理。

有关不同动画属性的更多信息，请参阅“控制动画”一节。

使用预定义目标和属性

在上一个示例中，PropertyAnimation 和NumberAnimation 对象需要指定特定的target 和properties 值，以确定应进行动画处理的对象和属性。通过使用<Animation> on <Property>语法，可以避免这种情况，该语法指定将动画作为属性值的来源。

以下是两个使用此语法指定的PropertyAnimation 对象：

import QtQuick 2.0

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

    PropertyAnimation on x { to: 100 }
    PropertyAnimation on y { to: 100 }
}

矩形加载完成后，动画即刻开始，并将自动应用于其x 和y 属性值。由于采用了<Animation> on <Property>语法，因此无需将PropertyAnimation 对象的target 值设置为rect ，也无需将property 值分别设置为x 和y 。

分组动画也可以使用此方法，以确保组内所有动画都应用于同一属性。例如，前面的示例可以改用SequentialAnimation 来使矩形的color 先变为黄色，然后变为蓝色：

import QtQuick 2.0

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

    SequentialAnimation on color {
        ColorAnimation { to: "yellow"; duration: 1000 }
        ColorAnimation { to: "blue"; duration: 1000 }
    }
}

由于已通过<Animation> on <Property>语法在color 属性上指定了SequentialAnimation 对象，因此其子ColorAnimation 对象也会自动应用于该属性，无需指定target 或property 动画值。

状态变化过程中的过渡效果

Qt Quick States 是指属性配置中，某个属性可能具有不同的值以反映不同的状态。状态变化会导致属性的突变；而动画则通过平滑过渡，使状态变化在视觉上更加美观。

Transition 类型可包含动画类型，用于对状态变化引发的属性变化进行插值处理。要将过渡效果分配给对象，请将其绑定至transitions 属性。

一个按钮可能有两种状态：用户点击按钮时的pressed 状态，以及用户松开按钮时的released 状态。我们可以为每种状态分配不同的属性配置。一个过渡效果会将pressed 状态平滑过渡到released 状态。同样，从released 状态过渡到pressed 状态时，也会有相应的动画效果。

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        onPressed: button.state = "PRESSED"
        onReleased: button.state = "RELEASED"
    }

    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]

    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

将to 和from 属性绑定到状态名称上，即可为该状态的切换分配特定的过渡效果。对于简单或对称的过渡，将to 属性设置为通配符“* ”，表示该过渡适用于任何状态切换。

    transitions:
        Transition {
            to: "*"
            ColorAnimation { target: button; duration: 100}
        }

默认动画作为行为

默认属性动画是通过行为动画设置的。在Behavior 类型中声明的动画适用于该属性，并会对任何属性值的变化进行动画处理。不过，Behavior类型拥有一个enabled 属性，用于有针对性地启用或禁用行为动画。

一个球体组件可能会在其x 、y 和color 属性上分配行为动画。该行为动画可配置为模拟弹性效果。实际上，每当球体移动时，此行为动画都会将弹性效果应用到这些属性上。

Rectangle {
    width: 75; height: 75; radius: width
    id: ball
    color: "salmon"

    component BounceAnimation : NumberAnimation {
       easing {
          type: Easing.OutElastic
          amplitude: 1.0
          period: 0.5
       }
    }

    Behavior on x {
        BounceAnimation {}
    }
    Behavior on y {
        BounceAnimation {}
    }
    Behavior on color {
        ColorAnimation { target: ball; duration: 100 }
    }
}

将行为动画分配给属性有多种方法。Behavior on <property> 声明是将行为动画分配给属性的便捷方式。

请参阅《Qt Quick 示例——动画》以了解行为动画的演示。

并行或顺序播放动画

动画可以并行或顺序运行。并行动画会同时播放一组动画，而顺序动画则按顺序依次播放一组动画：一个接一个。在SequentialAnimation 和ParallelAnimation 中对动画进行分组后，这些动画将按顺序或并行方式播放。

横幅组件可能需要依次显示多个图标或标语。opacity 属性可转换为1.0 ，表示不透明对象。使用SequentialAnimation 类型时，不透明度动画将在前一个动画结束后播放。ParallelAnimation 类型则会同时播放这些动画。

Rectangle {
    id: banner
    width: 150; height: 100; border.color: "black"

    Column {
        anchors.centerIn: parent
        Text {
            id: code
            text: "Code less."
            opacity: 0.01
        }
        Text {
            id: create
            text: "Create more."
            opacity: 0.01
        }
        Text {
            id: deploy
            text: "Deploy everywhere."
            opacity: 0.01
        }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: playbanner.start()
    }

    SequentialAnimation {
        id: playbanner
        running: false
        NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
    }
}

一旦将单个动画放入SequentialAnimation 或ParallelAnimation 中，就无法再单独启动或停止它们。序列动画或并行动画必须作为一个整体进行启动和停止。

SequentialAnimation 类型对于播放过渡动画也很有用，因为在过渡过程中，动画是并行播放的。

控制动画

控制动画的方法有多种。

动画播放

所有动画类型均继承自Animation 类型。无法直接创建Animation 对象；而是由该类型为动画类型提供了基本属性和方法。动画类型具有start() 、stop() 、resume() 、pause() 、restart() 以及complete() 等方法——所有这些方法均用于控制动画的执行。

缓动

缓动曲线定义了动画在起始值和结束值之间如何进行插值。不同的缓动曲线可能会超出定义的插值范围。缓动曲线简化了弹跳效果、加速、减速以及循环动画等动画效果的创建。

一个 QML 对象的每个属性动画都可以使用不同的缓动曲线。此外，还有各种参数用于控制曲线，其中一些参数仅适用于特定的曲线。有关缓动曲线的更多信息，请访问easing 文档。

缓动示例直观地演示了每种不同的缓动类型。

其他动画类型

此外，QML 还提供了其他几种对动画有用的类型：

PauseAnimation：允许在动画过程中暂停
ScriptAction: 允许在动画过程中执行 JavaScript，并可与 `StateChangeScript ` 配合使用以复用现有脚本
PropertyAction: 在动画过程中立即更改属性，而不对属性变化进行动画处理

这些是针对不同属性类型进行动画处理的专用动画类型

SmoothedAnimation: 一种特殊的NumberAnimation ，当目标值发生变化时，可提供平滑的动画过渡
SpringAnimation：提供类似弹簧的动画效果，并具有mass 、damping 等专用属性，以及epsilon
ParentAnimation：用于父元素变更的动画效果（参见ParentChange ）
AnchorAnimation: 用于锚点变化的动画效果（参见AnchorChanges ）

不支持在“过渡”或“行为”之间共享动画实例，这可能会导致未定义的行为。在下面的示例中，对矩形位置的更改很可能无法正确地进行动画处理。

Rectangle {
    // NOT SUPPORTED: this will not work correctly as both Behaviors
    // try to control a single animation instance
    NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }
    Behavior on x { animation: anim }
    Behavior on y { animation: anim }
}

最简单的解决方法是针对两个“行为”分别重复使用NumberAnimation 。如果重复的动画较为复杂，您也可以考虑创建一个自定义动画组件，并将一个实例分配给每个“行为”，例如：

Rectangle {
    component MyNumberAnimation : NumberAnimation {
        duration: 300; easing.type: Easing.InBack
    }
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}

另请参阅 “Qt Quick 示例 - 动画”。

在状态中使用Qt Quick 行为精灵动画

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.