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 {} 就可以使用了。