Animation and Transitions in Qt Quick

Animation and Transitions Types

• Transition - 在状态变化期间动画转换
• SequentialAnimation - 按顺序运行动画
• ParallelAnimation - 并行运行动画
• Behavior - 为属性更改指定一个默认动画
• PropertyAction - 设置动画期间的即时属性更改
• PauseAnimation - 在动画中引入暂停
• SmoothedAnimation - 允许属性平滑地跟踪值
• SpringAnimation - 允许属性以类似弹簧的运动跟踪值
• ScriptAction - 在动画期间运行脚本

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

AnchorAnimation	使锚值的变化具有动画效果
ColorAnimation	动画颜色值的变化
NumberAnimation	动画改变qreal类型的值
ParentAnimation	动画父值的变化
PathAnimation	使物品沿路径移动
PropertyAnimation	激活属性值的更改
RotationAnimation	动画旋转值的变化
Vector3dAnimation	动画改变QVector3d值

动画是通过将动画类型应用到属性值来创建的。动画类型将插入属性值以创建平滑过渡。同样，状态转换可以为状态更改分配动画。

要创建动画，请为要动画的属性的类型使用适当的动画类型，并根据所需的行为类型应用动画。

Triggering Animations

有几种方法可以为一个对象设置动画。

Direct Property Animation

动画是通过将动画对象应用到属性值上，随着时间的推移逐渐改变属性来创建的。这些属性动画通过在属性值变化之间插入值来应用平滑的移动。属性动画提供了时间控制，并允许通过缓和曲线进行不同的插值。

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和rotation。类似地，ParentAnimation可以对父元素的更改进行动画处理。

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

Using Predefined Targets and Properties

在前面的示例中，PropertyAnimation和NumberAnimation对象需要指定特定的目标和属性值来指定应该动画的对象和属性。这可以通过在语法上使用<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对象的目标值设置为rect，也没有必要将属性值设置为x和y。

这也可以用于分组动画，以确保组中的所有动画都应用到相同的属性。例如，前面的例子可以使用SequentialAnimation让矩形的颜色先变成黄色，然后变成蓝色:

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对象在color属性上已经使用<Animation> on <Property>语法指定，它的子ColorAnimation对象也会自动应用到这个属性上，不需要指定目标或属性动画值。

Transitions During State Changes

Qt Quick States是属性配置，其中属性可能具有不同的值以反映不同的状态。状态变化导致性质突变;动画平滑过渡，产生视觉上吸引人的状态变化。

过渡类型可以包含动画类型，以插值由状态更改引起的属性更改。要将转换分配给一个对象，请将它绑定到transitions属性。

一个按钮可能有两个状态，用户单击按钮时的按下状态和用户释放按钮时的释放状态。我们可以为每个状态分配不同的属性配置。转换将动画化从按下状态到释放状态的变化。同样，在从释放状态到按下状态的变化过程中也会有一个动画。

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 to属性设置为通配符“*”表示转换适用于任何状态更改。

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

Default Animation as Behaviors

默认属性动画是使用行为动画来设置的。在行为类型中声明的动画应用于属性，并动画任何属性值的变化。然而，行为类型有一个enabled属性来有意地启用或禁用行为动画。

一个球组件可能有一个分配给它的x、y和颜色属性的行为动画。可以设置行为动画来模拟弹性效果。实际上，当球移动时，这个行为动画将对属性应用弹性效果。

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

    Behavior on x {
        NumberAnimation {
            id: bouncebehavior
            easing {
                type: Easing.OutElastic
                amplitude: 1.0
                period: 0.5
            }
        }
    }
    Behavior on y {
        animation: bouncebehavior
    }
    Behavior {
        ColorAnimation { target: ball; duration: 100 }
    }
}

将行为动画赋值给属性有几种方法。<属性>上的Behavior声明是一种将行为动画赋值到属性上的方便方法。

有关行为动画的演示，请参阅Qt Quick Examples - Animation。

Playing Animations in Parallel or in Sequence

动画可以并行或顺序运行。并行动画将同时播放一组动画，而顺序动画将依次播放一组动画。在SequentialAnimation和ParallelAnimation中分组动画将按顺序或并行播放动画。

横幅组件可以一个接一个地显示几个图标或口号。不透明度属性可以转换为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类型对于播放过渡动画也很有用，因为动画是在过渡内部并行播放的。

Controlling Animations

有不同的方法来控制动画。

Animation Playback

所有动画类型都继承自动画类型。不可能创建动画对象;相反，该类型提供了动画类型的基本属性和方法。动画类型有start()、stop()、resume()、pause()、restart()和complete()——所有这些方法都控制动画的执行。

Easing

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

QML对象对于每个属性动画可能有不同的缓动曲线。也有不同的参数来控制曲线，其中一些是特定曲线所独有的。有关缓动曲线的更多信息，请访问缓动文档。

简化示例直观地展示了每种不同的简化类型。

Other Animation Types

此外，QML还提供了一些其他类型的动画:

PauseAnimation:启用动画期间的暂停

ScriptAction:允许JavaScript在动画过程中执行，并且可以与StateChangeScript一起使用，以重用现有的脚本

PropertyAction:在动画过程中立即改变一个属性，而不会使属性发生动画变化

这些是专门的动画类型，动画不同的属性类型

> SmoothedAnimation:一个专门的NumberAnimation，当目标值改变时，它提供平滑的动画变化

> SpringAnimation:提供一个带有质量、阻尼和epsilon等特殊属性的类似弹簧的动画

> ParentAnimation:用于创建父元素变更的动画(参见ParentChange)

> AnchorAnimation:用于动画一个锚的变化(参见AnchorChanges)

Sharing Animation Instances

不支持在转场或行为之间共享动画实例，并可能导致未定义的行为。在下面的例子中，对矩形位置的更改很可能不会被正确地动画化。

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。如果重复动画相当复杂，你也可以考虑创建一个自定义动画组件，并为每个行为分配一个实例，例如:

// MyNumberAnimation.qml
NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }

// main.qml
Rectangle {
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}