QML学习实例

最新推荐文章于 2024-02-22 16:53:37 发布

wuqing1220

最新推荐文章于 2024-02-22 16:53:37 发布

阅读量1k

点赞数 1

分类专栏： qml 图片文章标签： velocity animation loops image 360 transition

本文链接：https://blog.csdn.net/wuqing1220/article/details/7832559

版权

本文介绍了使用QML实现的多种动态效果，包括图片水平和垂直平移、地震效果、飞出过渡、翻页动画、旋转及翻转180度等。通过示例代码展示了如何创建这些视觉效果，如利用PropertyAnimation和SequentialAnimation进行图片位置变换，以及使用Flipable组件实现翻转效果。

摘要由CSDN通过智能技术生成

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.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}

        SequentialAnimationony{

                                      id:animation2

                                      running:false

        NumberAnimation  {
  to:630;duration:1000}

}}

                MouseArea{

                          anchors.fill:parent

                          onClicked:animation2.running=true

3. 地震效果

importQt4.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)}}

             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.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)}}

             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.7

Rectangle{

    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

关注

专栏目录