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

相关推荐
二进制人工智能6 小时前
【QT5 网络编程示例】TCP 通信
网络·c++·qt·tcp/ip
bjxiaxueliang8 小时前
一文详解QT环境搭建:Windows使用CLion配置QT开发环境
开发语言·windows·qt
此刻我在家里喂猪呢8 小时前
qt介绍tcp通信
qt·tcp/ip
oracleworm10 小时前
Qt 代理
qt·代理模式
Winner130010 小时前
Qt中数据共享
开发语言·qt
学习是种信仰啊10 小时前
QT图片轮播器实现方法二(QT实操2)
开发语言·c++·qt
疾风铸境10 小时前
Qt5.14.2+Cmake使用mingw64位编译opencv4.5成功图文教程
开发语言·qt
fengbingchun12 小时前
Qt中的事件循环
qt
秋风&萧瑟14 小时前
【QT】练习1
开发语言·qt·命令模式
byxdaz15 小时前
Qt中绘制不规则控件
开发语言·qt