qml Animation三种实例
先创建一个块,方便复用:
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中做的三个例子,并非全部用法。
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中做的三个例子,并非全部用法。
...全文
相关推荐
Qt Qml实例分析—QML调用C++方法, C++调用QML
QML调用C++方法, C++调用QML,C++发送信号QML接收
第17篇 QML动态元素 之 应用动画
1、动画元素 PropertyAnimation(属性动画) - 使⽤属性值改变播放的动画 NumberAnimation(数字动画) - 使⽤数字改变播放的动画 ColorAnimation(颜⾊动画) - 使⽤颜⾊改变播放的动画 RotationAnimation(旋转动画) - 使⽤旋转改变播放的动画 PauseAnimation(停⽌动画) - 运⾏暂停⼀个动画 SequentialAnimation(顺序动画) - 允许动画有序播放 ParallelAnimation(并⾏动画) - 允许动画
blackberry qml animation
blackberry qml animation
简单的QML实例
代码很简单, 供了解对学习QML的人学习和参考一下。 可以,看到QML 通过一些简单的代码就能实现图片的运动,改变。
QML学习实例
QML是一种描述语言,主要是对界面效果等的一种描述,它可以结合javaScript来进行更复杂的效果及逻辑实现。比如做个游戏,实现一些更有趣的功能等.


