怎么使用QML屬性實現(xiàn)足球運動

本篇內(nèi)容主要講解“怎么使用QML屬性實現(xiàn)足球運動”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么使用QML屬性實現(xiàn)足球運動”吧!

1. 所有動畫的基類Animation

Animation動畫類型不能直接在QML文件中使用。它的存在是為了提供一組通用的屬性和方法，可用于繼承自它的所有其他動畫類型。直接使用Animation類型會導(dǎo)致錯誤，類似C++的抽象類。

1.1 Animation類型的常用屬性

• loops:int 設(shè)置當(dāng)前動畫循環(huán)的次數(shù)

• paused:bool 表示當(dāng)前動畫是否暫停，可讀可寫，功能與stop()pause()類似

• running:bool 標(biāo)識當(dāng)前動畫是否正在運行

2. Animation動畫類型的常用子類

下述列出的動畫均是Animation的子類

2.1 錨定轉(zhuǎn)場動畫AnchorAnimation

AnchorAnimation:一般用于在錨定布局發(fā)生變化時候的轉(zhuǎn)場動畫，當(dāng)在轉(zhuǎn)換中使用錨定動畫時，它將對狀態(tài)更改期間發(fā)生的任何錨定更改進(jìn)行動畫處理。這可以通過使用AnchorChanges設(shè)置特定的目標(biāo)項來覆蓋。目標(biāo)屬性。 注意:AnchorAnimation只能在Transition中使用，并與AnchorChange一起使用。它不能用于行為和其他類型的動畫

2.2 并列式動畫ParallelAnimation

定義在并列式動畫對象內(nèi)的幾組動畫在播放時沒有先后順序，都會同時播放，并列式動畫同時也支持內(nèi)嵌序列式動畫組和單個動畫

2.3 序列式動畫SequentialAnimation

與并列式相反，定義在序列式動畫內(nèi)的動畫會按照動畫創(chuàng)建的先后順序依次執(zhí)行，與并列式動畫都可以理解為是單個動畫的容器類動畫。

2.4 屬性動畫PropertyAnimatio

和對象屬性相關(guān)的動畫，可以定義屬性的值按照某種已知曲線從from到to的轉(zhuǎn)換，PropertyAnimation被NumberAnimation，RotationAnimation和ColorAnimation所繼承

2.5 路徑動畫PathAnimation

定義和路徑相關(guān)的動畫，與Path和Transaction共同使用，定義路徑動畫

3. 關(guān)于動畫的重要屬性

3.1 easing動畫緩沖曲線

一般地，在動畫運行時，運行規(guī)律不都是線性的，有時候需要讓動畫按某種曲線斜率變化著運行，這時就需要指定動畫的easing屬性，Qt內(nèi)置許多動畫曲線，保證動畫運行的多樣性

3.2 target動畫運行的目標(biāo)對象

在PropertyAnimation中，往往需要運行動畫的目標(biāo)對象，表示屬性值的改變是該目標(biāo)對象的屬性值

3.3 property屬性指定

一般地，目標(biāo)對象的屬性不止一個，在指定屬性動畫時，需要明確動畫改變哪個屬性，就是用property,也可一次指定多個屬性，使用properties指定

3.4 duration單次動畫運行時長

指定當(dāng)前動畫從開始到結(jié)束運行的時間，單位ms，對于特殊的動畫，有時還需要指定動畫的振幅，周期，超調(diào)信息等等

3.5 from屬性

標(biāo)志當(dāng)前動畫的初始值

3.6 to屬性

標(biāo)志當(dāng)前動畫的結(jié)束值

4 經(jīng)典案例：使用動畫描繪足球運動軌跡

基本代碼如下

import QtQuick 2.12
import QtQuick.Window 2.12


Window {
    id:root
    visible: true
    width: 1500
    height: 300
    title: qsTr("Window Test")
    flags: Qt.FramelessWindowHint
    y:1200
    //準(zhǔn)備地面和天空
    Rectangle {
        id: sky
        width: parent.width
        height: 200
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF" }
        }
    }
    Rectangle {
        id: ground
        anchors.top: sky.bottom
        anchors.bottom: root.bottom
        width: parent.width
        color:"#00802F"
//        gradient: Gradient {
//            GradientStop { position: 0.0; color: "#00FF00" }
//            GradientStop { position: 1.0; color: "#00802F" }
//        }
    }
    //準(zhǔn)備足球
    Image {
        id: ball
        x: 20; y: 240
        source: "qrc:/images/ball.png"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                ball.x = 20; ball.y = 240
                anim.restart()
            }
        }
    }
    //準(zhǔn)備序列動畫
    ParallelAnimation {
        id: anim
        SequentialAnimation {
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: 2000
                easing.type: Easing.OutCirc
            }
            NumberAnimation {
                target: ball
                properties: "y"
                to: 240
                duration: 2000
                easing.type: Easing.OutBounce
            }
        }
        SequentialAnimation{
            NumberAnimation {
                target: ball
                properties: "x"
                to: 400
                duration: 2000
                easing.type: Easing.Linear
            }
            NumberAnimation {
                target: ball
                properties: "x"
                to: 650
                duration: 2000
                easing.type: Easing.Linear
            }
        }


        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: 4000
            easing.type: Easing.Linear
        }
    }
}

3.1 運行結(jié)果如下

到此，相信大家對“怎么使用QML屬性實現(xiàn)足球運動”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！