QML学习实例 – 图片切换效果源代码

QML学习实例–图片切换效果源代码
因为近期参加了QML的学习
总结了一些学习代码
因为时间不长1个星期左右只是最肤浅的一些
有一起学习的可以联系qq ：593751685 验证消息：qml
//是调试时候用的。

所有程序的界面大小都是640 360
这个附件是部分源代码+图片（还有main button等qml，这个是为了演示弄的，就没加进去）
1.水平平移
import Qt 4.7
Rectangle{
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
//PropertyAnimation on x{to:360;duration:1000;loops: Animation.Infinite}
//PropertyAnimation on y{to:630;duration:1000;loops: Animation.Infinite}
SequentialAnimation on x{
id:animation2
running:false
NumberAnimation{to:360;duration:1000}
}}
MouseArea{
anchors.fill:parent
onClicked:animation2.running=true
}
}
}
2.垂直平移
import Qt 4.7
Rectangle{
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
//PropertyAnimation on x{to:360;duration:1000;loops: Animation.Infinite}
//PropertyAnimation on y{to:630;duration:1000;loops: Animation.Infinite}
SequentialAnimation on y{
id:animation2
running:false
NumberAnimation{to:630;duration:1000}
}}
MouseArea{
anchors.fill:parent
onClicked:animation2.running=true
}
}
}
3.地震效果
import Qt 4.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)}}
SequentialAnimation on x{
running:false
id:animation1
loops:50
PropertyAnimation{easing.type:
Easing.InOutElastic;to:8;duration:10}
PropertyAnimation{easing.type:
Easing.OutInElastic;to:0;duration:10}
}
SequentialAnimation on y{
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.左下飞出
import Qt 4.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)}}
SequentialAnimation on x{
running:false
id:animation1
PropertyAnimation{to:360;easing.type: Easing.InOutBack;duration:1000;loops:Animation.Infinite}
}
SequentialAnimation on y{
id:animation2
running:false
PropertyAnimation{to:630;easing.type: Easing.InOutBack;duration:1000;loops:Animation.Infinite}
}}}}
5.左翻页
import Qt 4.7
Rectangle{
id:rect
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
Behavior on width{
NumberAnimation{easing.type: Easing.InOutElastic;duration:1000}
}
MouseArea{
anchors.fill:parent
onClicked:back.width=0
}
}
}
}
6.上翻页
import Qt 4.7
Rectangle{
id:rect
width:360;height:630
Image{
id:front
source:"1.png"
Image{
id:back
source:"2.png"
Behavior on height{
NumberAnimation{easing.type: Easing.InOutElastic;duration:1000}
}
MouseArea{
anchors.fill:parent
onClicked:back.height=0
}
}
}
}
7.旋转360度后消失
import Qt 4.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}
}
RotationAnimation on rotation{
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.龙卷风
import Qt 4.7
import bs.particles 1.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.泡泡
import Qt 4.7
import bs.particles 1.0
Rectangle{
id:page
width:380;height:640;color:"black"
property bool explode: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.下雪
import Qt 4.7
import bs.particles 1.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 )}}
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
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.下雨
import Qt 4.7
import bs.particles 1.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.onCompl eted=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
}
RotationAnimation on rotation{
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}
RotationAnimation on rotation{
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}
RotationAnimation on rotation{
easing.type: Easing.InOutBack;
duration:10000
loops:-1
from:0
to:30
}}}}}
13.玫瑰
import Qt 4.7
import bs.particles 1.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
}
RotationAnimation on rotation{
id:roc
running:false
easing.type:Easing.InOutBack;
duration:50000
loops:-1
from:0
to:360
}
NumberAnimation on width{id:be1
running:false;target:back;properties:"width"; to:back.width*1;duration:100000}
}
NumberAnimation on
height{id:be2;running:false;target:back;properties:"height";
to:back.width*1;duration:100000}
}
}
14.星系
import Qt 4.7
import bs.particles 1.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.onComplete d=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
RotationAnimation on rotation{
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
RotationAnimation on rotation{
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
RotationAnimation on rotation{
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}
}}}}。