27.Qt Quick QML-State、Transition

时间 2021-08-13

标签 canvas ide 函数动画 spa 设计 3d 对象 blog 继承栏目软件设计繁體版

原文原文链接

1.State
全部组件均具备默认状态，该状态定义对象和属性值的默认配置。能够经过向States属性添加State组件来定义新状态，以容许组件在不一样配置之间切换.
许多用户界面设计都是由State状态实现的,好比: 交通讯号将根据其State配置来实现红黄绿灯交错亮灭.
在QML中，状态是在State对象中定义的一组属性配置。例如，下面几种用State状态最为方便:canvas

只显示某些UI组件，隐藏其余组件
向用户展现不一样的可用操做
启动、中止或暂停动画
更改特定Item的属性值
显示不一样的视图或screen

全部基于Item的对象都有一个states属性和state属性:ide

tates属性 : list<State>类型,用来保存多个不一样State对象的列表.
state属性 : string类型,用来保存对象当前State对象的名称(表示当前状态是什么样子的),默认是一个空字符串,若是要改变Item对象当前状态,则将state属性设置为要改变的状态name名称便可.

对于非Item对象能够经过StateGroup组件配合来使用State便可函数

1.1 State对象属性动画

name : string,状态名称。,每一个状态在都应具备惟一的名称
changes : list<Change>,保存当前State下的多个Change对象,好比PropertyChanges、StateChangeScript、ParentChange等
extend : string,扩展,表示该状态要在哪一个State的基础上进行扩展,当一个状态要在另外一个状态基础上进行扩展时，它将继承该另外一个状态的全部changes
when : bool,当何时启动状态,默认值为false,好比:when: mouseArea.pressed,表示当有鼠标按下则启动该状态.

1.2 Change对象spa

当一个对象的状态发生改变,那么该对象展现给用户的效果也会相应发生改变,因此State支持了多个不一样Change对象供咱们使用,有以下几种:设计

PropertyChanges: 改变对象的属性值
StateChangeScript:运行脚本,好比function函数
ParentChange: 改变对象的父类对象.而且改变对象在父类对象下的坐标xy,宽高等属性
AnchorChanges: 改变对象的anchor值

因为帮助手册都有不少示例,因此咱们以PropertyChanges为例,来实现一个交通灯3d

1.3 交通灯示例对象

咱们以交通讯号为例,根据其State配置来实现红黄绿灯交错亮灭.效果以下所示:blog

代码以下所示:继承

Window {
    width: 300;
    height: 400;
    visible: true;
    property var delayCnt: 0

    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#14148c" }
            GradientStop { position: 0.699; color: "#14aaff" }
            GradientStop { position: 0.7; color: "#80c342" }
            GradientStop { position: 1.0; color: "#006325" }
        }
    }

    Canvas {
        id: canvas
        anchors.centerIn: parent
        width: 80
        height: 300
        onPaint: {
            var ctx = getContext("2d")
            ctx.fillStyle = "black"
            ctx.fillRect(0,0,width,height-90)
            ctx.fillRect(width/2 -15,height-90,30,90)
        }
    }

    Column {
        id: leds
        anchors.centerIn: canvas
        anchors.verticalCenterOffset: -45
        spacing: 15
        state: delayCnt < 5 ? "red" :
               delayCnt < 10 ? "green" :
               delayCnt < 14 ? (delayCnt%2==0 ? "green" : "") :
               "yellow";

        Rectangle {
            id : redLed
            width: 50; height:50
            radius: width/2
            color: "red"
            opacity: 0.2
        }
        Rectangle {
            id : yellowLed
            width: 50; height:50
            radius: width/2
            color: "yellow"
            opacity: 0.2
        }
        Rectangle {
            id : greenLed
            width: 50; height:50
            radius: width/2
            color: "green"
            opacity: 0.2
        }

        states: [
            State {
                name: "red"
                PropertyChanges { target: redLed; opacity: 1}
            },
            State {
                name: "yellow"
                PropertyChanges { target: yellowLed; opacity: 1}
            },
            State {
                name: "green"
                PropertyChanges { target: greenLed; opacity: 1}
            }
        ]
    }
    Timer {
        interval: 500
        repeat: true
        running: true
        onTriggered: {
            delayCnt = (delayCnt+1)%18
            console.log(delayCnt,leds.state)
        }
    }
}

2.Transition
Transition用来当State发生改变时产生的一个过渡动画(有Transition的地方就会有State出现),使得状态改变动加平滑。
而且全部基于Item的对象都有一个transitions属性,是一个list<Transition>类型,保存着该对象全部的Transtion,只要当该对象的state发生改变时,就会去遍历transitions属性,若是有知足条件的,则产生一个过渡动画.
给transitions赋值和给states赋值同样,假如只有一个Transition,那么咱们能够直接这样写:

transitions: Transition {
... ...
}

假若有多个Tansition,能够这样写:

transitions: [
    Transition {
        ... ...
    },
    Transition {
        ... ...
    } 
]

2.1 Transition对象属性

animations : list<Animation>,default默认属性,此属性保存Transition中的动画列表。
enabled : bool,Transition使能,默认为true,若是为false则禁止
from : string,默认值为"*"(任何状态),只要咱们未设置from,那么每次转换到另外一个状态时,就会将当前状态赋到from中
to : string,默认值为"*"(任何状态),只要咱们未设置to,那么每次转换到另外一个状态时,就会将另外一个状态赋到to中
reversible : bool,是否让动画进行反转,默认为false,只有当Transition使用了SequentialAnimation串行动画时,咱们须要设置为true
running : bool,只读属性,保存当前是否在运行中.

2.2 使用串行动画时注意

一个Transition能够包含多个动画,而且多个动画默认为并行执行的,因此咱们不须要设置reversible为true,由于这些动画没有前后顺序.
只有当Transition使用了SequentialAnimation串行动画时,咱们才须要设置为true

2.3 在交通灯基础上添加过渡动画

咱们在上个示例的leds对象中添加下面代码:

transitions: Transition {
            PropertyAnimation  { target: redLed;  property: "opacity"; duration: 400}
            PropertyAnimation  { target: yellowLed;  property: "opacity"; duration: 400}
            PropertyAnimation  { target: greenLed;  property: "opacity"; duration: 400}
}

只要当redLed、yellowLed、greenLed中的opacity属性发生改变时,就会产生一个400ms的过渡动画.

最终效果以下所示: