devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

QML笔记整理——QtQuick状态、过渡和动画_qt界面过渡动画

作者：小丑西瓜9 | 2024-02-14 20:39:47

赞

踩

qt界面过渡动画
1、States（状态）
状态用于管理有id的元素，它是由多个state元素构成，每个元素都可以定义多个不同的状态（使用states属性定义状态列表；当前状态由state属性指定）当元素进入某个状态时，状态所对应的属性将被设置。我们可以：1）修改anchors对齐方式；2）修改item的parent；3）执行一段javascript代码
状态的例子： 
    Rectangle {
        Rectangle {
            id: stop_light
            ...
        }
        Rectangle {
            id: go_light
            ...
        }
        states: [
            State {
                name: "stop"
                PropertyChanges {
                    target: stop_light; color: "red"
                }
                PropertyChanges {
                    target: go_light; color: "black"
                }
            },
            State {
                name: "go"
                PropertyChanges {
                    target: stop_light; color: "black"
                }
                PropertyChanges {
                    target: go_light; color: "green"
                }
            }
        ]//定义两个状态分别为go和stop，
        //使用PropertyChanges为每个状态设置目标和起对应的属性值
        state: "stop"//define initial state
        MouseArea {
            anchors.fill: parent
            onClicked: parent.state == "stop" ?
                           parent.state = "go" :
                           parent.state = "stop"
        }//使用MouseArea的事件响应来完成不同状态的切换
    }
2、修改属性
states通过PropertyChanges来修饰属性，指定目标元素的id给target属性，定义要修改的目标元素的属性值（一个PropertyChanges元素可以修改多个属性），当进入相应状态时，对应的属性设置就会生效

3、默认属性
每个元素都可以指定一个默认属性，设置属性时，属性名字标签可以被省略。state元素的默认属性是changes

4、状态条件
1）让state决定何时被激活：使用条件判断来决定是否激活一个state
2）使用when属性：用表达式来判断条件，并返回true或false
3）state list中只能有一个state是被激活的：确保一个时间只有一个条件为真 
    Rectangle {
        TextInput {
            id: text_field
            text: "Enter text..."
        }
        Image {
            id: clear_button
            source: "images/clear.png"
            MouseArea {
                anchors.fill: parent
                onClicked: text_field.text = ""
            }
        }
        states:[
            State {
                name: "with text"
                when: text_field.text != ""
                PropertyChanges {
                    target: clear_button
                    opacity: 1.0
                }
            },
            State {
                name: "without text"
                when: text_field.text == ""
                PropertyChanges {
                    target: clear_button
                    opacity: 0.25
                }
                PropertyChanges {
                    target: text_field
                    focus: true
                }
            }
        ]
    }
5、过渡
1）Transition元素用于为状态之间的切换提供动画支持（A. 过渡只能被状态切换激活；B. 过渡中的动画可以以串行或并行的方式执行）
2）通过设置to和from属性，我们可以指定与特定状态绑定的动画
3）过渡可以被设置为reversible（默认为false）。当满足条件时，自动切换到以前的状态
示例：（修改上面的go和stop程序） 
        transitions: [
            Transition {
                from: "stop"; to: "go"
                PropertyChanges {
                    target: stop_light
                    properties: "color"
                    duration: 1000
                }
            },
            Transition {
                from: "go"; to: "stop"
                PropertyAnimation {
                    target: go_light
                    properties: "color"
                    duration: 1000
                }
            }
        ]
通过设置transitions属性来定义多个Transition，设置“stop”和“go”之间的状态切换

6、通用过渡 
        transitions: [
            Transition {
                from: "*"; to: "*"
                PropertyChanges {
                    target: stop_light
                    properties: "color"
                    duration: 1000
                }
                PropertyChanges {
                    target: go_light
                    properties: "color"
                    duration: 1000
                }
            }
        ]
使用“*”匹配所有状态（默认值为“*”）；只要有状态改变，过渡就会被执行；两个目标的过渡是同时进行的

7、可逆过渡 
        transitions: [
            Transition {
                from: "with text"; to: "without text"
                reversible: true
                PropertyChanges {
                    target: clear_button
                    properties: "opacity"
                    duration: 1000
                }
            }
        ]
状态若使用when属性，就可以使用可逆过渡；当两个过渡应用到相同的属性时，可以采用；从状态“with text”到“without text”的时候，过渡生效，当满足条件时，再转换回来，而无须定义两个过渡

8、动画
1）可以对元素的属性变化加入动画：Types： real，int，color，rect，point，size
2）有三种使用动画的方法：基本的属性动画、过渡、属性行为
3）动画可以分组、串行或并行执行：SequantialAnimation、ParallelAnimation、PauseAnimation
4）预定义的easing curve：OutQuad、InElastic、OutBounce等等（欲了解更多详细信息，请查看PropertyAnimation文档）
5）使用属性动画，使用PorpertyAnimation，NumberAnimation，or ColorAnimation他们有公共的基类Animation
6）对于属性行为，使用Behavior
7）对于过渡，使用Transition
示例一： 
    Rectangle {//Example of drop-and-bounce effect on an image
        id: rect
        width: 120; height: 200
        Image {
            id: img
            source: "images/home01.jpg"
            x: 60-img.width/2; y: 0
            SequentialAnimation on y {
                running: true
                loops: Animation.Infinite
                NumberAnimation {
                    to: 200-img.height
                    easing.type: "OutBounce"
                    duration: 2000
                }
                PauseAnimation {
                    duration: 1000
                }
                NumberAnimation {
                    to: 0
                    easing.type: "OutQuad"
                    duration: 1000
                }
            }
        }
    }
示例二： 
    Rectangle {//Animation as a separate element; refered to by its id
        id: rect
        width: 120; height: 200
        PropertyAnimation {
            id: animation
            target: image
            property: "scale"
            from: 1; to: .5
        }
        Image {
            id: image
            source: "images/home01.jpg"
            MouseArea {
                anchors.fill: parent
                onClicked: animation.start()
            }
        }
    }

9、属性行为
设置一个默认的动画在属性发生改变的时候执行（无论什么造成的属性改变，都会执行）
示例：西面这段动画在redRect的x发生改变的时候执行 
    Rectangle {
        ...
        Rectangle {
            id: redRect
            color: "red"
            width: 100; height: 100
            x:...
            Behavior on x {
                NumberAnimation {
                    duration: 300; easing.type: "InOutQuad"
                }
            }
        }
    }
10、使用状态和过渡
1）避免定义过于复杂的状态机
    A）不要使用一个状态机来管理所有的UI部分；
    B）针对不同的控件使用独立的状态机，然后通过状态属性把控件的状态联系起来
2）使用script代码设置状态，简单，但是很难管理，且没有可逆过渡
3）使用状态条件来控制状态更符合声明式的风格，但状态条件可能会很复杂

11、总结
1）状态：使用状态来管理其他元素的属性
    A）定义状态是用元素的属性，每个状态都必须有独立的名字
    B）给元素设置一个id是很有用的，使用PropertyChanges来修改元素的属性
    C）元素的state属性，保存了当前的状态。可以用javascript来修改它的值，也可以使用when属性来设置状态成立条件
2）过渡：过渡用来描述状态之间的切换过程
    A）使用transitions属性来定义元素的过渡
    B）过渡需要描述始末两个状态，使用from和to这两个属性，使用通配符“*”来表示所有状态
    C）过渡是可逆的，相当于把from和to属性的值交换

12、计时器
计时器使用Timer元素表示的，只提供了一个简单的信号：onTriggered，可以单词或重复使用计时器
示例如下： 
    Timer {
        interval: 500
        running: true
        repeat: true
        onTriggered: time.text = Date().toString()
    }
    Text {
        id: time
    }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/81537
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号