qml Animation三种范例

qml Animation三种实例
先创建一个块，方便复用：
import QtQuick 2.0

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

    property bool framed : false

    Rectangle {
        anchors.fill: parent
        color: "white"
        visible: root.framed
    }

    Column {
        x: 8; y: 8
        id: container
        Image {
            id: image
        }
        Text {
            id: label
            width: image.width
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            color: "#e0e0e0"
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}
//三种用法
//TryAnimation
import QtQuick 2.0

Image {
    id: root
    source: "images/bg.gif"
//用法1：图像向y方向移动，从原始位置200到40，经过4000毫秒
    Tanimation{
        id: rocket1
        x: 40;y: 200
        iwidth: 60
        iheight: 60
        source: "images/rocketh.png"
        text: "animation on property"
        NumberAnimation on y{
            to : 40;duration: 4000
        }
    }
//用法2：在用法1的基础上增加鼠标点击事件触发图像移动，同样位置从200到40
    Tanimation{
        id: rocket2
        x:152;y:200
        source: "images/rocketh.png"
        iwidth: 60
        iheight: 60
        text: "behavior on property"
        Behavior on y {
            NumberAnimation{duration: 4000}
        }
        onClicked: y = 40
//        onClicked: y = 40+Math.random()*(200-40)
//        enabled: false
    }
//用法3：这种方法是最全面的，将所有的变化都放进Animation对象中，通过start（）或restart（）等可对图像进行重复执行
    Tanimation{
        id: rocket3
        x:262;y:200
        source: "images/rocketh.png"
        iwidth: 60
        iheight: 60
        text: "standalone animation"
//        onClicked: anim.restart()
        onClicked: anim.start()
        NumberAnimation{
            id: anim
            target: rocket3
            properties: "y"
            from: 200
            to:40
            duration: 4000
            running: area.pressed
        }
        MouseArea{
            id: area
        }
    }
}
//以上只是笔者学习animation中做的三个例子，并非全部用法。
------解决思路----------------------
Qt 5.5除了Animation这个基类，又出现了Animator这个类，而这个类和前者在实现上有所不同。