【QML学习】触发动画

功能：

共有3张图片，第1张自动往上移动，第2张在窗体点击后才移动，第3张同样是窗体点击后移动，但再次点击后会回到起点处继续运行。

• 效果演示
  
• 代码实现
  新建ClickableImage.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
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            color:"green"
        }
    }

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

在主窗体中调用ClickableImage

import QtQuick

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

    ClickableImage{
        id:cf1
        x:40
        y:root.height-height
        source:"../Image/cf.png"
        text: "This is a Cf girl"

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

    ClickableImage{
        id:cf2
        x:40+cf1.width+30
        y:root.height-height
        source:"../Image/cf.png"
        text: "This is a Cf girl"

        Behavior on y{
            NumberAnimation{duration: 3000}
        }

        onClicked: y=40
    }

    ClickableImage{
        id:cf3
        x:cf2.x+cf1.width+30
        y:root.height-height
        source:"../Image/cf.png"
        text: "This is a Cf girl"
        onClicked: anim.restart()

        NumberAnimation{
            id:anim
            target: cf3
            to:40
            from: root.height-cf3.height
            duration: 3000
            property: "y"
        }

    }
}