QML-動畫

零、概念

摘抄QMLBook的概念：

 總結就是：QML的動畫其實就是在改變元素的屬性。

 

一、Behavior

1、Behavior概念

當一個特定的屬性值變化的時候，可以用Behavior是用來定義一個默認的動畫。

如在某些場景種我們可能會改動Item的一些屬性如width，默認情況下，width的變化是瞬間完成的。為了讓過程更加動態，我們可以為widht增加一個Behavior，設置一個變化時間，這樣一個簡單動畫就完成了。

 總之：Behavior用於屬性變化后的動畫。

2、例子1

定義一個Rectangle，當鼠標點擊后，其寬度在默認寬度和0之間切換，切換有個1秒的變化過程。代碼：

import QtQuick 2.6
import QtQuick.Window 2.2

Rectangle {
    Rectangle {
        id: btn
        width: 100;
        height: 20;
        x:100;
        y:100;
        color: "gray"
        Behavior on width{
            NumberAnimation {
                duration: 1000
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            btn.width = btn.width==100?0:100
        }
    }
}

效果：

 

 3、例子2

鼠標點擊哪里，rect就去哪里

import QtQuick 2.0

Rectangle {
    id: root
    width: 800;
    height: 800
    color: "gray"

    Rectangle{
        color:"red"
        width:50
        height:50
        id:rect
        Behavior on x {
            PropertyAnimation{ duration : 1000 }
        }

        Behavior on y {
            PropertyAnimation{ duration : 1000 }
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked:{
            rect.x=mouse.x;
            rect.y=mouse.y;
        }
    }
}

 

 

 

二、PropertyAnimation

1、關於PropertyAnimation

是非常常用的動畫組件。

基類：Animation

被繼承的類：AnchorAnimation, Animator, ParallelAnimation, ParentAnimation, PathAnimation, PauseAnimation, PropertyAction, PropertyAnimation, ScriptAction, and SequentialAnimation

重點關注的類：PropertyAnimation

PropertyAnimation子類：ColorAnimation, NumberAnimation, RotationAnimation, and Vector3dAnimation【暫不考慮】

PS：理論上PropertyAnimation能實現子類大多數功能，但是為了提高性能，Qt才提供了這些子類。

2、例子1

控件被創建后就生成一個動畫

import QtQuick 2.0

Rectangle {
    id: rect
    width: 800;
    height: 800
    color: "gray"
    Rectangle{
        x:100
        y:100
        width: 100;
        height: 100
        color: "red"

        //Behavior on x {
            //NumberAnimation { duration: 1000 }
        //}
        PropertyAnimation on x{
            from: 100
            to: 500
            duration: 1000
            easing.type: Easing.InOutQuad
            loops: Animation.Infinite
        }
    }
}

 

 

 注意：這里如果與Behavior共同使用，會是無效。

 

3、例子2

信號觸發后執行動畫

import QtQuick 2.0

Rectangle {
    id: root
    width: 800;
    height: 800
    color: "gray"

    Rectangle{
        color:"red"
        width:50
        height:50
        id:rect
    }
    MouseArea{
        anchors.fill: parent
        onClicked:
            PropertyAnimation{
            target:rect ;
            properties:"y"
            to:250
            duration:1000
        }

    }
}

 

 

4、例子3

動畫作為組件

import QtQuick 2.0

Rectangle {
    id: root
    width: 800;
    height: 800
    color: "gray"

    Rectangle{
        color:"red"
        width:50
        height:50
        id:rect
    }
    PropertyAnimation{
        id:animation
        target:rect
        properties: "width"
        duration: 1000
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            animation.to=500
            animation.running=true;
        }
    }
}

 

 

三、ColorAnimation

1、例子

顏色漸變

import QtQuick 2.0

Rectangle {
    id: root
    width: 800;
    height: 800
    color: "gray"

    Rectangle{
        color:"green"
        y:100
        width:360
        height:80
        id:rect

        ColorAnimation on color { from: "white"; to: "red"; duration: 5000 }
    }
}

 

 

四、RotationAnimation

1、例子

import QtQuick 2.0

Rectangle {
    id: root
    width: 800;
    height: 800
    color: "gray"

    Rectangle{
        color:"green"
        y:100
        width:360
        height:80
        id:rect

        RotationAnimation on rotation{
            from:0
            to:360
            direction: RotationAnimation.Clockwise
            duration:5000
        }
    }
}

 

 部分實例參考：https://www.cnblogs.com/bhlsheji/p/5168242.html

 

 五、過渡Transitions

 1、例子

rect點擊后改變放大兩倍，使用過渡動畫讓這個過程慢慢完成

import QtQuick 2.0

Rectangle{
    id:rootItem
    width:360
    height: 240
    color: "white"

    Rectangle{
        id:rect
        color: "gray"
        width: 50
        height: 50
        anchors.centerIn: parent

        MouseArea{
            id:mouseArea
            anchors.fill: parent
        }
        //定義狀態
        states:[
            State{
                name: "pressed"
                when: mouseArea.pressed
                PropertyChanges {
                    target: rect
                    color:"green"
                    scale:2
                }
            }
        ]

        //定義過渡
        transitions: [
            Transition {
                //沒有設置from/to，過渡關聯任何動畫
                //比例動畫
                NumberAnimation {
                    property: "scale"
                    duration: 1000
                    easing.type: Easing.InOutQuad
                }
                //顏色變化
                ColorAnimation {
                    duration: 600
                }
            }
        ]
    }
}

 參考：https://blog.csdn.net/quietbxj/article/details/108325794

 

 

 

 

PS：

1、其他一些動畫