QML动画 十一

动画在Qt帮助手册中查看QML Animation关键字

 

QML中的动画实现通对象的属性值随着时间而改变。

1.动画类型

    一个动画创建方式取决于它所需要的背景。以Rectangle的运动为例，就是改变它的x或者是y属性的值，其动画的语义的不同依赖于是否要创建以下几点：

• Rectangle一旦创建该动画就要将其移动到一个已知的位置
• 动画只有在Rectangle被外部源移动时才会触发。例如，当单击鼠标时，产生动画移动到鼠标位置。
• 只有在接收到一个特定的信号后才触发该动画
• 作为一个独立的动画，虽然没有绑定Rectangle运动，但是可以从脚本中进行开启和停止。
• 只有状态改变时才会触发该动画。

为了支持这些不同类型的动画方式，QML提供了多种方式来定义一个动画：

• 使用属性值源来创建一个动画，可以立即为一个指定的属性使用动画；
• 使用行为动画，当一个属性改变值时触发
• 在一个信号处理器中创建，当接收到一个信号时触发
• 作为一个独立动画，可以在脚本中进行开始、停止。也可以重新绑定到不同的对象。
• 使用切换，在不同状态间提供动画。

    下面分别介绍这些方式。在这里都会使用到PropertyChanges元素，它可以用来创建一个动画，后面会对其详细介绍。

 

2.动画作为属性值的来源

    一个动画被应用为属性值源，要使用“动画on属性”语法。

    Rectangle{
        id:window
        width:40; height:50
        color:"red"
        PropertyAnimation on x {to:50; duration:1000;loops:Animation.Infinite}
        PropertyAnimation on y {to:50; duration:1000;loops:Animation.Infinite}
}

　　在Rectangle的x和y属性上应用了PropertyAnimation,在1000ms内使用动画变化到50.此时，rectangl一旦加载完毕，动画就会开启。设置起始值使用from. loops指定为animation.infinite表明该动画是无限循环的。指定一个动画为属性值源，在一个对象加载完成后立即就对一个属性使用动画变化到一个指定的值的情况是非常有用的。

 

3. 行为动画

   经常在一个特定的属性值改变时要应用一个动画，在这种情况下，可以使用一个Behavior为一个属性改变指定一个默认的动画。

Window {
    visible: true
    Rectangle{
        id:window
        width:40; height:50
        color:"red"
        Behavior on x {PropertyAnimation{duration:50}}
        Behavior on y {PropertyAnimation{duration:50}}
    }

    MouseArea{
    anchors.fill: parent;
    onClicked: {window.x = mouse.x; window.y = mouse.y}
    }
}

　　rectangle拥有一个behavior对象应用到了它的x和y属性。每当这些属性改变时，在behavior中的propertyanimiation对象就会应用到这些属性上，从而使rectangle使用动画效果移动到一个新的位置。行为动画实在每次响应一个值的变化时触发的。对这些属性的任何改变都会触发它们的动画。如果x，y绑定到了其他属性上，这些属性改变时也会触发动画。。

 

4. 在信号处理器中的动画

    可以在一个信号处理器中创建一个动画，并在接收到信号时触发。

 Rectangle{
        id:window
        width:40; height:50
        color:"red"
    }
    MouseArea{
    anchors.fill: parent;
    onClicked:PropertyAnimation {target:window; properties: "x,y";
                                 to:50;duration:1000}
    }

　　因为动画没有绑定到一个特定的对象或者属性，所以必须指定target和property属性的值。而且还需要使用to属性来指定新的x和y的值。

 

5 独立动画

   动画也可以像一个普通的qml对象一样进行创建，而不需要绑定到任何特定的对象和属性。属性既是ProperityAnimation

Rectangle{
        id:rect
        width:40; height:50
        color:"red"
    }
    PropertyAnimation{
    id:animation
    target: rect
    properties: "x,y"
    duration:1000;
    }
    MouseArea{
    anchors.fill: parent;
    onClicked:{
        animation.to = 50;
        animation.running = true;
    }
    }

　　一个独立的动画对象默认是没有运行的，必须使用running属性或者start()和stop()函数来明确地运行它。因为动画没有绑定到一个特殊的对象或属性上，所以必须定义target和property属性的值。也需要使用to属性来指定新的x和y的值。独立动画在不是对一个单一对象属性进行动画而且动画需要明确开始和停止的情况下是非常有用的。

6.切换

   切换是用来设置当状态改变时的动画，要创建一个切换，需要定义一个Transition对象，然后将其添加到项目的transitions属性。

Rectangle{
        id:rect
        width:40; height:50
        color:"red"
        MouseArea{
        anchors.fill: parent;
        onClicked:{
            rect.state = "moved"
        }
        }
        states: State{
        name:"moved"
        PropertyChanges {
            target: rect
            x:50;y:50;
        }
        }
        transitions:Transition{
            PropertyAnimation{properties: "x,y";duration:1000}
        }
}

　　注意，这里几个对象都是rectangle的子对象。前面的例子都是在同一层面。在moved状态中，propertychanges对象定义了当Rectangle在该状态时其位置应该改变为（50 50）。当Rectangle改变到moved状态时，Transiton将被触发，切换的PropertyAnimation将会使用动画将x.y属性改变到它们的新值。注意这里并没有为Property设置from和to属性的值，在状态改变的开始之前和结束之后会自动设置这些属性为x和Y的属性值。另外，propertyanimation并不需要指定target对象，这样任何对象的x和y值在状态改变时进行更改都会使用动画。不过也可以指定一个target来为特定的对象使用动画。在Transiton中的顶级动画会并行运行，要想一个接一个地运行，可以使用SequentialAnimation。

 

另外还有 动画元素、属性动画元素、组合动画等可以在帮助文档中查看详细介绍。

弹动效果Flickable和翻转效果flipable。

查看示例程序：Flipable example。