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、其他一些动画