QML —— 顺序动画,足球落地示例(附完整源码)

效果

源码
cpp 复制代码
import QtQuick 2.12
import QtQuick.Window 2.12

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

    MouseArea
    {
        anchors.fill: parent
        onClicked:{setSequentialAnimationState(true)}
    }

    Component.onCompleted:{setSequentialAnimationState(false)}
    Component.onDestruction:{setSequentialAnimationState(false)}

    function setSequentialAnimationState(b)
    {
        if(b)
        {
            if(!sequentialAnimation.running){sequentialAnimation.start()}
        }
        else
        {
             if(sequentialAnimation.running){sequentialAnimation.stop()}
        }
    }

    Image
    {
        id: ballImg
        source: "ball.jpeg"
        scale: 0.3
        y: -height
        anchors.horizontalCenter: parent.horizontalCenter

        SequentialAnimation on y
        {
            id: sequentialAnimation
            loops: Animation.Infinite
            NumberAnimation
            {
                id: fallNumberAnimation
                to: ballImg.parent.height - ballImg.height
                easing.type: Easing.OutBounce
                duration: 2000
            }

            PauseAnimation {duration: 1000}

            NumberAnimation
            {
                to: -ballImg.height
                easing.type: Easing.OutQuad
                duration: 500
            }

        }
    }
}

关注

笔者 - jxd

相关推荐
mahuifa11 小时前
混合开发环境---使用编程AI辅助开发Qt
人工智能·vscode·qt·qtcreator·编程ai
冷眼看人间恩怨11 小时前
【Qt笔记】QDockWidget控件详解
c++·笔记·qt·qdockwidget
云空16 小时前
《QT 5.14.1 搭建 opencv 环境全攻略》
开发语言·qt·opencv
小老鼠不吃猫17 小时前
力学笃行(二)Qt 示例程序运行
开发语言·qt
晓纪同学19 小时前
QT创建一个模板槽和信号刷新UI
开发语言·qt·ui
爱码小白20 小时前
PyQt5 学习方法之悟道
开发语言·qt·学习方法
人才程序员1 天前
QML z轴(z-order)前后层级
c语言·前端·c++·qt·软件工程·用户界面·界面
学习BigData1 天前
【使用PyQt5和YOLOv11开发电脑屏幕区域的实时分类GUI】——选择检测区域
qt·yolo·分类
yerennuo2 天前
FFmpeg库之ffmpeg
qt·ffmpeg
冷眼看人间恩怨2 天前
【Qt笔记】QComboBox控件详解
c++·笔记·qt