qml----动画入门(简单的动画实现 NumberAnimation类)

Posted Qt王二狗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了qml----动画入门(简单的动画实现 NumberAnimation类)相关的知识,希望对你有一定的参考价值。

上一节中我们讲了PropertyAnimation类,现在我们来讲讲专门处理数字类型的property。

说起这个NumberAnimation,与PropertyAnimation是表亲,有很多相同的血缘关系,但是塔又重写了from和to两种属性,改成了real类型。下面来个小例子看看

import QtQuick 2.2

Rectangle{
    id: rootItem
    width: 360
    height: 240
    color: "#EEEEEE"

    Rectangle{
        id: rect
        width: 50
        height: 50
        x: 0
        y: 5
        color: "blue"

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                animationX.start()
                animationRotation.running = true
                animationRadius.start()
            }
        }

        NumberAnimation{
            id: animationX
            target: rect
            properties:  "x, y"
            to: 200
            duration: 3000
            easing.type: Easing.OutCubic    //设置运动轨迹
        }

        NumberAnimation{
            id: animationRotation
            target: rect
            property: "rotation"
            to: 360
            duration: 3000
            running: false
            easing.type: Easing.OutInQuad
        }

        NumberAnimation on radius {
            id: animationRadius
            to: 25
            duration: 2000
            running: false
        }
    }
}

效果图如下:

 

ColorAnimation类

在来说说这个ColorAnimation类,巧了,也是前两个远亲的亲戚。它也就干了一件事,重写了from和to属性的类型。改成了color类型。无代码说个卵。。。mdzz,看我下面

import QtQuick 2.2

Rectangle{
    id: rootItem
    width: 360
    height: 240
    color: "#EEEEEE"

    Rectangle{
        id: rect
        width: 60
        height: 60
        anchors.centerIn: parent
        radius: 30
        color: "red"

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onClicked: ColorAnimation{
                target: rect
                property: "color"
                to: "green"
                duration: 1500
            }
        }
    }
}

 

以上是关于qml----动画入门(简单的动画实现 NumberAnimation类)的主要内容,如果未能解决你的问题,请参考以下文章

qml 定时器以及几种简单动画

POP简单动画简单使用 (入门级别)

Qt基于Qml图像帧动画播放

qml----Model/View入门ListView分组显示

动画

动画