轉帖|使用教程|編輯:鮑佳佳|2021-01-04 14:27:51.590|閱讀 326 次
概述:上文我們講述了如何為游戲添畫面以及構造背景,本文講動畫對象的構成以及相應的代碼。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
用Qt編寫GUI的另一種方法是使用QtQuick模塊。使用QtQuick的GUI是用QML編寫的。QML是一種聲明性的對象描述語言,它集成了Javascript進行程序化編程。QtQuick為使用QML開發GUI提供了必要的模塊。可以只用QML編寫整個應用程序,但通常只有GUI是用QML編寫的,應用程序的后臺是用C++實現的(參見整合QML和C++)。
上文我們講述了如何為游戲添畫面以及構造背景動畫背景對象
我們使用NumberAnimation在屏幕上以相反的方向水平移動波浪,使用SequentialAnimation與NumberAnimation上下移動波浪。
我們將Number動畫應用于wave的x屬性作為屬性值源,將x值從當前值到-(wave.width),經過16秒的時間進行動畫。我們將循環屬性設置為Animation.Infinite,以無限次重復動畫。
NumberAnimation on x { from: 0; to: -(wave.width); duration: 16000; loops: Animation.Infinite }
我們將圖像的y屬性作為屬性值源,應用順序動畫對y值進行動畫處理。我們使用一個數字動畫將圖像從y值下方的兩個位置動畫到其上方的兩個位置,時間超過1600毫秒。隨后我們使用另一個數字動畫對圖像進行相反方向的動畫,時間同樣為1600毫秒。該動畫無限次重復。
SequentialAnimation on y { loops: Animation.Infinite NumberAnimation { from: y - 2; to: y + 2; duration: 1600; easing.type: Easing.InOutQuad } NumberAnimation { from: y + 2; to: y - 2; duration: 1600; easing.type: Easing.InOutQuad } }
我們將這種類型的緩動曲線Easing.InOutQuad用于五次(t ^ 5)函數,以將運動加速到一半,然后將其減速。
我們使用順序動畫和數字動畫來制作wave2類似于的動畫wave,但方向相反:
SequentialAnimation on y { loops: Animation.Infinite NumberAnimation { from: y + 2; to: y - 2; duration: 1600; easing.type: Easing.InOutQuad } NumberAnimation { from: y - 2; to: y + 2; duration: 1600; easing.type: Easing.InOutQuad } }
我們使用連續動畫,旋轉,順時針方向繞原點,我們設置為陽光度光線Item.Top的transformOrigin特性。動畫無限期重復:
transformOrigin: Item.Top SequentialAnimation on rotation { loops: Animation.Infinite NumberAnimation { from: -10; to: 10; duration: 8000; easing.type: Easing.InOutSine } NumberAnimation { from: 10; to: -10; duration: 8000; easing.type: Easing.InOutSine } }
我們使用一個數字動畫在8秒內將圖像從-10度10旋轉10到-10度,然后在相同的持續時間內將圖像從度旋轉到度。
Easing.InOutSine對于正弦函數(sin(t)),我們使用該類型的緩動曲線將運動加速到一半,然后將其減速。
我們使用順序動畫和數字動畫以相似的方式為另一張sunlight.png圖像設置動畫,但方向相反:
transformOrigin: Item.Top SequentialAnimation on SequentialAnimation on rotation { { loops: Animation.Infinite NumberAnimation { { from: 10; to: - -10; duration: 8000; easing.type: type: Easing.InOutSine } } NumberAnimation { { from: - -10; to: 10; duration: 8000; easing.type: type: Easing.InOutSine }} }}
有關在和屬性以及和屬性上使用SequentialAnimation和NumberAnimation的示例。
Qt常用組件:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: