qml-Behaviror

一个简单的程序，将矩形宽度从100->300

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12
import QtQuick.Controls 2.5

Window {
    id:root
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        width: 100
        height:100
        color:'red'

        MouseArea{
            anchors.fill: parent
            onClicked: parent.width = 300
        }
    }
}

效果：

如果加上动画效果：

    Rectangle{
        width: 100
        height:100
        color:'red'

        Behavior on width{
            NumberAnimation{
                duration: 1000
            }
        }

        MouseArea{
            anchors.fill: parent
            onClicked: parent.width = 300
        }
    }

效果：

 Behavior

        定义了在特定属性值更改时要应用的默认动画。
        例如，上面的demo中 Behavior 定义了一个 NumberAnimation，每当 Rectangle 的宽度值发生变化时就会运行它。 单击 MouseArea 时，宽度会发生变化，从而触发行为的动画。

        请注意，一个属性不能有多个分配的行为。 要在 Behavior 中提供多个动画，请使用 ParallelAnimation 或 SequentialAnimation。

        
        如果状态更改具有与行为相同的属性匹配的转换，则转换动画会覆盖该状态更改的行为。 有关使用行为动画状态更改的一般建议，请参阅使用 Qt Quick Behaviors with States。
另请参阅 Qt Quick 中的动画和过渡、行为示例和 Qt QML。

        当然，也可以将坐标x,y  颜色color等属性设置默认动画，如下 颜色由red->green ,x由0->300

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12
import QtQuick.Controls 2.5

Window {
    id:root
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        width: 100
        height:100
        color:'red'

        Behavior on x{
            NumberAnimation{
                duration: 1000
            }
        }

        Behavior on x{
            NumberAnimation{
                duration: 1000
            }
        }

        Behavior on color{
            ColorAnimation{
                duration: 1000
            }
        }



        MouseArea{
            anchors.fill: parent
            onClicked: {
                if (parent.x == 0){
                    parent.x = 300
                    parent.color = 'green'
                }
                else if (parent.x == 300){
                    parent.x = 0
                    parent.color = 'red'
                }
            }
        }
    }


}

NumberAnimation

是一个专门的 PropertyAnimation，它定义了数值变化时要应用的动画。

这是一个 NumberAnimation 应用于 Rectangle 的 x 属性作为属性值源。 它在 1000 毫秒内将 x 值从其当前值设置为 50 的动画：

 Rectangle {
     width: 100; height: 100
     color: "red"

     NumberAnimation on x { to: 50; duration: 1000 }
 }

        与任何其他动画类型一样，NumberAnimation 可以通过多种方式应用，包括过渡、行为和属性值源。 Qt Quick 文档中的 Animation and Transitions 展示了各种创建动画的方法。
请注意，如果 NumberAnimation 跟踪的数值发生不规则变化，则其动画可能不流畅。 如果是这种情况，请改用 SmoothedAnimation。

ColorAnimation

        一个专门的 PropertyAnimation，它定义了当颜色值改变时要应用的动画。
        这是一个应用于 Rectangle 的颜色属性的 ColorAnimation 作为属性值源。 它将颜色属性的值从其当前值设置为“红色”值，时间超过 1000 毫秒：

 Rectangle {
     width: 100; height: 100
     color: "red"

     ColorAnimation on color { to: "yellow"; duration: 1000 }
 }

        与任何其他动画类型一样，ColorAnimation 可以通过多种方式应用，包括过渡、行为和属性值源。 Qt Quick 文档中的 Animation and Transitions 展示了各种创建动画的方法。
为方便起见，当在 Transition 中使用 ColorAnimation 时，它将为在状态更改期间已修改的任何颜色属性设置动画。 如果为动画显式设置了一个或多个属性，则使用这些属性。

SequentialAnimation

        SequentialAnimation 和 ParallelAnimation 类型允许多个动画一起运行。 SequentialAnimation 中定义的动画一个接一个地运行，而 ParallelAnimation 中定义的动画同时运行。
        以下示例按顺序运行两个数字动画。 矩形动画到 50 的 x 位置，然后到 50 的 y 位置。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12
import QtQuick.Controls 2.5

Window {
    id:root
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello World")


    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"

        SequentialAnimation {
            running: true
            NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
            NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
        }
    }

}

ParallelAnimation 

The Rectangle moves to (50,50) by animating its x and y properties at the same time

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12
import QtQuick.Controls 2.5

Window {
    id:root
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"

        ParallelAnimation {
            running: true
            NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
            NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
        }
    }
}

transitions

        Item.transtions

        此属性保存此项目的转换列表。 这些定义了每当项目更改其状态时要应用于项目的转换。
该属性被指定为一个转换对象的列表。 例如：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12
import QtQuick.Controls 2.5

Window {
    id:root
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"

        transitions:Transition {
            NumberAnimation{
                property: 'width'
                duration: 1000
            }


            ColorAnimation {
                property: 'color'
                duration: 1000
            }
        }

        states:  State {
            name: "demo"
            PropertyChanges {
                target: rect
                width:300
                color:"orange"

            }
        }




        MouseArea{
            anchors.fill:parent
            onClicked: {
                //parent.width = 300

                rect.state = rect.state ?"":"demo"
            }
        }
    }
}