qt qml中PropertyAnimation的几种用法

来源：互联网发布：windows web压力测试编辑：程序博客网时间：2024/06/05 16:51

qml文章 qt qml中PropertyAnimation的几种用法

动画应用场景有下面几种：

首先假设一个Rectangle，动画是要改变它的x和y值

1，Rectangle一旦被创建，就要移动到一个特定的位置

2，动画只有在某一个特定的外部行为触发时候才会被触发，例如，鼠标单击某一个控件时候，产生动画，使目标移动到指定的位置

3，只有在某一个特定的信号后才触发

4，做为一个独立的动画，虽然没有绑定rectangle的运动，但是可以在脚本中加载，开始和停止

5，只有在状态改变时候才会触发

6，只有在某一个属性改变时候才触发，无论这个属性是通过什么样的方法来改变的

7，在一个特定的信号处理器中创建，当接收到对应的信号时候就触发，类似于3

下面分别用代码来看几种实现方法：

【1】首先是对第一种场景

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

Rectangle一旦被创建，就立刻从（0，0）坐标移动到（50，250），在一秒时间内

【2】第二种场景代码，行为动画，在某一个属性值发生变化时候触发

    Rectangle{        color:"red"        width:360        height:50        id:rect        Behavior on x {            PropertyAnimation{ duration : 1000 }        }        Behavior on y {            PropertyAnimation{ duration : 1000 }        }    }    MouseArea{        anchors.fill: parent        onClicked:{            rect.x=mouse.x;            rect.y=mouse.y;        }    }

这段代码实现了，在点击了屏幕上的一点后，rect会在一秒的时间内触发动画，到达鼠标所点击的位置，因为在onClicked里面，我们修改了rect的x和y值。

【3】在信号处理器中触发动画

   Rectangle{        color:"red"        width:360        height:50        id:rect        MouseArea{            anchors.fill: parent            onClicked:                PropertyAnimation{                    target:rect ;  properties:"y"                    to:250                    duration:1000                }        }    }

当点击rect的时候，就会触发动画，使rect的y从0运动到250

【4】动画作为一个独立的动画，可以像创建普通的QML对象一样创建，而不需要绑定特定的对象和属性。

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

一个独立的动画对象默认是没有运行的，必须使用running属性，或者start() stop（）来运行它。

【5】切换，切换用来设置当状态发生改变时候，需要创建一个切换，Transition对象。然后把它添加到对象的transition属性下面，代码

 Rectangle{        Rectangle{            color:"gray"            y:100            width:360            height:80            id:rect1        }            //切换状态        Rectangle{            color:"steelblue"            width:360            height:80            id:rect                MouseArea{                anchors.fill: parent                onClicked: {                    console.log("dddd")                    rect.state="move"                    rect1.height=50                    rect1.state="move"                }            }                    states:[                    State{                    name:"move"                    PropertyChanges{                        target:rect                        y:250                    }                    PropertyChanges{                        target:rect1                        y:330                    }                }                    ]                    transitions: [                    Transition {                        PropertyAnimation{                            properties: "y"                            duration:5000                        }                    }                ]            }    }

当点击rect的时候，rect和rect1的状态切换到move状态，move状态中的两个PropertyChanges对象定义了rect和rect1的属性改变值，这时候Transition会自动被执行，Transition里面的PropertyAnimation对象会自动将rect和rect1的属性值y切换到对应的值，这里并没有设置from和to值，在状态开始和结束的时候已经设置了他们的值。另外propertyAnimation并不需要指定target属性，这样任何对象的y值在状态切换时候都会使用这个动画，不过也可以指定一个target来使用这个动画，另外在Transition里面的东辉会并行执行，如果要串行执行，可以使用SequentiaAnimation.这个代码也可以这样来写：

Rectangle{        Rectangle{            color:"gray"            y:100            width:360            height:80            id:rect1        }        //切换状态        Rectangle{            color:"steelblue"            width:360            height:80            id:rect            MouseArea{                anchors.fill: parent                onClicked: {                    console.log("dddd")                    rect.state="move"                    rect1.height=50                    rect1.state="move"                }            }                states:[                    State{                    name:"move"                }                ]                transitions: [                    Transition {                        PropertyAnimation{                            target:rect                            from:0                            to:250                            properties: "y"                            duration:5000                        }                        PropertyAnimation{                            target:rect1                            properties: "y"                            from:100                            to:330                            duration:2000                        }                    }                ]        }    }

[6]属性动画元素

PropertyAnimation元素是用来为属性提供动画最基本动画元素，他可以为real ,int ,color,rect,point,sized,vector3d来提供动画设置。它可以被NumberAnimation,ColorAnimation,RotationAnimation,Vector3dAnimation等继承，他们分别提供了更高效的属性动画实现方式。并且任何基于PropertyAnimation的对象都可以设置easing属性来动画中使用的缓和曲线。

例如：

 Rectangle{            color:"gray"            y:100            width:360            height:80            id:rect1            ColorAnimation on color { from: "white"; to: "red"; duration: 5000 }            RotationAnimation on rotation{                from:0                to:360                direction: RotationAnimation.Clockwise                duration:5000            }        }

下面是代码整体合起来和运行效果：

import QtQuick 2.2import QtQuick.Controls 1.1ApplicationWindow {    visible: true    width: 360    height: 480    title: qsTr("Hello World")    menuBar: MenuBar {        Menu {            title: qsTr("File")            MenuItem {                text: qsTr("Exit")                onTriggered: Qt.quit();            }        }    }    Rectangle{        Rectangle{            color:"gray"            y:100            width:360            height:80            id:rect1            ColorAnimation on color { from: "white"; to: "red"; duration: 5000 }            RotationAnimation on rotation{                from:0                to:360                direction: RotationAnimation.Clockwise                duration:5000            }        }        //切换状态        Rectangle{            color:"steelblue"            width:360            height:80            id:rect            MouseArea{                anchors.fill: parent                onClicked: {                    console.log("dddd")                    rect.state="move"                    rect1.height=50                    rect1.state="move"                }            }                states:[                    State{                    name:"move"                //    PropertyChanges{                 //       target:rect                     //   y:250                 //   }                 //   PropertyChanges{                 //       target:rect1                    //    y:330                 //   }                }                ]                transitions: [                    Transition {                        PropertyAnimation{                            target:rect                            from:0                            to:250                            properties: "y"                            duration:5000                             easing.type: Easing.OutBounce                        }                        PropertyAnimation{                            target:rect1                            properties: "y"                            from:100                            to:330                            duration:2000                            easing.type: Easing.OutBounce                        }                    }                ]        }    }    /*    //初始化就触发的动画    Rectangle{        color:"red"        width:360        height:50        PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite }        PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite }    }    */    /*    Rectangle{        color:"red"        width:360        height:50        id:rect        Behavior on x {            PropertyAnimation{ duration : 1000 }        }        Behavior on y {            PropertyAnimation{ duration : 1000 }        }    }    MouseArea{        anchors.fill: parent        onClicked:{            rect.x=mouse.x;            rect.y=mouse.y;        }    }    */    /*    Rectangle{        color:"red"        width:360        height:50        id:rect        MouseArea{            anchors.fill: parent            onClicked:                PropertyAnimation{                    target:rect ;  properties:"y"                    to:250                    duration:1000                }        }    }    */    /*    Column{        Rectangle{            color:"blue"            width:360            height:50            TextInput{                anchors.fill: parent            }        }        Rectangle{            color:"red"            width:360            height:50            id:rect            PropertyAnimation{                id:animation                target:rect                properties: "width"                duration: 1000            }            MouseArea{                anchors.fill: parent                onClicked: {                    animation.to=50                    animation.running=true;                }            }        }    }    */    Text {        text: qsTr("Hello World")        anchors.centerIn: parent    }}

红色的巨型首先经过一个360旋转和变色，然后点击蓝色的巨型，就会像弹簧一样落下来。

刚刚提到Transition中的组合动画，ParalleAnimation和SequentialAnimation分别提供并行和串行的动画表现方案。

查看更多qml文章 qt qml中PropertyAnimation的几种用法

5 0