qml 定時器以及幾種簡單動畫
Timer
定時器，以指定的時間間隔觸發處理程式。
屬性
interval: int
設定觸發器之間的時間間隔（以毫秒為單位）。預設間隔為1000毫秒。
repeat: bool
定時器是否重複觸發，值為true，則按照時間間隔重複觸發；為false，則在指定時間間隔觸發一次後就停止（即running被置位false）。
running: bool
為true時，啟動定時器，否則停止定時器。預設為false。
triggeredOnStart: bool
啟動定時器時，通常是在指定時間間隔之後才會第一次觸發，有時候希望能在啟動定時器時立即觸發。如果值為true，則在定時器啟動時立即觸發處理程式，並隨後按照指定是時間間隔觸發。
注意：如果repeat設定為false，則定時器將觸發兩次，一次是啟動，然後時間間隔後一次。
訊號
triggered()
定時器觸發的訊號。
注意對應的處理程式是onTriggered。
方法
restart()
重新啟動定時器。
如果定時器未執行，則啟動該定時器；如果定時器正則執行，則會先停止定時器，然後馬上又啟動。
Item {
visible: true
width: 500
height: 300
Timer {
id:timer
interval: 500 //設定定時器定時時間為500ms,預設1000ms
running: true //是否開啟定時，預設是false，當為true的時候，進入此介面就開始定時
repeat: true //是否重複定時,預設為false
onTriggered: time.text = Date().toString() //定時觸發槽,定時完成一次就進入一次
}
Text {
id: time
font.pixelSize: 20
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 200
}
MouseArea{
anchors.fill: parent
onClicked: timer.stop(); //開啟定時器
onDoubleClicked: timer.start();
}
}
Animation
在qml中， Animation是所有動畫類的基類，其中有一個屬性應該注意，那就是alwaysRunToEnd.它預設為false，如果設定了true，那麼無論你是呼叫了Animation的stop()或者設定running屬性為false，動畫都會從頭到尾的執行完畢。
一些常⽤的動畫：
PropertyAnimation（屬性動畫）- 使⽤屬性值改變播放的動畫
Rectangle{
id: rootItem
width: 360
height: 240
color: "#EEEEEE"
Rectangle{
id: rect
width: 50
height: 150
anchors.centerIn: parent
color: "blue"
PropertyAnimation{
id: animation
target: rect
property: "width"
// 改變多個屬性可以用properties來設定，不過to屬性設定的值會將應用你設定的多個屬性，因此，用這種方法時，最後設定同一類的屬性。比如高度和寬度
// propeties: "width, height" //屬性名之間用英文逗號個離開
// 針對單一目標不僅如此，同時可以通過targets設定同時對多個目標的操作：targets： [rectA, rectB]
to: 220
duration: 2000
}
MouseArea{
anchors.fill: parent
onClicked: {
animation.running = true
}
}
//要同時改變多個屬性，但是又不是同一類的
//Animation on <property>將一個PropertyAnimation與一個屬性關聯起來
MouseArea{
anchors.fill: parent
id: mouseArea
}
PropertyAnimation on width{
target: rect
to: 150
duration: 1000
running: mouseArea.pressed //如果不設定此屬性，那麼在Item載入完後就會立即執行
}
}
}
// 增加訊號控制屬性動畫
/*
Rectangle{
id: rootItem
width: 360
height: 240
color: "#EEEEEE"
Rectangle{
id: rect
width: 50
height: 150
anchors.centerIn: parent
color: "blue"
property var animation
PropertyAnimation{
id: toSquare
target: rect
property: "width"
to: 150
duration: 4000
onStarted: {
rect.animation = toSquare
rect.color = "red"
}
onStopped: {
rect.color = "blue"
}
}
PropertyAnimation{
id: toRect
target: rect
properties: "width"
to: 50
duration: 4000
onStarted: {
rect.animation = toRect
rect.color = "red"
}
onStopped: {
rect.color = "blue"
}
}
MouseArea{
anchors.fill: parent
onClicked: {
if(rect.animation == toRect ||
rect.animation == undefined)
{
toSquare.start()
}
else
toRect.start()
}
}
}
}
*/
NumberAnimation（數字動畫）- 使⽤數字改變播放的動畫
Rectangle {
id:win
visible: true
width: 600
height: 300
Rectangle{
y:win.height/2
id:source
width: 100
height: 100
color: "red"
}
NumberAnimation {
id:xChange
target: source
to:win.width-source.width
property: "x"
duration: 5000
easing.type: Easing.InOutQuad
}
NumberAnimation {
id:rotationChange
target: source
to:360*5
property: "rotation"
duration: 5000
easing.type: Easing.InOutQuad
}
NumberAnimation {
id:radiusChange
target: source
to:100
property: "radius"
duration: 5000
easing.type: Easing.InOutQuad
}
MouseArea{
anchors.fill: parent
onClicked:{
xChange.start()
rotationChange.start()
radiusChange.start()
}
ColorAnimation（顏⾊動畫）- 使⽤顏⾊改變播放的動畫
//顏色動畫漸變
Item {
id: container
width:200
height:200
Rectangle {
id: gradientRect;
width:80
height: 80
gradient: Gradient {
GradientStop { position: 0; color: "red" }
GradientStop { position: 1; color: "steelblue" }
}
visible: false
layer.enabled: true;
layer.smooth: true
}
Text {
id: text
anchors.centerIn: parent
color: "pink"
text: "Hello world!"
font.pixelSize: 32
layer.samplerName: "maskSource"
layer.enabled: true
layer.effect: ShaderEffect {
property var colorSource: gradientRect;
fragmentShader: "
uniform lowp sampler2D colorSource;
uniform lowp sampler2D maskSource;
uniform lowp float qt_Opacity;
varying highp vec2 qt_TexCoord0;
void main() {
gl_FragColor =
texture2D(colorSource, qt_TexCoord0)
* texture2D(maskSource, qt_TexCoord0).a
* qt_Opacity;
}
"
}
SequentialAnimation on font.letterSpacing {
loops: Animation.Infinite;
NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 }
ScriptAction {
script: {
container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
}
}
}
SequentialAnimation on opacity {
loops: Animation.Infinite;
NumberAnimation { from: 1; to: 0; duration: 2600 }
PauseAnimation { duration: 400 }
}
}
}
RotationAnimation（旋轉動畫）- 使⽤旋轉改變播放的動畫
Rectangle
{
id:colorChanged
color: "green"
width: 200
height: 200
radius: 30
anchors.centerIn: parent
// transformOrigin: item.right
}
RotationAnimation
{
id:rotationAnimation
target: colorChanged
to:900
direction: rotationAnimation.Clockwise
duration: 3000
}
MouseArea
{
anchors.fill: parent
onClicked: rotationAnimation.start()
}
除了上⾯這些基本和通常使⽤的動畫元素，QtQuick還提供了⼀些特殊場景下 使⽤的動畫：
PauseAnimation（停⽌動畫）- 運⾏暫停⼀個動畫
SequentialAnimation（順序動畫）- 允許動畫有序播放
ParallelAnimation（並⾏動畫）- 允許動畫同時播放
AnchorAnimation（錨定動畫）- 使⽤錨定改變播放的動畫
parentAnimation（⽗元素動畫）- 使⽤⽗物件改變播放的動畫 SmotthedAnimation（平滑動畫）- 跟蹤⼀個平滑值播放的動畫 SpringAnimation（彈簧動畫）- 跟蹤⼀個彈簧變換的值播放的動畫 PathAnimation（路徑動畫）- 跟蹤⼀個元素物件的路徑的動畫 Vector3dAnimation（3D容器動畫）- 使⽤QVector3d值改變播放的動畫PropertyAction（屬性動作）- 在播放動畫時改變屬性
ScriptAction（指令碼動作）- 在播放動畫時運⾏指令碼