用户交互（3-过渡与动画）

最新推荐文章于 2024-12-07 09:50:19 发布

small__student

最新推荐文章于 2024-12-07 09:50:19 发布

阅读量416

点赞数

CC 4.0 BY-SA版权

分类专栏： QT qml学习文章标签：过渡动画用户交互

本文链接：https://blog.youkuaiyun.com/gao1940628416/article/details/44812477

QT qml学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍Qt中的动画原理及实现方式，包括PropertyAnimation、过渡动画、Behavior等，通过具体实例展示了如何利用这些技术实现平滑过渡效果。

一.PropertyAnimation

这里写图片描述

二.过渡

简介
这里写图片描述
例1

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true
     Rectangle{
         id:rect
         width:100;height:100;x:200;y:200;color:"red"
         MouseArea{
             id:mousearea
             anchors.fill: parent
         }
         states:State{
             name:"moved";when:mousearea.pressed
             PropertyChanges{target:rect;x:50;y:50
                }
         }
             transitions: [
                 Transition {
                     NumberAnimation{
                         properties: "x,y";
                         easing.type: Easing.InOutQuad
                     }
                 }
             ]



}
}

当鼠标按下时，方块从（200.200）的位置变换到（50.50）的位置，鼠标松开后，回到原位置

例子2
将上一篇中的例1中添加变换的过渡过程，即
这里写图片描述
由简介知，即在上个例子状态的基础之上添加过渡片段的代码

在41和42行即state状态后面之间添加代码

 transitions: [//transitions作用是可以添加多个Transition
              Transition {
                  from: "stop"; to: "go"
                  PropertyAnimation { target: stop_light
                                      properties: "color"; duration: 5000 }
              },
              Transition {
                  from: "go"; to: "stop"
                  PropertyAnimation { target: go_light
                                      properties: "color"; duration: 5000 }
              } ]

也可以使用通用过渡，即

transitions: [
          Transition {
              from: "*"; to: "*"
PropertyAnimation { target: stop_light
                                                  properties: "color"; duration: 5000 }

      PropertyAnimation { target: go_light
                                                  properties: "color"; duration: 5000 }
               } ]

例子3
实现上一篇例2中清理图片变化的过渡处理
注意
应为从亮到暗和从暗到亮使用的是同一属性！因此可以使用可逆过渡！即将reversible设置为true即可

//在states结束后添加下面代码
transitions: [
                Transition {
                    from: "with text"
                    to: "without text"
                    reversible: true
                    PropertyAnimation{
                        target: clear_button
                        properties: "opacity"
                        duration: 1000
                    }
                }

            ]

三.动画

例4
实现：这里写图片描述
分析：1）坐标x不变，y从y1 -》底部-》y1
2）循环无停止
3）到达底部或者上部后有停顿

循环部分代码

 SequentialAnimation on y{
 /*running属性为true则是立即执行，也可以使用mouse.pressed等具体某事件发生的时候在执行*/
                running:true
/*loops属性为具体数时表示循环的具体次数。默认为1次。为animation.infinite则是无限循环，除非调用call()函数或者设置running为false*/
                loops:Animation.Infinite
                NumberAnimation{
                    to:200-img.height;
                    /*动画的缓和曲线相当于加速度曲线*/
                    easing.type: "InOutCubic"
                    duration:2000

                }
                /*停顿时间*/
                PauseAnimation{duration:1000}
                NumberAnimation{
                    to:0;easing.type: "OutExpo"
                    duration:1000
                    }
            }

例5
实现：
这里写图片描述
分析：鼠标点击，图片开始规模减小一半的动画

代码

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("动画2/2")
    id:window
    width: 640
    height: 480
    visible: true
    PropertyAnimation{
        id:animation
        target: image
        property: "scale"
        from:1;to:0.5
    }
    Image{
        id:image
        source:"clear.png"
        MouseArea{
            anchors.fill: parent
  /*start()函数将PropertyAnimation的running属性设置为true，即立即执行*/          

            onClicked: animation.start()
        }

    }


}

四.Behavior—–行为
这里写图片描述
分析：按下鼠标，方块移动，松开鼠标，回到原来位置

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("Behavior")
    id:window
    width: 640
    height: 480
    visible: true

       Rectangle{
           id:rect;color:"red";width:100;height:100
           x:mouse.pressed?100:50

           Behavior on x {
               NumberAnimation{duration:500}
           }
           MouseArea{
               id:mouse
               anchors.fill: parent

           }
       }
    }