Qt Quick 中的动画和过渡

动画和过渡类型

过渡 - 动态状态变化过程中的过渡动画
顺序动画 - 顺序运行动画
并行动画 - 并行运行动画
行为 - 指定属性更改的默认动画
属性操作 - 在动画过程中设置即时属性更改
暂停动画 - 在动画中引入暂停
平滑动画 - 允许属性平滑地跟踪值
弹簧动画 - 允许属性以弹簧运动的方式跟踪值
脚本操作 - 在动画过程中运行脚本

基于数据类型对属性进行动画的类型

锚点动画	动画锚点值的变化
颜色动画	动画颜色值的变化
数字动画	动画的类型为qreal的值的变化
父对象动画	动画父对象的变化
路径动画	沿路径动画项目
属性动画	动画属性值的变化
旋转动画	动画旋转值的变化
三维向量动画	动画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}
   }
}

专门属性动画类型比属性动画类型有更有效的实现。它们用于设置不同 QML 类型的动画，例如 int、color 和旋转。同样，父对象动画可以动画父对象变化。

有关不同动画属性的信息，请参阅控制动画部分。

使用预定义目标和属性

在前一个例子中，需要指定属性动画和数字动画对象的特定目标和属性值来指定应动画化的对象和属性。这可以通过使用<Animation> on <Property>语法来避免，该语法指定动画应作为属性值源应用。

以下是使用此语法指定的两个属性动画对象

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>语法，所以不需要将属性动画对象的目标值设置为rect，也不需要将x和y设置为属性值。

这也可以用于分组动画，以确保组内所有动画都应用于相同的属性。例如，前面的示例可以使用顺序动画首先将矩形的颜色动画化为黄色，然后动画化为蓝色

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属性上指定，因此其子颜色动画对象也将自动应用于此属性，不需要指定目标或属性动画值。

状态变化期间的过渡

Qt Quick 状态是属性配置，其中某个属性可能具有不同的值以反映不同的状态。状态更改引入了突发的属性变化；动画平滑地过渡以产生视觉上令人愉悦的状态变化。

过渡类型可以包含动画类型来插值状态变化引起的属性变化。要将过渡分配给对象，将其绑定到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}
        }

将默认动画作为行为

默认属性动画是通过使用行为动画来设置的。在行为类型中声明的动画应用于属性，并动画任何属性值的变化。但是，行为类型有一个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 示例 - 动画。