动画和过渡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 值，以指定应该动画的对象和属性。使用<Property> 上的 <Animation>语法可以避免这种情况，该语法指定要应用的动画作为属性值源。

下面是两个使用此语法指定的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 值。由于使用了<Property> 上的 <Animation>语法，因此无需将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 }
    }
}

由于SequentialAnimation 对象是使用<Animation> on <Property>语法在color 属性上指定的，因此其子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 属性与状态名称绑定，将为状态变化指定特定的过渡。对于简单或对称转换，将 toto 属性设置为通配符 "*"，表示该转换适用于任何状态变化。

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

作为行为的默认动画

默认属性动画是使用行为动画设置的。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 Examples - Animation。

并行或顺序播放动画

动画可以并行或顺序播放。并行动画将同时播放一组动画，而顺序动画则按顺序播放一组动画：一个接一个。在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动画暂停：可在动画期间暂停
ScriptActionJavaScript：允许在动画期间执行 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 行为与状态雪碧动画

© 2025 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.