QML 动画特效之撞墙反弹

1.在讲此效果看需要在创建项目时选择qtquick;

2. 源码如下

import QtQuick 2.0

Rectangle {

    width: 80

    height: 80

    color: "orange"

    radius: 10

    Text {

        text: qsTr("属性")

        anchors.centerIn: parent

        font.pixelSize: 12

    }

    MouseArea {

        anchors.fill: parent

        onClicked: {

            Qt.quit();

        }

    }

    PropertyAnimation on x {

        from: 50

        to: 500

        duration: 10000

        loops: Animation.Infinite

        easing.type: Easing.OutBounce

    }

}

大概解释一下代码：

Rectangle 代表当前的一个矩形区域， 当然里面是可以再继续嵌入其它的矩形区域的。 

width，height: 表示总区域的宽高

color: 表示背景色

radius: 表示角的弧度。

Text

表示其文本属性。

MouseArea 

表示当鼠标点到这一块区域的反应。

PropertyAnimation

这个就是动画的部分；

    PropertyAnimation on x {

        from: 50

        to: 500

        duration: 10000

        loops: Animation.Infinite

        easing.type: Easing.OutBounce

    }

这段代码表示了在X 轴方向上， 从坐标50 到 500 10秒钟内实现一个碰撞并反弹的循环效果。

loops: Animation.Infinite

这个表示不停地循环。

这是一个总在效果， 在使用使用， 直接使用它对应的文件名不用后缀就行。 这个文件我用的Rect.qml ， 所以在使用它时， 直接用Rect {} 就可以使用了。