qml动画实现.docx
《qml动画实现.docx》由会员分享,可在线阅读,更多相关《qml动画实现.docx(15页珍藏版)》请在冰豆网上搜索。
qml动画实现
动画应用场景有下面几种:
首先假设一个Rectangle,动画是要改变它的x和y值
1,Rectangle一旦被创建,就要移动到一个特定的位置
2,动画只有在某一个特定的外部行为触发时候才会被触发,例如,鼠标单击某一个控件时候,产生动画,使目标移动到指定的位置
3,只有在某一个特定的信号后才触发
4,做为一个独立的动画,虽然没有绑定rectangle的运动,但是可以在脚本中加载,开始和停止
5,只有在状态改变时候才会触发
6,只有在某一个属性改变时候才触发,无论这个属性是通过什么样的方法来改变的
7,在一个特定的信号处理器中创建,当接收到对应的信号时候就触发,类似于3
下面分别用代码来看几种实现方法:
【1】首先是对第一种场景
Rectangle{
color:
"red"
width:
360
height:
50
PropertyAnimationonx{to:
50;duration:
1000;loops:
Animation.Infinite}
PropertyAnimationony{to:
250;duration:
1000;loops:
Animation.Infinite}
}
Rectangle一旦被创建,就立刻从(0,0)坐标移动到(50,250),在一秒时间内
【2】第二种场景代码,行为动画,在某一个属性值发生变化时候触发
Rectangle{
color:
"red"
width:
360
height:
50
id:
rect
Behavioronx{
PropertyAnimation{duration:
1000}
}
Behaviorony{
PropertyAnimation{duration:
1000}
}
}
MouseArea{
anchors.fill:
parent
onClicked:
{
rect.x=mouse.x;
rect.y=mouse.y;
}
}
这段代码实现了,在点击了屏幕上的一点后,rect会在一秒的时间内触发动画,到达鼠标所点击的位置,因为在onClicked里面,我们修改了rect的x和y值。
【3】在信号处理器中触发动画
Rectangle{
color:
"red"
width:
360
height:
50
id:
rect
MouseArea{
anchors.fill:
parent
onClicked:
PropertyAnimation{
target:
rect;properties:
"y"
to:
250
duration:
1000
}
}
}
当点击rect的时候,就会触发动画,使rect的y从0运动到250
【4】动画作为一个独立的动画,可以像创建普通的QML对象一样创建,_而不需要绑定特定的对象和属性。
Rectangle{
color:
"red"
width:
360
height:
50
id:
rect
PropertyAnimation{
id:
animation
target:
rect
properties:
"width"
duration:
1000
}
MouseArea{
anchors.fill:
parent
onClicked:
{
animation.to=50
animation.running=true;
}
}
}
一个独立的动画对象默认是没有运行的,必须使用running属性,或者start()stop()来运行它。
【5】切换,切换用来设置当状态发生改变时候,需要创建一个切换,Transition对象。
然后把它添加到对象的transition属性下面,代码
Rectangle{
Rectangle{
color:
"gray"
y:
100
width:
360
height:
80
id:
rect1
}
//切换状态
Rectangle{
color:
"steelblue"
width:
360
height:
80
id:
rect
MouseArea{
anchors.fill:
parent
onClicked:
{
console.log("dddd")
rect.state="move"
rect1.height=50
rect1.state="move"
}
}
states:
[
State{
name:
"move"
PropertyChanges{
target:
rect
y:
250
}
PropertyChanges{
target:
rect1
y:
330
}
}
]
transitions:
[
Transition{
PropertyAnimation{
properties:
"y"
duration:
5000
}
}
]
}
}
当点击rect的时候,rect和rect1的状态切换到move状态,move状态中的两个PropertyChanges对象定义了rect和rect1的属性改变值,这时候Transition会自动被执行,Transition里面的PropertyAnimation对象会自动将rect和rect1的属性值y切换到对应的值,这里并没有设置from和to值,在状态开始和结束的时候已经设置了他们的值。
另外propertyAnimation并不需要指定target属性,这样任何对象的y值在状态切换时候都会使用这个动画,不过也可以指定一个target来使用这个动画,另外在Transition里面的东辉会并行执行,如果要串行执行,可以使用SequentiaAnimation.这个代码也可以这样来写:
Rectangle{
Rectangle{
color:
"gray"
y:
100
width:
360
height:
80
id:
rect1
}
//切换状态
Rectangle{
color:
"steelblue"
width:
360
height:
80
id:
rect
MouseArea{
anchors.fill:
parent
onClicked:
{
console.log("dddd")
rect.state="move"
rect1.height=50
rect1.state="move"
}
}
states:
[
State{
name:
"move"
}
]
transitions:
[
Transition{
PropertyAnimation{
target:
rect
from:
0
to:
250
properties:
"y"
duration:
5000
}
PropertyAnimation{
target:
rect1
properties:
"y"
from:
100
to:
330
duration:
2000
}
}
]
}
}
[6]属性动画元素
PropertyAnimation元素是用来为属性提供动画最基本动画元素,他可以为real,int,color,rect,point,sized,vector3d来提供动画设置。
它可以被NumberAnimation,ColorAnimation,RotationAnimation,Vector3dAnimation等继承,他们分别提供了更高效的属性动画实现方式。
并且任何基于PropertyAnimation的对象都可以设置easing属性来动画中使用的缓和曲线。
例如:
Rectangle{
color:
"gray"
y:
100
width:
360
height:
80
id:
rect1
ColorAnimationoncolor{from:
"white";to:
"red";duration:
5000}
RotationAnimationonrotation{
from:
0
to:
360
direction:
RotationAnimation.Clockwise
duration:
5000
}
}
下面是代码整体合起来和运行效果:
importQtQuick2.2
importQtQuick.Controls1.1
ApplicationWindow{
visible:
true
width:
360
height:
480
title:
qsTr("HelloWorld")
menuBar:
MenuBar{
Menu{
title:
qsTr("File")
MenuItem{
text:
qsTr("Exit")
onTriggered:
Qt.quit();
}
}
}
Rectangle{
Rectangle{
color:
"gray"
y:
100
width:
360
height:
80
id:
rect1
ColorAnimationoncolor{from:
"white";to:
"red";duration:
5000}
RotationAnimationonrotation{
from:
0
to:
360
direction:
RotationAnimation.Clockwise
duration:
5000
}
}
//切换状态
Rectangle{
color:
"steelblue"
width:
360
height:
80
id:
rect
MouseArea{
anchors.fill:
parent
onClicked:
{
console.log("dddd")
rect.state="move"
rect1.height=50
rect1.state="move"
}
}
states:
[
State{
name:
"move"
//PropertyChanges{
//target:
rect
//y:
250
//}
//PropertyChanges{
//target:
rect1
//y:
330
//}
}
]
transitions:
[
Transition{
PropertyAnimation{
target:
rect
from:
0
to:
250
properties:
"y"
duration:
5000
easing.type:
Easing.OutBounce
}
PropertyAnimation{
target:
rect1
properties:
"y"
from:
100
to:
330
duration:
2000
easing.type:
Easing.OutBounce
}
}
]
}
}
/*
//初始化就触发的动画
Rectangle{
color:
"red"
width:
360
height:
50
PropertyAnimationonx{to:
50;duration:
1000;loops:
Animation.Infinite}
PropertyAnimationony{to:
250;duration:
1000;loops:
Animation.Infinite}
}
*/
/*
Rectangle{
color:
"red"
width:
360
height:
50
id:
rect
Behavioronx{
PropertyAnimation{duration:
1000}
}
Behaviorony{
PropertyAnimation{duration:
1000}
}
}
MouseArea{
anchors.fill:
parent
onClicked:
{
rect.x=mouse.x;
rect.y=mouse.y;
}
}
*/
/*
Rectangle{
color:
"red"
width:
360
height:
50
id:
rect
MouseArea{
anchors.fill:
parent
onClicked:
PropertyAnimation{
target:
rect;properties:
"y"
to:
250
duration:
1000
}
}
}
*/
/*
Column{
Rectangle{
color:
"blue"
width:
360
height:
50
TextInput{
anchors.fill:
parent
}
}
Rectangle{
color:
"red"
width:
360
height:
50
id:
rect
PropertyAnimation{
id:
animation
target:
rect
properties:
"width"
duration:
1000
}
MouseArea{
anchors.fill:
parent
onClicked:
{
animation.to=50
animation.running=true;
}
}
}
}
*/
Text{
text:
qsTr("HelloWorld")
anchors.centerIn:
parent
}
}
红色的巨型首先经过一个360旋转和变色,然后点击蓝色的巨型,就会像弹簧一样落下来。
刚刚提到Transition中的组合动画,ParalleAnimation和SequentialAnimation分别提供并行和串行的动画表现方案。