QML学习实例
QML学习实例 – 图片切换
1. 水平平移
importQt4.7
Rectangle{
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
//PropertyAnimationonx{to:360;duration:1000;loops:Animation.Infinite}
//PropertyAnimationony{to:630;duration:1000;loops:Animation.Infinite}
SequentialAnimationonx{
id:animation2
running:false
NumberAnimation {to:360;duration:1000}
}}
MouseArea{
anchors.fill:parent
onClicked:animation2.running=true
}
}
}
2. 垂直平移
importQt4.7
Rectangle{
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
//PropertyAnimationonx{to:360;duration:1000;loops:Animation.Infinite}
//PropertyAnimationony{to:630;duration:1000;loops:Animation.Infinite}
SequentialAnimationony{
id:animation2
running:false
NumberAnimation {to:630;duration:1000}
}}
MouseArea{
anchors.fill:parent
onClicked:animation2.running=true
}
}
}
3. 地震效果
importQt4.7
Rectangle{
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
MouseArea{anchors.fill:parent;onClicked:{animation1.running=true;animation2.running=true;Component.onCompleted=back.destroy(1000)}}
SequentialAnimationonx{
running:false
id:animation1
loops:50
PropertyAnimation{easing.type:Easing.InOutElastic;to:8 ;duration:10}
PropertyAnimation{easing.type:Easing.OutInElastic;to:0;duration:10}
}
SequentialAnimationony{
id:animation2
running:false
loops:50
PropertyAnimation{easing.type:Easing.InOutBounce;to:8 ;duration:10}
PropertyAnimation{easing.type:Easing.OutInBounce;to:0;duration:10}
}}}}
4. 左下飞出
importQt4.7
Rectangle{
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
MouseArea{anchors.fill:parent;onClicked:{animation1.running=true;animation2.running=true;Component.onCompleted=back.destroy(1000)}}
SequentialAnimationonx{
running:false
id:animation1
PropertyAnimation{to:360;easing.type:Easing.InOutBack;duration:1000;loops:Animation.Infinite}
}
SequentialAnimationony{
id:animation2
running:false
PropertyAnimation{to:630;easing.type:Easing.InOutBack;duration:1000;loops:Animation.Infinite}
}}}}
5. 左翻页
importQt4.7
Rectangle{
id:rect
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
Behavioronwidth{
NumberAnimation{easing.type:Easing.InOutElastic;duration:1000}
}
MouseArea{
anchors.fill:parent
onClicked:back.width=0
}
}
}
}
6. 上翻页
importQt4.7
Rectangle{
id:rect
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
Behavioronheight{
NumberAnimation{easing.type:Easing.InOutElastic;duration:1000}
}
MouseArea{
anchors.fill:parent
onClicked:back.height=0
}
}
}
}
7. 旋转360度后消失
importQt4.7
Rectangle{
id:rect
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
states:State{
name:"rotated";PropertyChanges{target:back;rotation:180}
}
RotationAnimationonrotation{
id:animation2
running:false
easing.type:Easing.InOutBack;
duration:900
loops:1
from:0
to:360
}
MouseArea{
anchors.fill:parent
onClicked:{animation2.running=true;back.state="rotated"
Component.onCompleted=back.destroy(1000)}}
}
}
}
8. 翻转180度
import Qt 4.7
Flipable {
id: flipable
width: 360; height: 630
property int angle: 0
property bool flipped: false
front: Image { source: "1.png" }
back: Image { source: "2.png" }
transform: Rotation {
origin.x: flipable.width/2; origin.y: flipable.height/2
axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis
angle: flipable.angle
}
states: State {
name: "back"
PropertyChanges { target: flipable; angle:180 }
when: flipable.flipped
}
transitions: Transition {
NumberAnimation { easing.type: Easing.InOutElastic;properties: "angle"; duration: 1000 }
}
MouseArea {
anchors.fill: parent
onClicked: flipable.flipped = !flipable.flipped
}
}
9. 龙卷风
importQt4.7
importQt.labs.particles1.0
Rectangle{
id:page
width:380;height:640
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
Particles{
lifeSpan:1000;lifeSpanDeviation:600
id:stars
visible:false
x:0;y:0;width:parent.width;height:parent.height
source:"BBB.gif"
angleDeviation:360
velocity:0;velocityDeviation:0
count:parent.width/10
fadeInDuration:3000
opacity:0.4
z:10
}
MouseArea{anchors.fill:parent;onClicked:{stars.visible=true;Component.onCompleted=back.destroy(3000)}}
//
}
}
}
10. 泡泡
importQt4.7
importQt.labs.particles1.0
Rectangle{
id:page
width:380;height:640;color:"black"
propertyboolexplode:false
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
MouseArea{anchors.fill:parent;onClicked:{stars.visible=true;
stars1.visible=true;stars2.visible=true
Component.onCompleted=back.destroy(5000)}}
Particles{
lifeSpan:1000;lifeSpanDeviation:600
id:stars
x:0;y:0;width:parent.width;height:parent.height
source:"AAA.PNG"
visible:false
angleDeviation:360
velocity:100;velocityDeviation:30
count:parent.width/20
fadeInDuration:3000
opacity:1
z:10
}
Particles{
lifeSpan:1000;lifeSpanDeviation:600
id:stars1
x:0;y:0;width:parent.width;height:parent.height
source:"AAA2.PNG"
visible:false
angleDeviation:360
velocity:70;velocityDeviation:20
count:parent.width/30
fadeInDuration:3000
opacity:1
z:10
}
Particles{
lifeSpan:1000;lifeSpanDeviation:600
id:stars2
x:0;y:0;width:parent.width;height:parent.height
source:"AAA3.PNG"
visible:false
angleDeviation:360
velocity:50;velocityDeviation:10
count:parent.width/40
fadeInDuration:3000
opacity:1
z:10
}
states:State{name:"exploding";when:explode
StateChangeScript{script:particles.burst(200);}
}}}}
11. 下雪
importQt4.7
importQt.labs.particles1.0
Rectangle{
id:page
width:380;height:640;color:"black"
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
MouseArea{anchors.fill:parent;onClicked:{stars.visible=true;
stars1.visible=true;stars2.visible=true
Component.onCompleted=back.destroy(5000)}}
Particles{
lifeSpan:10000;lifeSpanDeviation:1000
id:stars
x:0;y:0;width:parent.width;height:parent.height
source:"111.PNG"
emissionRate:30
visible:false
angle:90
angleDeviation:70
velocity:50
velocityDeviation:30
count:parent.width/15
opacity:0.3
z:10
ParticleMotionWander{
xvariance:70
pace:150
}
}
Particles{
lifeSpan:10000;lifeSpanDeviation:1000
id:stars1
x:0;y:0;width:parent.width;height:parent.height
source:"222.PNG"
visible:false
angle:90
angleDeviation:70
emissionRate:30
velocity:50;velocityDeviation:30
count:parent.width/15
fadeInDuration:3000
opacity:0.5
z:10
ParticleMotionWander{
xvariance:80
pace:150
}
}
Particles{
lifeSpan:10000;lifeSpanDeviation:1000
id:stars2
x:0;y:0;width:parent.width;height:parent.height
source:"333.PNG"
emissionRate:30
angle:90
angleDeviation:80
visible:false
velocity:50;velocityDeviation:30
count:parent.width/15
fadeInDuration:3000
opacity:0.4
z:10
ParticleMotionWander{
xvariance:80
pace:150
}
}
}}}
12. 下雨
importQt4.7
importQt.labs.particles1.0
Rectangle{
width:360
height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
MouseArea{anchors.fill:parent;onClicked:{stars.visible=true;
stars1.visible=true;stars2.visible=true
Component.onCompleted=back.destroy(5000)}}
Particles{
id:stars
visible:false
width:parent.width
height:300
source:"shuidi.png"
lifeSpan:900
lifeSpanDeviation:300
count:50
angle:70
angleDeviation:36
velocity:30
velocityDeviation:10
ParticleMotionGravity{
yattractor:2000
xattractor:0
acceleration:1000
}
RotationAnimationonrotation{
easing.type:Easing.InOutBack;
duration:10000
loops:-1
from:0
to:30}}
Particles{
id:stars1
visible:false
width:parent.width
height:300
source:"shuidi3.png"
lifeSpan:900
lifeSpanDeviation:400
count:50
angle:70
angleDeviation:36
velocity:30
velocityDeviation:10
ParticleMotionGravity{
yattractor:2000
xattractor:0
acceleration:1000}
RotationAnimationonrotation{
easing.type:Easing.InOutBack;
duration:10000
loops:-1
from:0
to:30}}
Particles{
id:stars2
visible:false
width:parent.width
height:300
source:"shuidi2.png"
lifeSpan:900
lifeSpanDeviation:500
count:50
angle:70
angleDeviation:36
velocity:30
velocityDeviation:10
ParticleMotionGravity{
yattractor:2000
xattractor:0
acceleration:1000}
RotationAnimationonrotation{
easing.type:Easing.InOutBack;
duration:10000
loops:-1
from:0
to:30
}}}}}
13. 玫瑰
importQt4.7
importQt.labs.particles1.0
Rectangle{
id:page
width:380;height:640;color:"black"
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
MouseArea{anchors.fill:parent;onClicked:{stars.visible=true;
roc.running=true;
be1.running=true;
be2.running=true;
//back.height=back.height*2
//back.width=back.height*2
Component.onCompleted=back.destroy(10000)}}
Particles{
id:stars
visible:false
x:0;y:0;width:parent.width;height:parent.height
source:"rose.png"
//angle:360
//angleDeviation:360
//velocity:0;velocityDeviation:0
fadeInDuration:3000
fadeOutDuration:1000
//opacity:0.5
emissionRate:30
emissionVariance:1
//width:1
//height:1
//source:"rose.png"
lifeSpan:50000
//lifeSpanDeviation:500
count:10000
rotation:10
transform:Scale{origin.x:25;origin.y:25;xScale:1}
angleDeviation:360
velocity:0;velocityDeviation:0
//count:parent.width/2
//fadeInDuration:2800
opacity:1
//angle:360
//angleDeviation:450
//velocity:50
//velocityDeviation:50
//ParticleMotionGravity{
//yattractor:1
//xattractor:1
//acceleration:0
}
RotationAnimationonrotation{
id:roc
running:false
easing.type:Easing.InOutBack;
duration:50000
loops:-1
from:0
to:360
}
NumberAnimationonwidth{id:be1
running:false; target:back;properties:"width";to:back.width*1;duration:100000}
}
NumberAnimationonheight{id:be2;running:false;target:back;properties:"height";to:back.width*1;duration:100000}
}
}
14. 星系
importQt4.7
importQt.labs.particles1.0
Rectangle{
width:360
height:630
Image{
id:front
source:"1.png"
Image{
id:back
//x:360
//y:630
source:"2.png"
MouseArea{anchors.fill:parent;onClicked:{stars.visible=true;
stars1.visible=true;
stars2.visible=true
stars3.visible=true
//xx.running=true
Component.onCompleted=back.destroy(10000)}}
Particles{
anchors.centerIn:parent.Center
visible:false
id:stars
y:315
x:180
source:"star.png"
lifeSpan:5000
emissionRate:1000
count:20000
angle:360
angleDeviation:360
velocity:-1
velocityDeviation:1000
fadeInDuration:500
fadeOutDuration:500
}
Particles{
anchors.centerIn:parent.Center
id:stars1
visible:false
y:315
x:180
width:10
height:10
source:"bluestar.png"
lifeSpan:5000
emissionRate:1000
count:2000
angle:360
angleDeviation:360
velocity:-1
velocityDeviation:800
fadeInDuration:500
fadeOutDuration:500
RotationAnimationonrotation{
easing.type:Easing.InOutBack;
duration:10000
loops:-1
from:0
to:360
}}
Particles{
anchors.centerIn:parent.Center
id:stars2
visible:false
y:315
x:180
width:10
height:10
source:"greenstar.png"
lifeSpan:5000
emissionRate:1000
count:2000
angle:360
angleDeviation:360
velocity:-1
velocityDeviation:800
fadeInDuration:500
fadeOutDuration:500
RotationAnimationonrotation{
easing.type:Easing.InOutBack;
duration:10000
loops:-1
from:0
to:360
}}
Particles{
anchors.centerIn:parent.Center
id:stars3
visible:false
y:315
x:180
width:10
height:10
source:"pstar.png"
lifeSpan:5000
emissionRate:1000
count:2000
angle:360
angleDeviation:360
velocity:-1
velocityDeviation:800
fadeInDuration:500
fadeOutDuration:500
RotationAnimationonrotation{
easing.type:Easing.InOutBack;
duration:10000
loops:-1
from:0
to:360
}}
ParallelAnimation{
id:xx
running:false
NumberAnimation {id:be1; target:back;properties:"width";to:back.width*10;duration:1000}
NumberAnimation{id:be2;target:back;properties:"height";to:back.height*10;duration:1000}
NumberAnimation{id:be5;properties:"rotation";from:0;to:1300;duration:1000}
NumberAnimation {id:be3; target:back;properties:"y";to:-315;duration:1000}
NumberAnimation{id:be4;target:back;properties:"x";to:-180;duration:1000}
}}}}