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

創新互聯2013年開創至今，先為葫蘆島等服務建站，葫蘆島等地企業，進行企業商務咨詢服務。為葫蘆島企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

1. 所有動畫的基類Animation

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

1.1 Animation類型的常用屬性

• loops:int 設置當前動畫循環的次數

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

• running:bool 標識當前動畫是否正在運行

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

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

2.1 錨定轉場動畫AnchorAnimation

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

2.2 并列式動畫ParallelAnimation

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

2.3 序列式動畫SequentialAnimation

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

2.4 屬性動畫PropertyAnimatio

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

2.5 路徑動畫PathAnimation

定義和路徑相關的動畫，與Path和Transaction共同使用，定義路徑動畫

3. 關于動畫的重要屬性

3.1 easing動畫緩沖曲線

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

3.2 target動畫運行的目標對象

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

3.3 property屬性指定

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

3.4 duration單次動畫運行時長

指定當前動畫從開始到結束運行的時間，單位ms，對于特殊的動畫，有時還需要指定動畫的振幅，周期，超調信息等等

3.5 from屬性

標志當前動畫的初始值

3.6 to屬性

標志當前動畫的結束值

4 經典案例：使用動畫描繪足球運動軌跡

基本代碼如下

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
    //準備地面和天空
    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" }
//        }
    }
    //準備足球
    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()
            }
        }
    }
    //準備序列動畫
    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 運行結果如下

到此，相信大家對“怎么使用QML屬性實現足球運動”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！