QML学习实例
来源：互联网 发布：linux 获取tomcat路径 编辑：程序博客网 时间：2024/06/05 12:02
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.7Rectangle{ 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.7Rectangle{ 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.7Rectangle{ 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.7Rectangle{ 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.7Rectangle{ 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.7Rectangle{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.7importQt.labs.particles1.0Rectangle{ 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.7importQt.labs.particles1.0Rectangle{ 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.7importQt.labs.particles1.0Rectangle{ 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:80visible:false velocity:50;velocityDeviation:30 count:parent.width/15 fadeInDuration:3000 opacity:0.4 z:10 ParticleMotionWander{ xvariance:80 pace:150 } } }}}
12. 下雨
importQt4.7importQt.labs.particles1.0Rectangle{ 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.7importQt.labs.particles1.0Rectangle{ 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.5emissionRate:30emissionVariance:1 //width:1 //height:1 //source:"rose.png" lifeSpan:50000 //lifeSpanDeviation:500 count:10000rotation:10transform: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.7importQt.labs.particles1.0Rectangle{ 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.Centerid:stars1visible: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.Centerid:stars2visible: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.Centerid:stars3visible: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}}}}}
- QML学习实例
- qml 学习
- QML学习
- QML学习:QML文件当做组件使用
- QML学习摘录 01：初识QML
- QML学习（1）
- QML学习(2)
- QML学习（3）
- qml学习入门资料
- qml入门学习小结
- qml学习资源
- 《QML HelloWorld》学习笔记
- QML学习笔记
- QML动画------学习总结
- QML学习文档
- 【引用】转载：QML 学习
- QML学习文档
- QML学习:Item元素
- nyoj 503（hdu 2199） 解方程（牛顿迭代公式）
- 73本免费的、语言无关的优秀的编程书籍
- android 悬浮窗
- javascript中声明类的方式
- 【错误集】JTable使用update()更新数据出现异常
- QML学习实例
- C++静态成员小结
- POJ-3259-Wormholes
- cocos2d-x下载及环境搭建
- 专家与杂家（职业发展）
- Android学习启动
- 学习KVM架构及其优点
- eclipse总是弹出 Errors running builder 'JavaScript Validator'解决方法
- vm centos 上网
