建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容主要講解“怎么使用QML屬性實(shí)現(xiàn)足球運(yùn)動(dòng)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么使用QML屬性實(shí)現(xiàn)足球運(yùn)動(dòng)”吧!
創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為葫蘆島等服務(wù)建站，葫蘆島等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為葫蘆島企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
1. 所有動(dòng)畫的基類Animation
Animation動(dòng)畫類型不能直接在QML文件中使用。它的存在是為了提供一組通用的屬性和方法，可用于繼承自它的所有其他動(dòng)畫類型。直接使用Animation類型會(huì)導(dǎo)致錯(cuò)誤，類似C++的抽象類。
1.1 Animation類型的常用屬性
loops:int 設(shè)置當(dāng)前動(dòng)畫循環(huán)的次數(shù)
paused:bool 表示當(dāng)前動(dòng)畫是否暫停，可讀可寫，功能與stop()pause()類似
running:bool 標(biāo)識(shí)當(dāng)前動(dòng)畫是否正在運(yùn)行
2. Animation動(dòng)畫類型的常用子類
下述列出的動(dòng)畫均是Animation的子類
2.1 錨定轉(zhuǎn)場動(dòng)畫AnchorAnimation
AnchorAnimation:一般用于在錨定布局發(fā)生變化時(shí)候的轉(zhuǎn)場動(dòng)畫，當(dāng)在轉(zhuǎn)換中使用錨定動(dòng)畫時(shí)，它將對(duì)狀態(tài)更改期間發(fā)生的任何錨定更改進(jìn)行動(dòng)畫處理。這可以通過使用AnchorChanges設(shè)置特定的目標(biāo)項(xiàng)來覆蓋。目標(biāo)屬性。 注意:AnchorAnimation只能在Transition中使用，并與AnchorChange一起使用。它不能用于行為和其他類型的動(dòng)畫
2.2 并列式動(dòng)畫ParallelAnimation
定義在并列式動(dòng)畫對(duì)象內(nèi)的幾組動(dòng)畫在播放時(shí)沒有先后順序，都會(huì)同時(shí)播放，并列式動(dòng)畫同時(shí)也支持內(nèi)嵌序列式動(dòng)畫組和單個(gè)動(dòng)畫
2.3 序列式動(dòng)畫SequentialAnimation
與并列式相反，定義在序列式動(dòng)畫內(nèi)的動(dòng)畫會(huì)按照動(dòng)畫創(chuàng)建的先后順序依次執(zhí)行，與并列式動(dòng)畫都可以理解為是單個(gè)動(dòng)畫的容器類動(dòng)畫。
2.4 屬性動(dòng)畫PropertyAnimatio
和對(duì)象屬性相關(guān)的動(dòng)畫，可以定義屬性的值按照某種已知曲線從
from到to的轉(zhuǎn)換，PropertyAnimation被NumberAnimation，RotationAnimation和ColorAnimation所繼承
2.5 路徑動(dòng)畫PathAnimation
定義和路徑相關(guān)的動(dòng)畫，與Path和Transaction共同使用，定義路徑動(dòng)畫
3. 關(guān)于動(dòng)畫的重要屬性
3.1 easing動(dòng)畫緩沖曲線
一般地，在動(dòng)畫運(yùn)行時(shí)，運(yùn)行規(guī)律不都是線性的，有時(shí)候需要讓動(dòng)畫按某種曲線斜率變化著運(yùn)行，這時(shí)就需要指定動(dòng)畫的easing屬性，Qt內(nèi)置許多動(dòng)畫曲線，保證動(dòng)畫運(yùn)行的多樣性
3.2 target動(dòng)畫運(yùn)行的目標(biāo)對(duì)象
在PropertyAnimation中，往往需要運(yùn)行動(dòng)畫的目標(biāo)對(duì)象，表示屬性值的改變是該目標(biāo)對(duì)象的屬性值
3.3 property屬性指定
一般地，目標(biāo)對(duì)象的屬性不止一個(gè)，在指定屬性動(dòng)畫時(shí)，需要明確動(dòng)畫改變哪個(gè)屬性，就是用property,也可一次指定多個(gè)屬性，使用properties指定
3.4 duration單次動(dòng)畫運(yùn)行時(shí)長
指定當(dāng)前動(dòng)畫從開始到結(jié)束運(yùn)行的時(shí)間，單位ms，對(duì)于特殊的動(dòng)畫，有時(shí)還需要指定動(dòng)畫的振幅，周期，超調(diào)信息等等
3.5 from屬性
標(biāo)志當(dāng)前動(dòng)畫的初始值
3.6 to屬性
標(biāo)志當(dāng)前動(dòng)畫的結(jié)束值
4 經(jīng)典案例：使用動(dòng)畫描繪足球運(yùn)動(dò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)備序列動(dòng)畫
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 運(yùn)行結(jié)果如下
到此，相信大家對(duì)“怎么使用QML屬性實(shí)現(xiàn)足球運(yùn)動(dòng)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
網(wǎng)站名稱：怎么使用QML屬性實(shí)現(xiàn)足球運(yùn)動(dòng)
網(wǎng)站鏈接：http://www.dlmjj.cn/article/ppsioe.html
