QML学习实例 – 图片切换效果源代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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{