qml Animation三种实例

shyer0527 2015-06-02 10:05:37

先创建一个块，方便复用：
import QtQuick 2.0

Item {
id: root
width: container.childrenRect.width + 16
height: container.childrenRect.height + 16
property alias text: label.text
property alias source: image.source
property alias iwidth: image.width
property alias iheight: image.height
signal clicked

property bool framed : false

Rectangle {
anchors.fill: parent
color: "white"
visible: root.framed
}

Column {
x: 8; y: 8
id: container
Image {
id: image
}
Text {
id: label
width: image.width
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
color: "#e0e0e0"
}
}

MouseArea {
anchors.fill: parent
onClicked: root.clicked()
}
}
//三种用法
//TryAnimation
import QtQuick 2.0

Image {
id: root
source: "images/bg.gif"
//用法1：图像向y方向移动，从原始位置200到40，经过4000毫秒
Tanimation{
id: rocket1
x: 40;y: 200
iwidth: 60
iheight: 60
source: "images/rocketh.png"
text: "animation on property"
NumberAnimation on y{
to : 40;duration: 4000
}
}
//用法2：在用法1的基础上增加鼠标点击事件触发图像移动，同样位置从200到40
Tanimation{
id: rocket2
x:152;y:200
source: "images/rocketh.png"
iwidth: 60
iheight: 60
text: "behavior on property"
Behavior on y {
NumberAnimation{duration: 4000}
}
onClicked: y = 40
// onClicked: y = 40+Math.random()*(200-40)
// enabled: false
}
//用法3：这种方法是最全面的，将所有的变化都放进Animation对象中，通过start（）或restart（）等可对图像进行重复执行
Tanimation{
id: rocket3
x:262;y:200
source: "images/rocketh.png"
iwidth: 60
iheight: 60
text: "standalone animation"
// onClicked: anim.restart()
onClicked: anim.start()
NumberAnimation{
id: anim
target: rocket3
properties: "y"
from: 200
to:40
duration: 4000
running: area.pressed
}
MouseArea{
id: area
}
}
}
//以上只是笔者学习animation中做的三个例子，并非全部用法。

...全文