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: html特效代码雨代码"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 = Completed=back.destroy(1000)}}
            SequentialAnimation on x {
                running:false
                id: animation1
                      loops: 50
                      PropertyAnimation {pe: Easing.InOutElastic;to: 8  ;duration:10}
                      PropertyAnimation {pe: Easing.OutInElastic; to: 0 ;duration:10}
                  }
              SequentialAnimation on y {
                          id: animation2
                          running:false
                              loops: 50
                              PropertyAnimation { pe: Easing.InOutBounce;to: 8  ;duration:10}
                              PropertyAnimation { pe: 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 = Completed=back.destroy(1000)}}
            SequentialAnimation on x {
                running:false
                id: animation1
                      PropertyAnimation { to: 360; pe: Easing.InOutBack;duration: 1000; loops: Animation.Infinite }
                  }
              SequentialAnimation on y {
                          id: animation2
                          running:false
                              PropertyAnimation { to: 630; pe: 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 { pe: 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 { pe: Easing.InOutElastic;duration: 1000 }
            }
            MouseArea {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。