小白学qml 6



  • 状态与过渡( States and Transitions)

    除了Animation还有一种方法可以做出动画效果,那就是状态+过渡

    状态( States)

    在QML中, 使⽤State元素来定义状态, 需要与基础元素对象( Item) 的states序列属性连接。 状态通过它的状态名来鉴别, 由组成它的⼀系列简单的属性来改变元素。

    例子中,点击鼠标,可以切换状态,不同状态控制不同的属性值

    //状态与过渡
        Item{
            id: itemState
            anchors.fill: parent
    
            Image{
                id: imgState1
                source: "qrc:/meng.png"
            }
    
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    //切换状态
                    if(itemState.state == "go"){
                        itemState.state = "back"
                    }
                    else{
                        itemState.state = "go"
                    }
                }
            }
    
            //初始化
            state: "back"
    
            states: [
                //状态-go
                State {
                    name: "go"
                    PropertyChanges {target: imgState1; x: 300; }
                },
                //状态-back
                State {
                    name: "back"
                    PropertyChanges {target: imgState1; x: 0; }
                }
            ]
        }
    

    0_1527650315878_20180530_111751.gif

    过渡( Transitions)

    只有状态的切换,画面只有闪现效果,要想有动画效果,需要加过渡

    例子中,根据迁移的状态不同,添加了不同的过渡时间

    transitions: [
                Transition {
                    from: "back"; to: "go"
                    NumberAnimation { target: imgState1; property: "x"; duration: 2000}
                },
                Transition {
                    to: "back"
                    NumberAnimation { target: imgState1; property: "x"; duration: 300}
                }
            ]
    

    0_1527650734088_20180530_112505.gif

    源代码

    Fork me on Gitee


Log in to reply
 

走马观花

最近的回复

  • 这个错误没多大影响,qt模块可以在QT setting里进行勾选

    read more
  • 如果对操作不是很熟悉或者是操作不便的话,也可以在Windows的命令行执行NDK的安装。参数是一样的:
    Windows命令行安装NDK

    read more
  • 忘记补充图片了。这里需要点击更新安装才行。😆
    点击更新安装

    read more
  • 问:
    如何在Qt Creator安装NDK呢?
    除了那个🔽 按钮外,还有别的办法吗?
    答:
    Qt Creaator 4.11中更加整合了Android SDK Manager。其实大家都可以不运行默认的Android SDK Manager,直接在Qt Creator中选项->设备->Android,就可以进行操作了。

    通过````高级选项……,启动一些Android SDK Manager,只需要带上参数ndk-bundle```。原来没有NDK的你,也可以通过Android SDK Manager安装了。很简单吧。
    Android SDK Manager安装NDK

    read more

关注我们

微博
QQ群