自学Q之qml实现qq界面动画效果

代码来自群友@加速

代码实现原理主要利用动画属性进行绘制。

import QtQuick 2.3
import QtQuick.Window 2.2
Window {
    id:mainwindow
    visible: true
    width: 400
    height: 300
    flags:  Qt.FramelessWindowHint|Qt.WindowSystemMenuHint|Qt.WindowMinimizeButtonHint|Qt.Window

    color: "red"
    Rectangle{
        color: "silver"
        width: parent.width
        height: gradient.anchors.topMargin
        Component.onCompleted: ParallelAnimation{
            NumberAnimation {
                target: gradient
                property: "anchors.topMargin"
                duration: 800
                to:mainwindow.height
            }
        }
        Rectangle{
            id:gradient
            color: "silver"
            width: parent.width
            anchors.top: parent.top
            anchors.topMargin: 80
            height: 40
            gradient: Gradient{
                GradientStop {
                    position: 0.0; color: "silver"
                }
                GradientStop {
                    position: 0.8
                    color: "gray"
                }
            }
        }
    }

}