Qt Quick 动画

2019-09-28  本文已影响0人  一个三要不起

参考官方文档: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居中,所以这个动画会类似开幕的效果。

上一篇 下一篇

猜你喜欢

热点阅读