咖啡机

说明如何使用时间线和状态动画化UI中的转换。

咖啡机允许用户选择要冲泡的咖啡类型。他们可以使用滑块确定咖啡、热牛奶和奶泡的比例。冲泡过程的进度以动画的形式显示。当咖啡准备好时，启动屏幕再次出现。

“ApplicationFlowForm.ui.qml”文件包含UI中的所有屏幕。我们使用状态显示视图中适当的屏幕，并使用时间线动画化屏幕之间和在屏幕上的转换。

应用程序流

在启动屏幕AnimationFlowForm.ui.qml上，用户可以从几种咖啡类型中选择填充空杯子。选择触发CoffeeButton.qml中的animation1和animation2。

    PropertyAnimation {
        target: glow
        id: animation1
        duration: root.duration
        loops: 1
        from: 1.05
        to: 1.2
        property: "scale"
    }

    ParallelAnimation {
        id: animation2
        SequentialAnimation {
            PropertyAnimation {
                target: glow
                duration: root.duration
                loops: 1
                from: 0.2
                to: 1.0
                property: "opacity"
            }
    ...

选择咖啡类型会触发SideBar.qml中的相应信号处理器，该处理器设置所选咖啡类型的默认混合物。以下代码片段显示《cappuccinoButton.onClicked()`》信号处理器。

    cappuccinoButton.onClicked: {
        sideBar.currentCoffee = qsTr("Cappuccino")
        sideBar.currentFoam = 1
        sideBar.currentMilk = 7
        sideBar.currentCoffeeAmount = 3.5
        sideBar.coffeeSelected()
    }

sideBar.coffeeSelected()信号将ApplicationFlow.qml中的《applicationFlow.state》设置为《"selection"》。我们稍后将指定这些状态。

    choosingCoffee.sideBar.onCoffeeSelected: {
        applicationFlow.state = "selection"
    }

单击“煮一杯”会触发《choosingCoffee.brewButtonSelection.onClicked》信号处理器，该处理器将应用程序流状态更改为《"to settings"》。

    choosingCoffee.brewButtonSelection.onClicked: {
        applicationFlow.state = "to settings"
        applicationFlow.choosingCoffee.milkSlider.value = applicationFlow.choosingCoffee.sideBar.currentMilk
        applicationFlow.choosingCoffee.sugarSlider.value = 2
    }

用户可以使用牛奶和糖的数量滑块来更改默认值。

单击“煮”会触发《choosingCoffee.brewButton.onClicked()`》信号处理器，该处理器将应用程序流状态设置为《"to empty cup"》。

    choosingCoffee.brewButton.onClicked: {
        applicationFlow.state = "to empty cup"
    }

单击“继续”会触发《emptyCup.continueButton.onClicked》信号处理器，该处理器将应用程序流状态设置为《"to brewing"》。

    emptyCup.continueButton.onClicked: {
        applicationFlow.state = "to brewing"
        brewing.coffeeName = choosingCoffee.sideBar.currentCoffee
        brewing.foamAmount = choosingCoffee.sideBar.currentFoam
        brewing.milkAmount = applicationFlow.choosingCoffee.milkSlider.value
        brewing.coffeeAmount = choosingCoffee.sideBar.currentCoffeeAmount
        brewing.start()
    }