【QML学习】触发动画

最新推荐文章于 2024-10-22 22:26:14 发布

原创最新推荐文章于 2024-10-22 22:26:14 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习

Qt 专栏收录该内容

9 篇文章

订阅专栏

文章展示了如何在QtQuick环境中创建一个可点击的图片组件(ClickableImage.qml)，该组件在点击后能执行动画效果。第1张图片自动上移，第2张和第3张图片在点击后移动，其中第3张图片点击后会返回起点并重新开始动画。主要涉及NumberAnimation和Behavior来实现动画行为。

功能：

共有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"
        }

    }
}