Qt Quick 动画

参考官方文档:https://doc.qt.io/qt-5/qml-qtquick-animation.html

所有动画类型都是继承自Animation,这些动画类都有AnchorAnimation, Animator, ParallelAnimation, ParentAnimation, PathAnimation, PauseAnimation, PropertyAction, PropertyAnimation, ScriptAction, SequentialAnimation

PropertyAnimation类型举例:

import QtQuick 2.13
import QtQuick.Window 2.13

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Test Animation")

    property var colorList: ["white", "aqua", "burlywood", "cadetblue", "coral"]
    property var colorIdx: 0

    Rectangle{
        id: rect
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: colorList[colorIdx]

        PropertyAnimation{
            id: animation
            target: rect
            properties: "width"
            from: 0
            to: root.width
            duration: 3000
            easing.type: Easing.Linear
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                root.color = rect.color
                colorIdx = (colorIdx + 1) % colorList.length
                animation.start()
            }
        }
    }
}

其作用是点击rect时会切换rect的背景颜色,动画效果是让rect 的width值从0变到640(root.width),用时3000毫秒,变化趋势是线性变化。由于rect使用了anchors居中,所以这个动画会类似开幕的效果。

你可能感兴趣的:(Qt Quick 动画)