qt qml中PropertyAnimation的几种使用方法

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.2
import QtQuick.Controls 1.1

ApplicationWindow {
    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"
        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"
        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"
        360
        height:50
        id:rect

        MouseArea{
            anchors.fill: parent
            onClicked:
                PropertyAnimation{
                    target:rect ;  properties:"y"
                    to:250
                    duration:1000
                }

        }
    }
    */
    /*
    Column{
        Rectangle{
            color:"blue"
            360
            height:50
            TextInput{
                anchors.fill: parent
            }
        }

        Rectangle{
            color:"red"
            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的几种使用方法