2024年2月20日发(作者：)
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: ""
Image {
id: back
source: ""
//PropertyAnimation on x { to: 360; duration: 1000; loops:
te }
//PropertyAnimation on y { to: 630; duration: 1000; loops:
te }
SequentialAnimation on x {
id: animation2
running:false
NumberAnimation { to: 360; duration: 1000 }
}}
MouseArea {
: parent
onClicked:g=true
}
}
}
2. 垂直平移
import Qt 4.7
Rectangle {
width: 360; height: 630
Image {
id: front
source: ""
Image {
id: back
source: ""
//PropertyAnimation on x { to: 360; duration: 1000; loops:
te }
//PropertyAnimation on y { to: 630; duration: 1000; loops:
te }
SequentialAnimation on y {
id: animation2
running:false
NumberAnimation { to: 630; duration: 1000 }
}}
MouseArea {
: parent
onClicked:g=true
}
}
}
3. 地震效果
import Qt 4.7
Rectangle {
width: 360; height: 630
Image {
id: front
source: ""
Image{
id: back
source: ""
MouseArea { : parent; onClicked:
{g = true;g =
true;leted=y(1000)}}
SequentialAnimation on x {
running:false
id: animation1
loops: 50
PropertyAnimation {:
lastic;to: 8 ;duration:10}
PropertyAnimation {:
lastic; to: 0 ;duration:10}
}
SequentialAnimation on y {
id: animation2
running:false
loops: 50
PropertyAnimation { :
ounce;to: 8 ;duration:10}
PropertyAnimation { :
ounce;to: 0 ;duration:10}
}}}}
4. 左下飞出
import Qt 4.7
Rectangle {
width: 360; height: 630
Image {
id: front
source: ""
Image{
id: back
source: ""
MouseArea { : parent; onClicked:
{g = true;g =
true;leted=y(1000)}}
SequentialAnimation on x {
running:false
id: animation1
PropertyAnimation { to: 360; :
ack;duration: 1000; loops: te }
}
SequentialAnimation on y {
id: animation2
running:false
PropertyAnimation { to: 630; :
ack;duration: 1000; loops: te }
}}}}
5. 左翻页
import Qt 4.7
Rectangle {
id: rect
width: 360; height: 630
Image {
id: front
source: ""
Image {
id: back
source: ""
Behavior on width {
NumberAnimation { :
lastic;duration: 1000 }
}
MouseArea {
: parent
onClicked: = 0
}
}
}
}
6. 上翻页
import Qt 4.7
Rectangle {
id: rect
width: 360; height: 630
Image {
id: front
source: ""
Image {
id: back
source: ""
Behavior on height {
NumberAnimation { :
lastic;duration: 1000 }
}
MouseArea {
: parent
onClicked:= 0
}
}
}
}
7. 旋转360度 后消失
import Qt 4.7
Rectangle {
id: rect
width: 360; height: 630
Image {
id: front
source: ""
Image {
id: back
source: ""
states: State {
name: "rotated"; PropertyChanges { target: back; rotation: 180 }
}
RotationAnimation on rotation {
id:animation2
running:false
: ack;
duration:900
loops: 1
from: 0
to: 360
}
MouseArea {
: parent
onClicked:{g =
true;="rotated"
leted=y(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: "" }
back: Image { source: "" }
transform: Rotation {
origin.x: /2; origin.y: /2
axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis
angle:
}
states: State {
name: "back"
PropertyChanges { target: flipable; angle:180 }
when: d
}
transitions: Transition {
NumberAnimation { : lastic;properties: "angle"; duration:
1000 }
}
MouseArea {
: parent
onClicked: d = !d
}
}
9. 龙卷风
import Qt 4.7
import les 1.0
Rectangle {
id: page
width: 380; height: 640
Image {
id: front
source: ""
Image{
id: back
source: ""
Particles {
lifeSpan: 1000; lifeSpanDeviation: 600
id: stars
visible:false
x: 0; y: 0; width: ; height:
source: ""
angleDeviation: 360
velocity: 0; velocityDeviation: 0
count: /10
fadeInDuration: 3000
opacity: 0.4
z:10
}
MouseArea { : parent; onClicked: {e=
true;leted=y(3000)}}
//
}
}
}
10. 泡泡
import Qt 4.7
import les 1.0
Rectangle {
id: page
width: 380; height: 640; color: "black"
property bool explode : false
Image {
id: front
source: ""
Image{
id: back
source: ""
MouseArea { : parent; onClicked: {e = true;
e= true;e = true
leted=y(5000)}}
Particles {
lifeSpan: 1000; lifeSpanDeviation: 600
id: stars
x: 0; y: 0; width: ; height:
source: ""
visible:false
angleDeviation: 360
velocity: 100; velocityDeviation: 30
count: /20
fadeInDuration: 3000
opacity: 1
z:10
}
Particles {
lifeSpan: 1000; lifeSpanDeviation: 600
id: stars1
x: 0; y: 0; width: ; height:
source: ""
visible:false
angleDeviation: 360
velocity: 70; velocityDeviation: 20
count: /30
fadeInDuration: 3000
opacity: 1
z:10
}
Particles {
lifeSpan: 1000; lifeSpanDeviation: 600
id: stars2
x: 0; y: 0; width: ; height:
source: ""
visible:false
angleDeviation: 360
velocity: 50; velocityDeviation: 10
count: /40
fadeInDuration: 3000
opacity: 1
z:10
}
states: State { name: "exploding"; when: explode
StateChangeScript {script: (200); }
}}}}
11. 下雪
import Qt 4.7
import les 1.0
Rectangle {
id: page
width: 380; height: 640; color: "black"
Image {
id: front
source: ""
Image{
id: back
source: ""
MouseArea { : parent; onClicked:
{e = true;
e= true;e =
true
leted=y(5000)}}
Particles {
lifeSpan: 10000; lifeSpanDeviation: 1000
id: stars
x: 0; y: 0; width: ; height:
source: ""
emissionRate:30
visible:false
angle: 90
angleDeviation: 70
velocity: 50
velocityDeviation: 30
count: /15
opacity: 0.3
z:10
ParticleMotionWander {
xvariance: 70
pace: 150
}
}
Particles {
lifeSpan: 10000; lifeSpanDeviation: 1000
id: stars1
x: 0; y: 0; width: ; height:
source: ""
visible:false
angle: 90
angleDeviation: 70
emissionRate:30
velocity: 50; velocityDeviation: 30
count: /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: ; height:
source: ""
emissionRate:30
angle: 90
angleDeviation: 80
visible:false
velocity: 50; velocityDeviation: 30
count: /15
fadeInDuration: 3000
opacity: 0.4
z:10
ParticleMotionWander {
xvariance: 80
pace: 150
}
}
}}}
12. 下雨
import Qt 4.7
import les 1.0
Rectangle {
width: 360
height: 630
Image {
id: front
source: ""
Image{
id: back
source: ""
MouseArea { : parent; onClicked:
{e = true;
e=
true;e = true
leted=y(5000)}}
Particles {
id:stars
visible:false
width:
height: 300
source: ""
lifeSpan: 900
lifeSpanDeviation:300
count: 50
angle: 70
angleDeviation: 36
velocity: 30
velocityDeviation: 10
ParticleMotionGravity{
yattractor: 2000
xattractor: 0
acceleration: 1000
}
RotationAnimation on rotation {
: ack;
duration:10000
loops: -1
from: 0
to: 30}}
Particles {
id:stars1
visible:false
width:
height: 300
source: ""
lifeSpan: 900
lifeSpanDeviation:400
count: 50
angle: 70
angleDeviation: 36
velocity: 30
velocityDeviation: 10
ParticleMotionGravity{
yattractor: 2000
xattractor: 0
acceleration: 1000}
RotationAnimation on rotation {
:
ack;
duration:10000
loops: -1
from: 0
to: 30}}
Particles {
id:stars2
visible:false
width:
height: 300
source: ""
lifeSpan: 900
lifeSpanDeviation:500
count: 50
angle: 70
angleDeviation: 36
velocity: 30
velocityDeviation: 10
ParticleMotionGravity{
yattractor: 2000
xattractor: 0
acceleration: 1000}
RotationAnimation on rotation {
:
ack;
duration:10000
loops: -1
from: 0
to: 30
}}}}}
13. 玫瑰
import Qt 4.7
import les 1.0
Rectangle {
id: page
width: 380; height: 640; color: "black"
Image {
id: front
source: ""
Image{
id: back
source: ""
MouseArea { : parent; onClicked:
{e = true;
g= true;
g=true;
g=true;
//=*2
//=*2
leted=y(10000)}}
Particles {
id: stars
visible:false
x: 0; y: 0; width: ; height:
source: ""
//angle:360
//angleDeviation: 360
//velocity: 0; velocityDeviation: 0
fadeInDuration : 3000
fadeOutDuration : 1000
//opacity: 0.5
emissionRate:30
emissionVariance:1
//width: 1
//height: 1
//source: ""
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: /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
: ack;
duration:50000
loops: -1
from: 0
to: 360
}
NumberAnimation on width {id :be1
running:false; target: back;properties:"width";
to:*1;duration: 100000 }
}
NumberAnimation on
height{ id:be2;running:false;target: back;properties:"height";
to:*1;duration: 100000 }
}
}
14. 星系
import Qt 4.7
import les 1.0
Rectangle {
width: 360
height: 630
Image {
id: front
source: ""
Image{
id: back
// x:360
// y:630
source: ""
MouseArea { : parent; onClicked: {e = true;
e=
true;
e = true
e = true
//g=true
leted=y(10000)}}
Particles {
In:
visible:false
id:stars
y: 315
x: 180
source: ""
lifeSpan: 5000
emissionRate:1000
count:20000
angle: 360
angleDeviation: 360
velocity: -1
velocityDeviation: 1000
fadeInDuration:500
fadeOutDuration:500
}
Particles {
In:
id:stars1
visible:false
y: 315
x: 180
width: 10
height: 10
source: ""
lifeSpan: 5000
emissionRate:1000
count: 2000
angle: 360
angleDeviation: 360
velocity: -1
velocityDeviation: 800
fadeInDuration:500
fadeOutDuration:500
RotationAnimation on rotation {
: ack;
duration:10000
loops: -1
from: 0
to: 360
}}
Particles {
In:
id:stars2
visible:false
y: 315
x: 180
width: 10
height: 10
source: ""
lifeSpan: 5000
emissionRate:1000
count: 2000
angle: 360
angleDeviation: 360
velocity:-1
velocityDeviation: 800
fadeInDuration:500
fadeOutDuration:500
RotationAnimation on rotation {
: ack;
duration:10000
loops: -1
from: 0
to: 360
}}
Particles {
In:
id:stars3
visible:false
y: 315
x: 180
width: 10
height: 10
source: ""
lifeSpan: 5000
emissionRate:1000
count: 2000
angle: 360
angleDeviation: 360
velocity: -1
velocityDeviation: 800
fadeInDuration:500
fadeOutDuration:500
RotationAnimation on rotation {
: ack;
duration:10000
loops: -1
from: 0
to: 360
}}
ParallelAnimation{
id:xx
running:false
NumberAnimation {id :be1; target: back;properties:"width";
to:*10;duration: 1000 }
NumberAnimation { id:be2;target: back;properties:"height";
to:*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
发布评论