上一节中我们讲了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 } } } }