第三章 动态元素类型-----触发动画

应用动画
可以通过多种方式执行动画：
属性上的动画：在元素完全加载后自动运行
属性上的行为：属性值更改时自动运行
独立动画：使用start()显式启动动画或将running设置为true时运行

ClickableImageV2.qml

import QtQuick

Item {
    id:root
    width:container.childrenRect.width
    height:container.childrenRect.height
    property alias text:label.text
    property alias source:image.source
    signal clicked

    Column{
        id:container
        Image{
            id:image
        }

        Text{
            id:label
            width:image.width
            wrapMode:Text.WordWrap
            horizontalAlignment: Text.AlignHCenter
            color:"#ececec"
        }
    }

    MouseArea{
        anchors.fill: parent
        onClicked: root.clicked()
    }
}

import QtQuick
import QtQuick.Window

Window {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color:"gray"


    ClickableImageV2{
        id:qq1
        x:40;y:root.height-height
        source:"../images/qq.png"
        text:"animation on property"

        NumberAnimation on y{
            to:40
            duration: 3000
        }
    }


    ClickableImageV2{
        id:qq2
        x:40+qq1.width;y:root.height-height
        source:"../images/qq.png"
        text:"animation on property"

        Behavior on y{
            NumberAnimation{duration:3000}
        }
        onClicked: y = 40
    }

    ClickableImageV2{
        id:qq3
        x:qq2.x+qq1.width+20;y:root.height-height
        source:"../images/qq.png"
        text:"animation on property"
        //onClicked:anim.restart()
        NumberAnimation{
            id:anim
            target:qq3
            from:root.height-qq3.height
            to:40
            duration: 3000
            property:"y"
            running: area.pressed
        }

        MouseArea{
            id:area
            anchors.fill: parent
        }
    }
}